Infofenster Hilfe auf Google Maps api 3
-
09-10-2019 - |
Frage
Mit ähnlichem Problem wie andere auf dieser Website gehabt haben, wo es zeigt nur der Info-Info-Fenster des letzten Markers in allen Markern. Kann nicht scheinen, dies mit einem der gegebenen Lösungen zu lösen. Auch die letzten meines Markers nicht ein Info-Fenster überhaupt zeigen.
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="data2.json"></script>
<script type="text/javascript" src="js/markerclusterer.js"></script>
<script type="text/javascript">
google.load('maps', '3', {
other_params: 'sensor=false'
});
google.setOnLoadCallback(initialize);
function initialize() {
var center = new google.maps.LatLng(55.4419, -4.1419);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0, dataPhoto; dataPhoto = data.markers[i]; i++) {
var latLng = new google.maps.LatLng(dataPhoto.latitude,dataPhoto.longitude);
var theTitle = dataPhoto.address;
var contentString = '<div align="left"><img src="logo.gif" alt="" width="242" height="71" /><br /><br /><p style="color:#000000;">' + data.markers[i].address + '<br />' + dataPhoto.telephone + '</p></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
});
var thisIcon = 'markers/image.png';
for (var i = 0, marker; marker = markers[i]; i++) {google.maps.event.addListener(marker, 'click', function() {infowindow.open(map,this);});
}
var marker = new google.maps.Marker({
position: latLng,
clickable: true,
title: theTitle,
icon: thisIcon,
});
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
</script>
Jede Hilfe sehr geschätzt!
Lösung
Ich habe nicht getestet, aber es sollte funktionieren - auch haben bitte einen Blick auf: http://code.google.com/apis/maps/documentation/javascript/events.html#EventClosures
<script src="http://www.google.com/jsapi">
</script>
<script type="text/javascript" src="data2.json">
</script>
<script type="text/javascript" src="js/markerclusterer.js">
</script>
<script type="text/javascript">
google.load('maps', '3', {
other_params: 'sensor=false'
});
google.setOnLoadCallback(initialize);
function initialize(){
var center = new google.maps.LatLng(55.4419, -4.1419);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
for (var i = 0, dataPhoto; dataPhoto = data.markers[i]; i++) {
var latLng = new google.maps.LatLng(dataPhoto.latitude, dataPhoto.longitude);
var theTitle = dataPhoto.address;
var contentString = '<div align="left"><img src="logo.gif" alt="" width="242" height="71" /><br /><br /><p style="color:#000000;">' + data.markers[i].address + '<br />' + dataPhoto.telephone + '</p></div>';
var thisIcon = 'markers/image.png';
var marker = new google.maps.Marker({
position: latLng,
clickable: true,
title: theTitle,
icon: thisIcon,
});
attachIWindow(contentString, marker);
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);
}
function attachIWindow(content, marker){
var infowindow = new google.maps.InfoWindow({
content: content,
});
google.maps.event.addListener(marker, 'click', function(){
infowindow.open(map, marker);
});
}
</script>
Andere Tipps
Wir können den Einsatz von machen Schließungen , um dieses Problem zu lösen
Verwenden Sie den folgenden Code-Snippet hinzuzufügen Info-Fenster Marker
function AddInfoWidnow(marker,message)
{
var infowindow = new google.maps.InfoWindow({ content: message });
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(marker.get('map'), marker);
});
}
Um zu sehen, ein funktionstüchtiges Beispiel verweist hier
Wenn ich das richtig machen, dann bitte einen Blick auf Verschlüsse nehmen und versuchen, sie zu verstehen properly.Then Javascript Magie passieren wird!