Menu Close

How to add multiple Google maps markers using Google map API


In This tutorial, we are going to show you how you can add multiple markers to a single Google Map. Not just that though, we are also going to show you how to add custom map styles and custom markers to make your map look even better.

I’m just going to go ahead and show the full code we use to do this, then explain what everything does after. So let’s begin…

In our example, we are using the ID google map so your HTML Markup will  look like this: 

<div id="google map"></div> 

In CSS styles we have added are:

#google map {
    position: relative;
    width: 100%;
    height: 350px;
    display: block;

If you want a larger map then just increase the height of the #google map in your CSS code.

For the Google Map to work, we need to get a Google API Key. If you need instructions on this then visit here.

You will need to include the JavaScript between the before the script that runs your JS Google Map API code. 

If you are using WordPress, then you can register and enqueue as follows:

 wp_register_script('google-js', ';key=AIzaSyBYL8d1Bnuy1b0EwX9iOldIuORnSMSJcjE' );

The WordPress code will go in either your theme or child-theme function.php file if you have one set up.

Now for the JS code.

You will need to call the following code after you load the Google API script mentioned above:

/* Google Map - Contact Us */

if ($("#google map").length &gt; 0) {

    function initializeMap() {

        var locations = [
            ['Battersea Park Road', 51.4705666,-0.1728984, 2],
            ['Webbs Road', 51.4575458,-0.165245, 1]

        var google map = new google.maps.Map(document.getElementById('map'), {
            zoom: 14,
            center: new google.maps.LatLng(51.465691,-0.1706737),
            mapTypeId: google.maps.MapTypeId.ROADMAP

        var infowindow = new google.maps.InfoWindow();

        var marker, i;

        var icon = {
            url: "/map-image.png",
            scaledSize: new google.maps.Size(70, 70)

        var marker = new google.maps.Marker({
            map: map,
            animation: google.maps.Animation.DROP,
            icon : icon

        for (i = 0; i &lt; locations.length; i++) {
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][1], locations[i][2]),
                map: map,
                icon : icon

            google.maps.event.addListener(marker, &#039;click&#039;, (function (marker, i) {
                return function () {
          , marker);
            })(marker, i));

        var styles = [
        map.setOptions({styles: styles});            


 we added if ($("#map").length > 0) { so that it will only run the JS code on pages that call the map. If you allow it to run on any page, you will find yourself with some console errors, that’s why we only run the code on pages that contain the map.

Secondly, we created an array of locations here; var locations = [, you can add as many as you like. Here, we include the info window title, the latitude and longitude coordinates which you can obtain from the URL when you click a location on Google Maps, and also the ID of the location, in our case there are only 2.

In our example, we added two markers, so what we did here is set the ‘centre’ point to a location that is in the centre of both of the locations so they show correctly on the map. The lat/long value for the centre can be defined here: center: new google.maps.LatLng(51.465691,-0.1706737),.

We then added a custom marker as were not a huge fan of the ‘basic’ google map markers. You will see on this line; url: "/map-image.png", that we added the path to our custom marker. We also scaled the marker so that it is double the size so it looks awesome on retina ; ) This was defined on the next line here; scaledSize: new google.maps.Size(70, 70).

We then created a for loop which goes through all the locations and adds each of the pointers on the map using the custom icon that we created.

Finally, we decided to change the default styles of the map. It’s always nice to customise this and make it unique. You will see we added var styles = [ and included a long line of code to adjust the map styles. Fear not though, this is very easy to do! Simply head to Snazzy Maps, pick a cool style the matches your website then replace the code with the one provided through their website.

Posted in HTML, JavaScript, Web Technologies

You can also read...