In a recent article, I noted one way to get Google Maps integrated with your website. Now that you are inserting maps all over the place, I'm sure you must be wondering - but what if I want to mark several places on the map? Read on!

First things first, include the API...

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

Next, we set up the javascript to make the magic happen:

<script type="text/javascript">

    //initialise the infowindow so it's ready for use
    var infowindow = null;

    //function to actually initialise the map
    function initialize() 
    {
        //set your latitude and longitude as per the previous article, specify the default 
        //zoom and set the default map type to RoadMap
        var latlng = new google.maps.LatLng(-32.8333, 115.917);
        var myOptions = {
            zoom: 1,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        //place the map on the canvas
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        
        //Set all your markers, the magic happens in another function - setMarkers(map, markers) which gets called
        setMarkers(map, items);
        infowindow = new google.maps.InfoWindow({
        content: "holding..."
        });
    }
  
    //build an array of your markers here
    //title shows on hover so no html in there
    //obviously replace the latitude and longitudes with the appropriate numbers
    //z-index is the stacking order of the markers - which do you want on top... generally incrementing this by 1 each time will be fine
    //infowindow content can have html in it, so go crazy with what you want the box to say when the marker is clicked
    var items = [
        ['title 1 to display on hover', latitude 1, longitude 1, z-index 1, 'infowindow 1 content'],
        ['title 2 to display on hover', latitude 2, longitude 2, z-index 2, 'infowindow 2 content'],
        ['title 3 to display on hover', latitude 3, longitude 3, z-index 3, 'infowindow 3 content']
    ];
    
    //function to actually put the markers on the map
    function setMarkers(map, markers) 
    {
        //loop through and place markers
        for (var i = 0; i < markers.length; i++) 
        {
            var sites = markers[i];
            var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                title: sites[0],
                zIndex: sites[3],
                html: sites[4]
            });

            //initial content string
            var contentString = "Some content";

            //attach infowindow on click
            google.maps.event.addListener(marker, "click", function () 
            {
                infowindow.setContent(this.html);
                infowindow.open(map, this);
            });
        }
    }
  
</script>

And finally, we set the canvas for the map to  be applied to, and initialise it:

<div id="map_canvas"></div>
<script type="text/javascript">initialize();</script>

And hey presto, you have multiple markers!

• Back to Blog
• Share on Twitter
• Share on Facebook