API di Google Maps Indicatori multipli con Infowindows

Sto provando ad aggiungere più marcatori ciascuno con la sua finestra di flusso che appare quando si fa clic su. Sto avendo problemi a ottenere le infowindow in arrivo, quando provo o mostra solo un marcatore senza un infowindow.API di Google Maps Indicatori multipli con Infowindows

Grazie, fatemi sapere se avete bisogno di qualche informazione in più

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<style type="text/css"> 
html { 
    height: 100% 
} 

body { 
    height: 100%; 
    margin: 0; 
    padding: 0 
} 

#map_canvas { 
    height: 100% 
} 
</style> 
<script type="text/javascript" 
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-FxYoVTVq6Is6lD98&sensor=false"> 
</script> 
<script type="text/javascript"> 

var locations = [ 
    ['loan 1', 33.890542, 151.274856, 'address 1'], 
    ['loan 2', 33.923036, 151.259052, 'address 2'], 
    ['loan 3', 34.028249, 151.157507, 'address 3'], 
    ['loan 4', 33.80010128657071, 151.28747820854187, 'address 4'], 
    ['loan 5', 33.950198, 151.259302, 'address 5'] 
]; 

function initialize() { 

    var myOptions = { 
     center: new google.maps.LatLng(33.890542, 151.274856), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 

    }; 
    var map = new google.maps.Map(document.getElementById("default"), 
     myOptions); 

    setMarkers(map, locations) 
} 


function setMarkers(map, locations) { 

    var marker, i 
    for (i = 0; i < locations.length; i++) { 

     var loan = locations[i][0] 
     var lat = locations[i][1] 
     var long = locations[i][2] 
     var add = locations[i][3] 

     latlngset = new google.maps.LatLng(lat, long); 

     var marker = new google.maps.Marker({ 
      map: map, title: loan, position: latlngset 
     }); 
     map.setCenter(marker.getPosition()) 

     var content = "Loan Number: " + loan + '</h3>' + "Address: " + add 

     var infowindow = new google.maps.InfoWindow() 

     google.maps.AddListener(marker, 'click', function (map, marker) { 
      infowindow.setContent(content) 
      infowindow.open(map, marker) 
     }); 
    } 
} 


</script> 
</head> 
<body onload="initialize()"> 
<div id="default" style="width:100%; height:100%"></div> 
</body> 
</html>

fonte

2012-06-19 StackTraceYo

Utilizzare solo ONE infowindow che viene creato prima i marcatori. Quindi il tuo evento click per ciascun marcatore funzionerà correttamente. La variabile 'content' all'interno del listener di eventi non è definita all'interno di quella funzione. – js1568

grazie mille uomo – StackTraceYo

Un blog di dettaglio: http://sforsuresh.in/display-google-map-locations-using-latitude-longitude/ –

163

Si potrebbe utilizzare una chiusura. Basta modificare il codice in questo modo:

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
    return function() { 
     infowindow.setContent(content); 
     infowindow.open(map,marker); 
    }; 
})(marker,content,infowindow));

Ecco la DEMO

fonte

2012-06-19 18:09:23 Engineer

grazie, lo apprezzo davvero – StackTraceYo

Ho capito, ma come dovrei cambiare il codice in modo che quando clicco su un altro segnalino apre una finestra di apertura che sostituisce la finestra in basso precedentemente aperta, invece di aprire continuamente più infowindows ogni volta che clicco su un altro marker? – railsy

+11

demo aggiornata utilizzando alcune soluzioni - http://jsfiddle.net/ZFvDV/ –

-1

function setMarkers(map,locations){ 

for (var i = 0; i < locations.length; i++) 
{ 

var loan = locations[i][0]; 
var lat = locations[i][1]; 
var long = locations[i][2]; 
var add = locations[i][3]; 

latlngset = new google.maps.LatLng(lat, long); 

var marker = new google.maps.Marker({ 
      map: map, title: loan , position: latlngset 
}); 
map.setCenter(marker.getPosition()); 


marker.content = "<h3>Loan Number: " + loan + '</h3>' + "Address: " + add; 


google.maps.events.addListener(marker,'click', function(map,marker){ 
      map.infowindow.setContent(marker.content); 
      map.infowindow.open(map,marker); 

}); 

} 
}

quindi spostare var infowindow = new google.maps.InfoWindow() alla funzione initialize():

function initialize() { 

    var myOptions = { 
     center: new google.maps.LatLng(33.890542, 151.274856), 
     zoom: 8, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 

    }; 
    var map = new google.maps.Map(document.getElementById("default"), 
     myOptions); 
    map.infowindow = new google.maps.InfoWindow(); 

    setMarkers(map,locations) 

    }

fonte

2012-06-19 18:11:33 js1568

'google.maps.events.AddListener' dovrebbe essere' google.maps.event.addListener' –

Ottiene 'TypeError: map .infowindow è undefined' se includo 'var infowindow = new google.maps.InfoWindow();' all'interno della mia funzione initialize() – invot

Ecco il frammento di codice che funzionerà di sicuro . È possibile visitare sotto link per lavorare jsFiddle e spiegare in dettaglio. How to locate multiple addresses on google maps with perfect zoom

var infowindow = new google.maps.InfoWindow(); 
google.maps.event.addListener(marker, 'mouseover', (function(marker) { 
      return function() { 
       var content = address; 
       infowindow.setContent(content); 
       infowindow.open(map, marker); 
      } 
     })(marker));

fonte

2014-03-09 17:28:04 evaipar

Se vuoi anche per legare la chiusura di infowindow a qualche evento, provare qualcosa di simile

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
    return function() { 
     infowindow.setContent(content); 
     infowindow.open(map,marker); 
     windows.push(infowindow) 
     google.maps.event.addListener(map,'click', function(){ 
      infowindow.close(); 
     }); 
    }; 
})(marker,content,infowindow));

fonte

2016-07-18 14:32:53

API di Google Maps Indicatori multipli con Infowindows

risposta

Problemi correlati