Placing multiple markers on a Google Map

Posted: September 14, 2012 in Random Posts
Tags: , , , , , , , , , , , , ,

English: Coogee Beach

Scroll down and copy/paste the last script in the head of your page. Add onLoad=”initializeMaps” to you body tag and put an element with id=”map_canvas” in your page. Be sure to give it dimensions and your ready to go! Oh, and don’t forget to include the Google Maps API..

Lets keep it simple. Take the base map script that we also used in our previous tutorials:

function initializeMaps() {
var latlng = new google.maps.LatLng(-33.92, 151.25);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById(“map_canvas”),myOptions);
}

Before we initialize this map you need an array (that’s a list) with locations and titles. That looks like this:

var markers = [
[‘Bondi Beach‘, -33.890542, 151.274856],
[‘Coogee Beach‘, -33.923036, 151.259052],
[‘Cronulla Beach‘, -34.028249, 151.157507],
[‘Manly Beach‘, -33.80010128657071, 151.28747820854187],
[‘Maroubra Beach‘, -33.950198, 151.259302]
];

This code is quite easy. Every line in this array stands for a marker. First value is the title of the marker and the second and last form the locational latitude and longitude.

Now lets add a few lines of code to out base script to loop through these marker list and place those markers on the map:

var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map
});
google.maps.event.addListener(marker, ‘click’, (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}

That’s all. It’s that easy!

The complete copy-and-paste script

var markers = [
[‘Bondi Beach’, -33.890542, 151.274856],
[‘Coogee Beach’, -33.923036, 151.259052],
[‘Cronulla Beach’, -34.028249, 151.157507],
[‘Manly Beach’, -33.80010128657071, 151.28747820854187],
[‘Maroubra Beach’, -33.950198, 151.259302]
];

function initializeMaps() {
var latlng = new google.maps.LatLng(-33.92, 151.25);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById(“map_canvas”),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map
});
google.maps.event.addListener(marker, ‘click’, (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}

Auto-center map around markers

I changed the above script and added a few lines of code to automatically center and zoom the map around the markers. This can easilly be done with the LatLngBounds() function from the Google Maps API (v3):

var bounds = new google.maps.LatLngBounds();
// in the marker-drawing loop:
bounds.extend(pos);
// after the loop:
map.fitBounds(bounds);

If these lines are included in the script, it looks like this:

var markers = [
[‘Bondi Beach’, -33.890542, 151.274856],
[‘Coogee Beach’, -33.923036, 151.259052],
[‘Cronulla Beach’, -34.028249, 151.157507],
[‘Manly Beach’, -33.80010128657071, 151.28747820854187],
[‘Maroubra Beach’, -33.950198, 151.259302]
];

function initializeMaps() {
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById(“map_canvas”),myOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();

for (i = 0; i < markers.length; i++) {
var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(pos);
marker = new google.maps.Marker({
position: pos,
map: map
});
google.maps.event.addListener(marker, ‘click’, (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
}
})(marker, i));
map.fitBounds(bounds);
}

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s