I have the classic scenario of wanting multiple markers with different
info windows held in an array.
I was having a problem with closures (like this guy
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/30b3f94096ae3e6b#),
so I found examples and read up and tried to fix it. Every time I set
up the add listener event in a different function, the map stopped
loading completely
My code follows, the section between /*--*/'s is the new bit that
breaks it, and the // commented bits are what I had before that didn't
work as I wanted, but let the map load at least. I've tried copying
other peoples code, writing it myself, and every time I have the same
problem. Any mistakes standing out?
Thanks in advance, I'll appreciate any help :)
<script type="text/javascript">
google.load("maps", "3", {other_params:"sensor=false"});
function initialize() {
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(54.6738, -4.2188),
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new
google.maps.Map(document.getElementById("map_canvas"), myOptions);
var infoWindow = new google.maps.InfoWindow();
setMarkers(map, projects);
}
/*--*/
var image = new google.maps.MarkerImage('images/icons/flag.png',
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(4, 30));
var shadow = new google.maps.MarkerImage('images/icons/shadow.png',
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
function createMarker(map, latlng, title, zIndex, content) {
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shadow: shadow,
title: title,
zIndex: zIndex
});
// var infowindow = new google.maps.InfoWindow({
// content: '<p style="color:black; align:center;"><b>'+label
+'</b><br/>'+content+'</p>'
// });
new google.maps.event.addListener(marker, 'click', function() {
var stringy = '<p style="color:black; align:center;"><b>'+label
+'</b><br/>'+content+'</p>';
infowindow.setContent(stringy);
infowindow.open(map, marker);
});
}
/*--*/
var projects = [
['London', 51.5002, -0.1262, 4, 'test 1'],
['Bristol', 51.4553, -2.5919, 3, 'test 2'],
['Norwich', 52.6281, 1.2993, 2, 'test 3'],
['Edinburgh', 55.9502, -3.1875, 1, 'test 4'],
];
function setMarkers(map, locations) {
// var image = new google.maps.MarkerImage('images/icons/flag.png',
// new google.maps.Size(20, 32),
// new google.maps.Point(0,0),
// new google.maps.Point(4, 30));
for (var i = 0; i < locations.length; i++) {
var project = locations[i];
var myLatLng = new google.maps.LatLng(project[1], project[2]);
var marker = createMarker(map, myLatLng, project[0], project[3],
project[4]);
// var marker = new google.maps.Marker({
// position: myLatLng,
// map: map,
// icon: image,
// title: project[0],
// zIndex: project[3]
// });
// var infowindow = new google.maps.InfoWindow({
// content: '<p style="color:black;">'+project[4]+'</p><br />'
// });
// new google.maps.event.addListener(marker, 'click', function() {
// infowindow.open(map,marker);
// });
}
}
google.setOnLoadCallback(initialize);
</script>
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
