Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

jpnb95

Alterar valores JS ao clicar em link

Por , em Javascript

Recommended Posts

jpnb95    0

jpnb95
Postado

Olá pessoal tudo bem? Espero que sim.

 

Achei algo interessante e decidi colocar em um sistema que estou desenvolvendo.

 

Resumindo é uma Lightbox para o Google Maps

 

O código é esse:

		<html>
			<head>
				<script src="http://www.google.com/jsapi" type="text/javascript"></script> 
				<script type="text/javascript" charset="utf-8"> 
					google.load("jquery", "1.4.2");
				</script>
				<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
				<script src="js/prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
	
				<!-- Google Maps Code -->
				<script type="text/javascript"
				    src="http://maps.google.com/maps/api/js?sensor=true">
				</script>
				<script type="text/javascript">
				  function initialize() {
				    var latlng = new google.maps.LatLng(-34.397, 150.644);
				    var myOptions = {
				      zoom: 8,
				      center: latlng,
				      mapTypeId: google.maps.MapTypeId.ROADMAP
				    };
				    var map = new google.maps.Map(document.getElementById("map_canvas"),
				        myOptions);
				  }

				</script>
				<!-- END Google Maps Code -->
			</head>
			<body>
            
				<p><a href="#?custom=true&width=260&height=270" rel="prettyPhoto">Open a Google Map</a></p>
		
				<script type="text/javascript" charset="utf-8">
				$(document).ready(function(){			
					$("a[rel^='prettyPhoto']").prettyPhoto({
						custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
						changepicturecallback: function(){ initialize(); }
					});
				});
				</script>
			</body>
		</html>

De modo geral ele mostra a localização à partir Latitude e a Longitude.

 

Funciona perfeitamente, no entanto, pego os dados à partir de um BD SQL e terá diversos cadastros com seus respectivos mapas.

 

A minha dúvida é o seguinte, na linha (#16) que ele pega a latitude e a longitude e no link onde clica para mostara o map na linha (#31):

var latlng = new google.maps.LatLng(-34.397, 150.644); (LINHA #16)

<p><a href="#?custom=true&width=260&height=270" rel="prettyPhoto">Open a Google Map</a></p> (LINHA #31)

Os valores da Lat e Long tera q mudar de acordo que clica em cada link, pois serão vários registros em uma página, mas não sei como fazer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Cara, uma forma é ter a lat e a long em algum atributo do elemento clicado

 

<p><a href="#?custom=true&width=260&height=270" rel="prettyPhoto" data-geo="-34.397, 150.644">Open a Google Map</a></p>
Ai vc leria esse atributo.

Só que o prettyPhoto, pelo o que vi rapidamente na documentação, não possui um ponteiro para o elemento clicado, oq dificulta a solução.

 

Ai vc teria que mudar a forma com que ele dispara, utilizando a api $.prettyPhoto.open(), e escutando o click vc mesmo, em vez de deixar para o plugin.

Compartilhar este post

Link para o post
Compartilhar em outros sites

jpnb95    0

jpnb95
Postado

Willian, usando $.prettyPhoto.open(); não consegui, mas fiz algo q deu parcialmente certo, veja:

 

Código Final:

		<html>
			<head>
				<script src="http://www.google.com/jsapi" type="text/javascript"></script> 
				<script type="text/javascript" charset="utf-8"> 
					google.load("jquery", "1.4.2");
				</script>
				<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
				<script src="js/prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
	
				<!-- Google Maps Code -->
				<script type="text/javascript"
				    src="http://maps.google.com/maps/api/js?sensor=true">
				</script>
				<script type="text/javascript">
				  function initialize() {
					var coord1 = document.getElementById("foto").getAttribute('data-coord1');
					var coord2 = document.getElementById("foto").getAttribute('data-coord2');
				    var latlng = new google.maps.LatLng(coord1, coord2);
				    var myOptions = {
				      zoom: 16,
				      center: latlng,
				      mapTypeId: google.maps.MapTypeId.ROADMAP
				    };
				    var map = new google.maps.Map(document.getElementById("map_canvas"),
				        myOptions);
				  }

				</script>
				<!-- END Google Maps Code -->
			</head>
			<body>
            
                
	<p><a href="#?custom=true&width=260&height=270" id="foto" rel="prettyPhoto"  data-coord1="-27.5300139" data-coord2="-48.5243334">TESTE MAPA</a></p>

		
				<script type="text/javascript" charset="utf-8">
				$(document).ready(function(){			
					$("a[rel^='prettyPhoto']").prettyPhoto({
						custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
						changepicturecallback: function(){ initialize(); }
					});
					
				});
				
				
				</script>
			</body>
		</html>

Note que alterei nas linhas 16, 17, 18

var coord1 = document.getElementById("foto").getAttribute('data-coord1'); #16
var coord2 = document.getElementById("foto").getAttribute('data-coord2'); #17
var latlng = new google.maps.LatLng(coord1, coord2); #18

Veja que ele pega a foto com o id foto e pega o valor do data coord-1 e o mesmo na linha 17, logo na 18 jogo as variáveis para a leitura da latitude e longitude.

 

Até então deu tudo certo, mas o problema é q vai ter outro link com o id="foto" e acaba dando conflito, e acaba não aparecendo nenhum mapa, teria algum modo de arrumar isso? Se pudesse demonstrar como.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

A única forma é com o .open() e com o atributo no elemento q foi clicado mesmo.

 

Se vc não conseguir, troque o prettyPhoto por outro modal que permita manipular mais facilmente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

jpnb95    0

jpnb95
Postado

Consegui usando a fancyBox, mantém o mesmo padrão de qualidade, achei até melhor, e uma grande simplicidade no modo de incorporar o mapa na "lightbox".

 

Se alguém quiser + alguma informação deixarei os links para estudo aqui:

- Site Oficial: http://fancyapps.com/fancybox/

- For Google Maps: http://webdesignandsuch.com/using-fancybox-for-responsive-google-maps/

- Exemplo em funcionamento: http://webdesignandsuch.com/posts/fancybox-download/google-maps-fancybox/fancybox-google-maps.html

 

No demais, obrigado pelo seu tempo :joia:

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito