Múltiplos markers com infowindows em cada

[psycomtb 0]

Bom dia galera,

preciso colocar um INFOWINDOW em cadar marker feito no meu mapa através do Google Maps API v2, porém só esta ficando em um marker.

 

Gostaria de saber se alguem pode me ajudar a solucionar isto, segue o código:

 

<script type="text/javascript">
/*
variáves globais / globals vars
*/
var geocoder = new GClientGeocoder();
var map;
var directionsPanel;
var directions;
var gdir = new GDirections();
var addr = new Array(3);
var distances = new Array(3);

// Ao carregar
window.onload = function() {

// Seta o país que será usado na API 
geocoder.setBaseCountryCode("pt_BR");

map = new GMap2(document.getElementById('map'), { size: new GSize(1024,762) })
map.addControl(new GLargeMapControl());
       map.setCenter(new GLatLng(-23.29273,-51.173207), 12); // londrina lat,long, zomm

// londrina
showAddress("86045-050", 1);
       showAddress("86046-280", 2);
showAddress("86045-050", 3);
showAddress("86044-200", 4);
showAddress("86049-220", 5);
showAddress("86046-220", 6);        
// curitiba
       showAddress("81170-150", 7);        
showAddress("82020-720", 8);        

// Sao Paulo
       showAddress("14801-970", 9);  // araraquara      
showAddress("04542-050", 10); // sao paulo       

}

/*
função que será usada para manipular endereços
function that will be used to manipulate addresses
*/
function showAddress(address, k) {geocoder.getLocations(address,
	function(point) {addMarker(point, k) }
);
}

/*
função que será usada para marcar o mapa	
*/

function addMarker(response, k) {
if(!response.Placemark) { return; }
place = response.Placemark[0];
if(k) {
	// salva a latitude/longitude do endereço / save the latitute/longitude of address
	addr[k-1] = place.Point.coordinates;
}
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
var marker = createMarker(point,place.address,place.address, k,'','label'); // cria o marcador no mapa
map.addOverlay(marker); // adiciona o marcador no mapa

/*

função que será usada para criar os marcadores
function that will be used for creating markers
*/

/*
function createMarker(point,html, k) {
var marker = new GMarker(point, false);
       map.openInfoWindow(point,
                          document.createTextNode("Hello, world"));

       return marker;
}
*/

function createMarker(point,html, k) {
var marker = new GMarker(point, false);
       map.openInfoWindow(point,
                          document.createTextNode("teste"));

       return marker;
}

</script>

 

Grato desde já.

[Lucas Guima 164]

Você começou a desenvolver agora? Se sim, sugiro que utilize a v3. Caso contrário, também.

 

Eu e o Google:

 

Note: The Google Maps Javascript API Version 3 is now the official Javascript API. Version 2 of this API has been officially deprecated as per our deprecation policy. We encourage you to migrate your code to this newly updated and enhanced version!

[psycomtb 0]

Lucas Guima, comecei a pesquisar sobre isto semana passada, vi mesmo que a v2 havia sido descontinuada, mas não tem uma forma de fazer isto neste código ou versão não da suporte para isso?

 

Grato.

[Lucas Guima 164]

Não sei, nunca mexi com essa versão. Mas a v3, sim, é possível.

[Mayron Cachina 1]

Com a versão 3 você pode fazer assim utilizando o Jquery-UI-Maps (plugin do jquery para uso de Google Maps)

 

Esse exemplo, é utilizando php + mysql:

 

while ($row = $con->fetchAll($lista)){

extract($row);
echo "$('#map_canvas').gmap('addMarker', { id:'$i', 'position': '$lat,$lon' } ).click(function() {\r\n";
echo "	$('#map_canvas').gmap('openInfoWindow', { 'content': 'MARIA' }, this);\r\n";
echo "});\r\n";
echo "\n";
 $i++;
}?>

[psycomtb 0]

Obrigado pelas dicas em relação a versão e etc. Pesquisei um pouco mais e agora estou na versão 3 e o projeto está quase como quero, só falta uma coisa:

 

Gostaria de marcar os pontos através do endereço completo ao invés de latitude e longitude.

 

O codigo que tenho agora é esse:

<script type="text/javascript">

   var locations = [
     ['Avenida Maringa, Londrina', -23.311577,-51.177859, 4], /* AVENINDA MARINGA */
     ['Avenida JK, Londrina', -23.318218,-51.170607, 5], /* AVENIDA JK */
     ['Avenida Bandeirantes', -23.326553,-51.159964, 3] /* AVENIDA BANDEIRANTES */
   ];

   var map = new google.maps.Map(document.getElementById('map'), {
     zoom: 8,
     center: new google.maps.LatLng(-23.365108, -51.176254), /* LONDRINA */
     mapTypeId: google.maps.MapTypeId.ROADMAP
   });

   var infowindow = new google.maps.InfoWindow();

   var marker, i;

   for (i = 0; i < locations.length; i++) {  
     marker = new google.maps.Marker({
       position: new google.maps.LatLng(locations[i][1], locations[i][2]),
       map: map
     });

     google.maps.event.addListener(marker, 'click', (function(marker, i) {
       return function() {
         infowindow.setContent(locations[i][0]);
         infowindow.open(map, marker);
       }
     })(marker, i));
   }
 </script>

 

No caso gostaria que os pontos fossem marcados +/- assim:

var locations = [
     ['Avenida Maringa, Londrina', Avenida Maringa, 500 - 86060-000 - Londrina - Paraná, 4] /* AVENINDA MARINGA */
   ];

 

Alguém pode dar uma luz de como fazer isso?

Grato.

 

ps: não entendo muito de js hehehe

[Mayron Cachina 1]

Da uma olhadinha nesse link https://google-developers.appspot.com/maps/documentation/javascript/examples/geocoding-simple?hl=pt-BR

 

É isso que você quer fazer?

 

Segue o codigo html

 

 

<!DOCTYPE html>
<html>
 <head>
   <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
   <meta charset="utf-8">
   <title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
   <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
   <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
   <script>
     var geocoder;
     var map;
     function initialize() {
       geocoder = new google.maps.Geocoder();
       var latlng = new google.maps.LatLng(-34.397, 150.644);
       var mapOptions = {
         zoom: 8,
         center: latlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
       }
       map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
     }

     function codeAddress() {
       var address = document.getElementById('address').value;
       geocoder.geocode( { 'address': address}, function(results, status) {
         if (status == google.maps.GeocoderStatus.OK) {
           map.setCenter(results[0].geometry.location);
           var marker = new google.maps.Marker({
               map: map,
               position: results[0].geometry.location
           });
         } else {
           alert('Geocode was not successful for the following reason: ' + status);
         }
       });
     }
   </script>
 </head>
 <body onload="initialize()">
   <div>
     <input id="address" type="textbox" value="Sydney, NSW">
     <input type="button" value="Geocode" onclick="codeAddress()">
   </div>
   <div id="map_canvas" style="height:90%;top:30px"></div>
 </body>
</html>

[psycomtb 0]

E ai Mayron, beleza?

o que pretendo é exatamente o que postei no meu exemplo, vou gerar os mapas através de um software que vai inserir os pontos, diretamente no código de acordo com uma base de endereços existente, porém eu gostaria de criar esses pontos colocando o endereço e não a latitude e longitude, porém não sei bem como fazer isso em cima deste projeto que consegui fazer até então.

[Lucas Guima 164]

Todo marcador é criado com base em Lat/Lng.

 

No seu caso, o que você precisa fazer é geocodificar o endereço, ou seja, transformá-lo em Lat/Lng. E é esse o conteúdo do link do Mayron.