Add Custom Markers with the Google Maps JavaScript API

There are a lot of tutorials out there about how to implement a map to your website using Google Maps API but most of them are old and not very well put together. In this article, I will go through how to create a map, adding markers, how to add customize icons for markers, and how to add pop-up overlays.

Before we get started you need to have a Google API key, So to do that we have to go to Google API Console and create a project (This project you create isn't just for Google Maps. It supports a lot of APIs). After creating a project you need to go to Maps JavaScript and enable it. From the credentials tab, you can create an API key.

You can also check apilayer, which is a suite of productivity-boosting Web APIs and cloud-based micro-service applications.

Now everything is set — let's dive in.

Setting the Map

First, create an HTML file and copy the script from Google Maps Documentation

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=**YOUR_API_KEY**&callback=initMap" async defer></script>

Now notice that it has a parameter called callback that's set to an initMap . So it's going to load a function called initMap . What we’ll have to do is put function initMap in our JavaScript file. Inside initMap we have to set a variable called map and set to a new Google Map object.

For development purpose, you can add the map without an API key by adding js?v=3.exp

function initMap() {
   var options = {
      zoom:10,
      center: { lat:40.730610, lng:-73.935242} //Coordinates of New York
   }

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

}

Now if you save it and reload, you won’t see anything on the website. That’s because we haven’t set a height and a width for our map. So you have to add these few lines to your CSS file

#map {
   height: 400px;
   width: 100%;
}

Now we have a map that is centered on New York City.

Adding Custom Markers

To add custom markers you need to create a variable and set it togoogle.maps.Markers() and give the position as an object to put the marker

var marker = new google.maps.Marker({
   position:{lat: 40.6782, lng: -73.9442}, // Brooklyn Coordinates
   map:map //Map that we need to add
   icon:'[https://img.icons8.com/fluent/48/000000/marker-storm.png](https://img.icons8.com/fluent/48/000000/marker-storm.png)',
   // adding custom icons (Here I used a Flash logo marker)
   draggarble: false// If set to true you can drag the marker
});

Let's move on add a pop-up with some information or some content, So for that what we are going to do is go under the marker and create a variable called infomation and set that to google.maps.InfoWindow which going to take in an object with the content we want.

var information = new google.maps.InfoWindow({
   content: '<h4>The marker is at Brooklyn</h4>'
});

This itself isn’t going to do anything, so we need to add an event listener to listen to that information window

marker.addListener('click', function() {
   information.open(map, marker);
});

Now let us see how all the coding that we have gone through up to now looks,

function initMap() {
   var options = {
      zoom:10,
      center: { lat:40.730610, lng:-73.935242} //Coordinates of New York
   }
var map = new google.maps.Map(document.getElementById('map'), options);
var marker = new google.maps.Marker({
   position:{lat: 40.6782, lng: -73.9442}, // Brooklyn Coordinates
   map:map, //Map that we need to add
   icon:'https://img.icons8.com/fluent/48/000000/marker-storm.png',
   // adding custom icons (Here I used a Flash logo marker)
   draggarble: false// If set to true you can drag the marker
});

var information = new google.maps.InfoWindow({
   content: '<h4>The marker is at Brooklyn</h4>'
});

marker.addListener('click', function() {
   information.open(map, marker);
});

That’s how you can add a single marker with a custom icon and information window.

Adding Multiple Markers

When you need to add multiple markers, It efficient to have a function without hardcoding the coordinates. Let’s see how we can do that,

function addMarker(coordinates) {
   var marker = new google.maps.Marker({
      position: coordinates, // Passing the coordinates
      map:map, //Map that we need to add
      draggarble: false// If set to true you can drag the marker
   });
}

addMarker({lat: 40.6782, lng: -73.9442}); // Brooklyn Coordinates
addMarker({lat: 40.7831, lng: -73.9712}); // Manhattan Coordinates

You can change the passing properties and have different custom icons for each marker as well. But when you add custom icons for some markers it is not optimal to left the default marker icons as it is. It is the same for passing the content information for these markers.

function addMarker(prop) {
   var marker = new google.maps.Marker({
      position: prop.coordinates, // Passing the coordinates
      map:map, //Map that we need to add
      draggarble: false// If set to true you can drag the marker
   });

   if(prop.iconImage) { marker.setIcon(prop.iconImage); }

   if(prop.content) {
      var information = new google.maps.InfoWindow({
      content: prop.content
      });

      marker.addListener('click', function() {
      information.open(map, marker);
      });
   }
}

addMarker({
   coordinates:{lat: 40.6782, lng: -73.9442},
   iconImage:'[https://img.icons8.com/fluent/48/000000/marker-storm.png](https://img.icons8.com/fluent/48/000000/marker-storm.png)',
   content:'<h4>Brooklyn Marker</h4>'
});
addMarker({
   coordinates:{lat: 40.7831, lng: -73.9712} // Manhattan Marker
});

Let’s see the result using JSFiddle,

function initMap() {
  var options = {
    zoom: 10,
    center: { lat: 40.73061, lng: -73.935242 }, //Coordinates of New York
  };
  var map = new google.maps.Map(document.getElementById("map"), options);

  function addMarker(prop) {
    var marker = new google.maps.Marker({
      position: prop.coordinates, // Passing the coordinates
      map: map, //Map that we need to add
      draggarble: false, // If set to true you can drag the marker
    });
    if (prop.iconImage) {
      marker.setIcon(prop.iconImage);
    }
    if (prop.content) {
      var information = new google.maps.InfoWindow({
        content: prop.content,
      });

      marker.addListener("click", function () {
        information.open(map, marker);
      });
    }
  }

  addMarker({
    coordinates: { lat: 40.6782, lng: -73.9442 },
    iconImage: "https://img.icons8.com/fluent/48/000000/marker-storm.png",
    content: "<h4>Brooklyn Marker</h4>",
  });
  addMarker({ coordinates: { lat: 40.7831, lng: -73.9712 } }); // Manhattan Coordinates
}

You can further optimize this by adding all the marker properties to an array.

Conclusion

These are some of the things you can do with the Google Maps JavaScript API. That’s it for the article. Thank you and stay safe!

Resources

• Google Map Documentation

• JSFiddle