Infowindow help on google maps api 3
Having similar problem as others have had on this website where it shows only the last marker's info wi开发者_如何学JAVAndow info in all markers. Can't seem to solve this with any of the solutions given. Also, the last one of my markers doesn't show an info window at all.
<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>
Any help much appreciated!
I have not tested this but it should work - also please have a look at : 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>
We can make use of closures to solve this problem
Use the below code snippet to add info window to 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);
});
}
To see a working sample refer here
If I get this right then please take a look at closures and try to understand them properly.Then javascript magic will happen!
精彩评论