Google Map with Multiple Markers

In this tutorial we are going to create a google map with multiple markers. Take a look at the demo and we will dive straight in. Note that this is using V3 of Googlmaps javascript api.

Demo Map

 

The first thing we need to do is include the googlemap api in your web page.

Why sensor=false? This is set to true if we’re using some sort of location sensor device like a gps or a we’re using the W3C Geolocation API in a browser that supports it. In this case we don’t need Geolocation so sensor is set to false.

Of course we need to define an area on the page where the map is to be displayed. We will use a div called map_canvas that measures 500×800 pixels.

Now we need a the function to initialize the map. So here’s the code, we’ll go through it step by step

function initialize() {
        var myOptions = {
            center: new google.maps.LatLng(51.529198,-0.15451),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

        var myPoints = [
            ["The London Library", "The London Library is the world's largest independent lending library, and one of the UK's leading literary institutions.", "51.507354", "-0.136607"],
            ["Covent Garden", "A former fruit and vegetable market in the central square, now a popular shopping and tourist site", "51.511954", "-0.122793"],
            ["The British Library", " The national library of the United Kingdom.", "51.528891", "-0.127476"],
            ["Swiss Cottage Library", "The Swiss Cottage Central Library is the central library of  the London Borough of Camden, and is housed in an architectural landmark building designed by Sir Basil Spence.", "51.542111", "-0.173026"],
            ["Regent's Park Library", "This library has recently been closed due to savage cuts in the council's budget.", "51.528444","-0.143131"]
        ];       

        function setMarkers() {            

                var lat = myPoints[i][2];
                var lng = myPoints[i][3];
                var latlngset;
                latlngset = new google.maps.LatLng(lat, lng);
                var marker = new google.maps.Marker({
                    map: map,
                    icon: 'pin.png',
                    position: latlngset
                });
                return marker;

        }
        // Set all markers in the myPoints variable

        for (i = 0; i <= myPoints.length - 1; i++) {                
            setMarkers();
        }

    }

Map Options

First we create an object to hold the map properties.

var myOptions = {
            center: new google.maps.LatLng(51.529198,-0.15451),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

center

The initial Map center

zoom

The initial Map zoom level.

mapTypeId

The initial Map mapTypeId; Options include(HYBRID, ROADMAP, SATELLITE, TERRAIN)

Then comes a function to create a map object.

var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

At this point if initialize() is called a map centered at LatLng(51.529198, -0.15451) will be displayed in the map_canvas div. Now all we need to do is add some markers.

Let’s create an array with the data needed for each marker. What we really need is the cordinates for each marker, but I’m going to include some extra information that I may need to use at some point in the future.

var myPoints = [
            ["The London Library", "The London Library is the world's largest independent lending library, and one of the UK's leading literary institutions.", "51.507354", "-0.136607"],
            ["Covent Garden", "A former fruit and vegetable market in the central square, now a popular shopping and tourist site", "51.511954", "-0.122793"],
            ["The British Library", " The national library of the United Kingdom.", "51.528891", "-0.127476"],
            ["Swiss Cottage Library", "The Swiss Cottage Central Library is the central library of  the London Borough of Camden, and is housed in an architectural landmark building designed by Sir Basil Spence.", "51.542111", "-0.173026"],
            ["Regent's Park Library", "This library has recently been closed due to savage cuts in the council's budget.", "51.528444","-0.143131"]
        ];

We can now write a function to add a marker…

function setMarkers() {            

                var lat = myPoints[i][2];
                var lng = myPoints[i][3];
                var latlngset = new google.maps.LatLng(lat, lng);
                var marker = new google.maps.Marker({
                    map: map,
                    icon: 'pin.png',
                    position: latlngset
                });
                return marker;                         
        }

Here again the important bit is the position of the markers and the map that we are targeting. So we take the latitude and longtude from each object in myPoints to use as a new google.maps.LatLng class. Notice I used a custom icon, if this is left out then the default google marker icon will be used.

Here is a list of Google map marker options

The function creates a single marker, therefore we need to go through over the myPoints array and set a marker for each object.

for (i = 0; i <= myPoints.length - 1; i++) {                
            setMarkers();
          }

Once that’s done, we can call the initialize() function however we deem, in this case we will use:
google.maps.event.addDomListener(window, 'load', initialize);

In future posts we will look at:

Adding infowindow to google map markers

Customizing infowindows