Ir para conteúdo

POWERED BY:

Arquivado

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

suportetecnicojunior

[Resolvido] Gmaps API

Por , em Javascript

Recommended Posts

suportetecnicojunior    0

suportetecnicojunior
Postado

Ae galera... Cheguei muito próximo do que preciso, alguém manja de JS?

Essa função exibe o resultado em um "balão", alguém sabe como exibir dentro de uma div ou tabela???

 

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8" />
   <title>Google Maps JavaScript API Example: 	Extraction of Geocoding Data</title>
<script src="http://maps.google.com/maps?file=api&v=2.88&key=ABQIAAAA2CA4dlW6vQusiu83HYLjlBQM3gK90XNFEtMmnfapPgJYWmHd2hRDLoM_02hsBnWJkjOHWoNOzDCVwQ" type="text/javascript"></script>    
   <script type="text/javascript">

   var map;
   var geocoder;

   function initialize() {
     map = new GMap2(document.getElementById("map_canvas"));
     map.setCenter(new GLatLng(34, 0), 1);
     geocoder = new GClientGeocoder();
   }

   // addAddressToMap() is called when the geocoder returns an
   // answer.  It adds a marker to the map with an open info window
   // showing the nicely formatted version of the address and the country code.
   function addAddressToMap(response) {
     map.clearOverlays();
     if (!response || response.Status.code != 200) {
       alert("Sorry, we were unable to geocode that address");
     } else {
       place = response.Placemark[0];
       point = new GLatLng(place.Point.coordinates[1],
                           place.Point.coordinates[0]);
       marker = new GMarker(point);
       map.addOverlay(marker);
       marker.openInfoWindowHtml(place.address + '<br>' +
         '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
     }
   }

   // showLocation() is called when you click on the Search button
   // in the form.  It geocodes the address entered into the form
   // and adds a marker to the map at that location.
   function showLocation() {
     var address = document.forms[0].q.value;
     geocoder.getLocations(address, addAddressToMap);
   }

  // findLocation() is used to enter the sample addresses into the form.
   function findLocation(address) {
     document.forms[0].q.value = address;
     showLocation();
   }

   </script>
 </head>

 <body onload="initialize()">

   <!-- Creates a simple input box where you can enter an address
        and a Search button that submits the form. //-->
   <form action="#" onsubmit="showLocation(); return false;">
     <p>
       <b>Search for an address:</b>
       <input type="text" name="q" value="" class="address_input" size="40" />
       <input type="submit" name="find" value="Search" />
     </p>
   </form>
   <div id="map_canvas" style="width: 500px; height: 300px"></div>
   <div id="add"></div>


 </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

aqui nessa function:

    function addAddressToMap(response) {
     map.clearOverlays();
     if (!response || response.Status.code != 200) {
       alert("Sorry, we were unable to geocode that address");
     } else {
       place = response.Placemark[0];
       point = new GLatLng(place.Point.coordinates[1],
                           place.Point.coordinates[0]);
       marker = new GMarker(point);
       map.addOverlay(marker);
       marker.openInfoWindowHtml(place.address + '<br>' +
         '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);

       document.getElementById('resposta').innerHTML = place.address + '<br>' +
         '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode;

     }
   }

note o trecho q adicionei:

        document.getElementById('resposta').innerHTML = place.address + '<br>' +
         '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode;

logo, preciso criar essa div:

 

	<div id="resposta"></div>

 </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

suportetecnicojunior    0

suportetecnicojunior
Postado

William,

 

Muito obrigado!!!

Fico te devendo um chopp!!!

Problema resolvido, valew cara.

 

 

Ainda não esta do jeito que eu quero, cheguei muito próximo usando o seguinte script:

<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=2.88&key=ABQIAAAA2CA4dlW6vQusiu83HYLjlBQM3gK90XNFEtMmnfapPgJYWmHd2hRDLoM_02hsBnWJkjOHWoNOzDCVwQ" type="text/javascript"></script>
<script type="text/javascript">
   var map;
   var geocoder;

   function initialize() {

var address = '-25.463889,-54.442449';   	

     map = new GMap(document.getElementById("add"));
     geocoder = new GClientGeocoder();
     geocoder.getLocations(address, addAddressToMap);


   function addAddressToMap(response) {
     map.clearOverlays();
       place = response.Placemark[0];
       point = new GLatLng(place.Point.coordinates[1],
                           place.Point.coordinates[0]);
       marker = new GMarker(point);
       map.addOverlay(marker);
       document.getElementById('add').innerHTML = place.address + '<br>';

       }

       }

</script>
</head>

<body onload="initialize()">
<div id="add"></div>
</body>
</html>

 

Preciso de ajuda para dar um loop nessa função, tipo assim, a "var address" vai receber várias coordenadas de uma base de dados, como listar cada endereço em uma nova linha???

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Guima    164

Lucas Guima
Postado

Se você está começando agora, sugiro já migrar para a v3 da API, a v2 será depreciada.

 

No link abaixo você encontra tudo o que precisa sobre ela:

http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/basics.html

 

Especificamente sobre Geocodificação:

http://code.google.com/intl/pt-BR/apis/maps/documentation/javascript/services.html#Geocoding

 

Comparando com o seu código, eu achei mais fácil de trabalhar com a nova versão.

 

Quanto à sua dúvida, você quer criar marcadores, é isso? Um marcador para cada endereço que estará nessa base?

Compartilhar este post

Link para o post
Compartilhar em outros sites

suportetecnicojunior    0

suportetecnicojunior
Postado

Boa noite Lucas,

 

O que preciso é gerar um relatório de endereços, se você compilar essa página que postei verá o resultado do que eu preciso, porém o script ta funcionando com somente uma coordenada, preciso fazer um loop ou while nesse código para poder gerar essas linhas com várias coordenadas, sacou?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Guima    164

Lucas Guima
Postado

Isso acontece porque você sobrescreve conteúdo da div #add neste trecho:

 

document.getElementById('resposta').innerHTML = place.address + '<br>' +
'<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode;

 

Não sei se com JS exite alguma coisa equivalente ao .append() do jQuery, mas fiz isso abaixo e funcionou:

 

document.getElementById('add').innerHTML = document.getElementById('add').innerHTML + 
'<p>' + place.address + '<br />' +
'<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode + '</p>';

 

Ele pega o novo endereço e "concatena" com o conteúdo da div #add

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

é possível trocar isso:

document.getElementById('add').innerHTML = document.getElementById('add').innerHTML + 
       '<p>' + place.address + '<br />' +
       '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode + '</p>';

por:

document.getElementById('add').innerHTML += '<p>' + place.address + '<br />' +
       '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode + '</p>';

 

+=

 

lembrem-se, se existe em jQuery, existe em javascript, afinal a linguagem real por trás, é javascript.

(o conceito de append é diferente do innerHTML)

Compartilhar este post

Link para o post
Compartilhar em outros sites

suportetecnicojunior    0

suportetecnicojunior
Postado

Dos dois jeitos funcionou, só que eu percebi que quando há mais de 40 registros para converter ele simplesmente para a impressão na tela... resta saber se isso acontece por causa da conexão com o mysql ou algum limite de api do google maps... <_<

Compartilhar este post

Link para o post
Compartilhar em outros sites

suportetecnicojunior    0

suportetecnicojunior
Postado

Tem como explicar melhor?

 

O que seria "converter ele simplesmente para a impressão na tela"?

 

Então Lucas,

 

A intenção é pegar as coordenadas e converter em endereço de rua, veja a gambiarra que eu fiz, no código fonte da página ta puxando os outros campos como hora e velocidade, porém só imprime na div "add" o primeiro registro de hora e velocidade.

 

<script type="text/javascript">
   var map;
   var geocoder;

   function initialize() {

<?php

 	   // Exibe o resultado da nossa consulta
  while ($rel = mysql_fetch_array($res))
  {
  	echo 'var address ="'.$rel['posicao'].'";';
  	$VarDetalhes = $rel['hora']." | ".$rel['velocidade']."Km/h | "; 	
?>

     map = new GMap(document.getElementById('add'));
     geocoder = new GClientGeocoder();
     geocoder.getLocations(address, addAddressToMap);


   function addAddressToMap(response) {
     map.clearOverlays();
       place = response.Placemark[0];
       point = new GLatLng(place.Point.coordinates[1],
                           place.Point.coordinates[0]);
       marker = new GMarker(point);
       map.addOverlay(marker);

       document.getElementById('add').innerHTML = document.getElementById('add').innerHTML +
       '<p>'+ "<?php echo $VarDetalhes; ?>" + place.address + '</p>';
       }
<?php
}
?>
       }

</script>
</head>

<body onload="initialize()">
<div id="add"></div>

 

Será que existe outra forma de montar essa rotina sem que toda a função fique dentro do while?

Desse jeito eu to escrevendo toda a função para cada registro da base :grin:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Guima    164

Lucas Guima
Postado

Creio que seja porque você colocou a inicialização do seu mapa dentro do while, o mapa deve ser instanciado apenas uma vez. Se não, ele reseta e exibe apenas o último marcador.

 

Creio que sua função também pode sair do laço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

suportetecnicojunior    0

suportetecnicojunior
Postado

Creio que seja porque você colocou a inicialização do seu mapa dentro do while, o mapa deve ser instanciado apenas uma vez. Se não, ele reseta e exibe apenas o último marcador.

 

Creio que sua função também pode sair do laço.

 

Então Lucas,

 

To "engatinhando" nesse lance de API... Da pra dar um exemplo de como gerar o mapa sem mostrá-lo?

Tipo assim, não preciso do mapa mas sei que devo criá-lo para fazer a conversão de coordenada para endereço, preciso apenas do relatório com o endereço das ruas...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Guima    164

Lucas Guima
Postado

Acho que não tem como criar um mapa sem exibí-lo. Mas para codificar um endereço não precisa do mapa.

 

Veja abaixo como faço com a API V3:

 

function codeAddress(address) {
geocodeLatlng = new google.maps.LatLng();
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
	if (status == google.maps.GeocoderStatus.OK) {
		geocodeLatlng = results[0].geometry.location;
		geocodeAddress = results[0].formatted_address;
	} else {
		// Aqui será retornado um erro, conforme Referência
	}
});
}

 

Nessa função eu só precisava do primeiro endereço e sua latitude/longitude. Portanto utilizei apenas a posição 0 (zero) do array results.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rdpacato    2

rdpacato
Postado

Olá amigo.. o que seria esse primeiro endereço (address)?

 

Eu estou precisando passar um ponto (com latitude e latitude) e pegar o endereço completo dele e colocar na infowindow... mas to apanhando demais com isso...

Compartilhar este post

Link para o post
Compartilhar em outros sites

rdpacato    2

rdpacato
Postado

Consegui,

 

coloquei na função click

 

 

 

google.maps.event.addListener(marker, 'click', function() {

endereco(info,this.position);

infowindow.open(map,this);

});


function endereco(info,point){

var geocoder = new google.maps.Geocoder();

geocoder.geocode({'latLng': point}, function(results, status){

if (status == google.maps.GeocoderStatus.OK){

infowindow.setContent('<b>Coordenadas: </b>' + point + '<br><b>Dispositivo:</b> ' + info + '<br><b>Endereço: </b>' + results[0].formatted_address);

} else {


}

});

}

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