Ich versuche, mehrere Marker mit jeweils einem eigenen Infofenster hinzuzufügen, das beim Klicken angezeigt wird. Ich habe Probleme damit, dass die Infofenster angezeigt werden. Wenn ich es versuche, wird entweder nur ein Marker ohne Infofenster angezeigt.
Vielen Dank, lassen Sie mich wissen, wenn Sie weitere Informationen benötigen
<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>
content
in Ihrem Ereignis-Listener ist in dieser Funktion nicht definiert.Antworten:
Sie könnten einen Verschluss verwenden. Ändern Sie einfach Ihren Code wie folgt:
Hier ist die DEMO
quelle
infowindow.close()
arbeite nichtHier ist das Code-Snippet, das sicher funktionieren wird. Sie können den folgenden Link für die Arbeit mit jsFiddle und die ausführliche Erklärung besuchen . So finden Sie mehrere Adressen auf Google Maps mit perfektem Zoom
quelle
Quelle Link -
Demo Link
Der folgende Code zeigt mehrere Marker mit InfoWindow . Sie können Kommentar- Code Info auf zeigen , Hover auch
quelle
Wenn Sie das Schließen des Infofensters auch an ein Ereignis binden möchten, versuchen Sie Folgendes
quelle
Gehen Sie dann
var infowindow = new google.maps.InfoWindow()
zurinitialize()
Funktion:quelle
google.maps.events.AddListener
sollte seingoogle.maps.event.addListener
TypeError: map.infowindow is undefined
wenn ichvar infowindow = new google.maps.InfoWindow();
in meine initialize () -Funktion