Integrating Google Maps API for Multiple Locations

Mmmmm that mint mojito iced coffee

The requirements:

1. Embed a Google Map in the “Locations” section of a website.
2. Map should display multiple locations in the form of markers.
3. Each marker should be able to display the address and a link to get directions.

Google Maps API

My previous interactions with the Google Maps API were straightforward; add some code directly into the HTML and end up with a working map. However, the process was going to be a bit more complex to get multiple markers as well as mimicking some functionality of Google Maps itself to get directions. Google Maps APIs are grouped by platform (Android, iOS, Web, and Web Service) and the Developer tools have a handy resource to help you decide which API will work best for you. I opted to use the Google Maps JavaScript API.

First, create a new project to get an API key. Once you have the API key, you can begin working on your map. The Google Maps documentation is pretty robust, so the following is just walking through what I did. The example implementation to create a map with a marker places all of the code in a single file, but I divided the code into existing separate files for HTML, CSS, and JS.

index.html

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

The map will sit in a div with the id map. The first script tag references the external JS file that contains the initMap function, which creates and adds the map to the web page when the page loads. The second script tag loads the API from the URL which contains your API key. The callback parameter calls the initMap function after the API loads.

index.js

function initMap() {
  var center = {lat: 41.8781, lng: -87.6298};
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    center: center
  });
  var marker = new google.maps.Marker({
    position: center,
    map: map
  });
}

The initMap function (provided by Google documentation) sets a few variables:

• center represents a location object with a location’s latitude and longitude coordinates
• map creates a new Google Maps map by replacing the HTML element with an id map with the properties zoom (specifies the zoom level for the map with 0 as the lowest that displays the entire earth) andcenter (initial map center set to a location). Other available properties are listed here.
• marker creates a new marker with properties position (location of the marker) and map (on which map to display the marker).

index.css

#map {
  height: 400px;
  width: 100%;
  background-color: grey;
}

Here, I’m styling the #map div with a set height and background color to display before the map loads.

The above code worked perfectly for one marker on a map, but not so much for multiple markers on one map. The internet saves the day again and I ended up at this Stack Overflow post with several robust answers on how to implement multiple markers in an embedded Google Maps. It primarily involves creating an array of locations, each with its respective location properties, then looping through the array and creating markers for each.

var locations = [
    ['Los Angeles', 34.052235, -118.243683],
    ['Santa Monica', 34.024212, -118.496475],
    ['Redondo Beach', 33.849182, -118.388405],
    ['Newport Beach', 33.628342, -117.927933],
    ['Long Beach', 33.770050, -118.193739]
  ];
...
var infowindow =  new google.maps.InfoWindow({});
var marker, count;
for (count = 0; count < locations.length; count++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[count][1], locations[count][2]),
      map: map,
      title: locations[count][0]
    });
google.maps.event.addListener(marker, 'click', (function (marker, count) {
      return function () {
        infowindow.setContent(locations[count][0]);
        infowindow.open(map, marker);
      }
    })(marker, count));
  }

I created a locations array where each location has the following array of properties: name, latitude, and longitude, a infowindow variable as a new Google Maps Info Window to display a marker’s information, and variables marker and count. Then we go through a loop: for each item in the locations array, create a new marker and set the marker’s position and name equal to the properties of that location object. The listener event runs when a marker is clicked; it will set the content of the info marker to be the name of the location and open up the info window. These functions come with the Google Maps API.

Great! I have a working map with five markers and info windows that pop up with content when the marker is clicked. Now it’s time to modify the content of the info window since I want users to be able to click on a link to get directions to the marker from an origin address. Let’s modify the location markers to point to specific addresses: five of the Philz Coffee locations in SoCal.

var locations = [
    ['Philz Coffee<br>\
    801 S Hope St A, Los Angeles, CA 90017<br>\
   <a href="https://goo.gl/maps/L8ETMBt7cRA2">Get Directions</a>', 34.046438, -118.259653],
    ['Philz Coffee<br>\
    525 Santa Monica Blvd, Santa Monica, CA 90401<br>\
   <a href="https://goo.gl/maps/PY1abQhuW9C2">Get Directions</a>', 34.017951, -118.493567],
    ['Philz Coffee<br>\
    146 South Lake Avenue #106, At Shoppers Lane, Pasadena, CA 91101<br>\
    <a href="https://goo.gl/maps/eUmyNuMyYNN2">Get Directions</a>', 34.143073, -118.132040],
    ['Philz Coffee<br>\
    21016 Pacific Coast Hwy, Huntington Beach, CA 92648<br>\
    <a href="https://goo.gl/maps/Cp2TZoeGCXw">Get Directions</a>', 33.655199, -117.998640],
    ['Philz Coffee<br>\
    252 S Brand Blvd, Glendale, CA 91204<br>\
   <a href="https://goo.gl/maps/WDr2ef3ccVz">Get Directions</a>', 34.142823, -118.254569]
  ];

I’ve modified the name/title property of each location to now include the name (Philz Coffee), the address, and a link tag “Get Directions” pointing to the short URL (handy because the long URL is, well, really long) of the location. To get a short URL, click on the location > Share > Share link and check the “Short URL” box.

And voila! Now when user clicks on a map marker, the info window pops up with the name, address, and a link to the location on the actual Google Maps as ‘Get Directions’.

Time for a coffee break

To recap: add a div for the map and two required script tags in the HTML file, write some CSS for the map div to style the map how you want, and add in the following JavaScript to create a map, map locations and markers, and marker info windows.

function initMap() {
  var center = {lat: 34.052235, lng: -118.243683};
  var locations = [
    ['Philz Coffee<br>\
    801 S Hope St A, Los Angeles, CA 90017<br>\
   <a href="https://goo.gl/maps/L8ETMBt7cRA2">Get Directions</a>',   34.046438, -118.259653],
    ['Philz Coffee<br>\
    525 Santa Monica Blvd, Santa Monica, CA 90401<br>\
   <a href="https://goo.gl/maps/PY1abQhuW9C2">Get Directions</a>', 34.017951, -118.493567],
    ['Philz Coffee<br>\
    146 South Lake Avenue #106, At Shoppers Lane, Pasadena, CA 91101<br>\
    <a href="https://goo.gl/maps/eUmyNuMyYNN2">Get Directions</a>', 34.143073, -118.132040],
    ['Philz Coffee<br>\
    21016 Pacific Coast Hwy, Huntington Beach, CA 92648<br>\
    <a href="https://goo.gl/maps/Cp2TZoeGCXw">Get Directions</a>', 33.655199, -117.998640],
    ['Philz Coffee<br>\
    252 S Brand Blvd, Glendale, CA 91204<br>\
   <a href="https://goo.gl/maps/WDr2ef3ccVz">Get Directions</a>', 34.142823, -118.254569]
  ];
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    center: center
  });
var infowindow =  new google.maps.InfoWindow({});
var marker, count;
for (count = 0; count < locations.length; count++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[count][1], locations[count][2]),
      map: map,
      title: locations[count][0]
    });
google.maps.event.addListener(marker, 'click', (function (marker, count) {
      return function () {
        infowindow.setContent(locations[count][0]);
        infowindow.open(map, marker);
      }
    })(marker, count));
  }
}

Resources:

Google Maps Javascript API Reference