End of Day – Monday March 27th

by julesmcdee

BOOM! PROBLEM SOLVED!

I posted earlier today regarding the problem I was having with getting multiple markers on my map. I figured it out anyway, which has left me in a very good mood!

I had been following the tutorials in the ‘Beginning Google Maps API’ book, but came up against a problem with the array and for loopI just couldnt get the the markers to display on my map, so I moved onto to looking at some other tutorials. I came across this tutorial here http://www.dreamdealer.nl/tutorials/placing_multiple_markers_on_a_google_map.html. In my original code, I used an array literal: 

var myArray = [ ];

I then entered the values using the push method:

myArray.push();

But the markers were not showing on my map

I then tried the code below which shows the Lat Lng values directly entered into the array and it worked.

I also added onload = ‘initializeMaps()’ to the <body> tag in my HTML file.

 

var locations = [

[‘The GPO’, 53.349331, -6.260724],
[‘Liberty Hall’, 53.348393, -6.25541],
[‘Bolands Mill’, 53.342159, -6.237267],
[‘South Dublin Union’, 53.340512, -6.29486],
[‘Jacobs Factory’, 53.338543, -6.268795],
[‘City Hall’, 53.343881, -6.267195],
[‘St.Stephens Green’, 53.339767, -6.260504],
[‘The Four Courts’, 53.346888,-6.273365],
[‘Mount Street Bridge’, 53.337727,-6.240657],
[‘North King Street’, 53.349908, -6.276175],
[‘Moore Street’, 53.350484, -6.262641],
[‘Kilmainham Gaol’, 53.34202, -6.309628]

];

 

function initializeMaps() {
var latlng = new google.maps.LatLng(53.346888,-6.273365);
var mapOptions = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
disableDefaultUI: true
};

var map = new google.maps.Map(document.getElementById(“googleMap”), mapOptions);

var infowindow = new google.maps.InfoWindow(), marker, i;

for (i = 0; i < locations.length; i++) {

marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});

google.maps.event.addListener(marker, ‘click’, (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}

 

 

 

Screen Shot 2013-03-25 at 20.47.28

 

Screen Shot 2013-03-25 at 20.47.43

 

Advertisements