Google Maps API Mehrere Marker mit Infowänden

Ich versuche, mehrere Marker mit jeweils eigenem Infofenster hinzuzufügen, das beim Klicken auf erscheint. Ich habe Probleme damit, die Infofenster zu sehen, wenn ich es versuche, zeigt es nur einen Marker ohne ein Infofenster.Google Maps API Mehrere Marker mit Infowänden

Danke, lassen Sie mich wissen, wenn Sie weitere Informationen

<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>

Quelle

2012-06-19 StackTraceYo

Nur ONE Infofenster, die vor den Markern erstellt wird. Dann funktioniert Ihr Klickereignis für jeden Marker korrekt. Die Variable "content" in Ihrem Ereignis-Listener ist nicht in dieser Funktion definiert. – js1568

danke viel Mann – StackTraceYo

Ein Detail-Blog: http://sforsuresh.in/display-google-map-locations-using-latitude-longitude/ –

163

brauchen Sie einen Verschluss verwenden. Nur der Code wie folgt ändern:

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

Hier ist die DEMO

Quelle

2012-06-19 18:09:23 Engineer

danke, ich schätze es wirklich – StackTraceYo

Ich habe das funktioniert aber wie würde ich den Code ändern, so dass wenn ich auf klicke ein weiterer Marker öffnet ein Infowindow, das das zuvor geöffnete Infowindow ersetzt, anstatt jedes Mal, wenn ich auf einen anderen Marker klicke, immer mehr Infowände zu öffnen? – railsy

+11

aktualisiert Demo mit ein paar Lösungen - 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); 

}); 

} 
}

Dann var infowindow = new google.maps.InfoWindow() zum initialize() Funktion bewegen:

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) 

    }

Quelle

2012-06-19 18:11:33 js1568

'google.maps.events.AddListener' sollte' google.maps.event.addListener' sein –

Ich bekomme 'TypeError: map .infowindow ist undefiniert, wenn ich 'var infowindow = new google.maps.InfoWindow();' innerhalb meiner initialize() -Funktion einschließe – invot

Hier ist der Code-Schnipsel, die sicher funktioniert . Sie können unter link für die Arbeit jsFiddle und Erklärung im Detail besuchen. 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));

Quelle

2014-03-09 17:28:04 evaipar

Wenn Sie auch Schließung von Infofenster auf ein Ereignis binden wollen, versuchen Sie so etwas wie dieses

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));

Quelle

2016-07-18 14:32:53

Google Maps API Mehrere Marker mit Infowänden

Antwort

Verwandte Themen