JavaScript - - By Michael Wanyoike

Example Google Maps JSON File

Google Maps is an online mapping service launched in 2005 by Google. It offers several services which include route planning, satellite imagery, real-time traffic updates and many others. Personally, I use it often to find directions to meeting locations.


July 27th, 2017: This article series was rewritten with up-to-date information and fresh examples.


In the mobile phone sector, Google Maps has become one of the most popular smartphone apps and was named number one in 2013 according to a survey conducted by GlobalWebIndex. It also has an API that allows developers embed it on their websites.

In this example, I’ll show you how to set up multiple markers on a Google Map. We can use the following JSON format to supply marker information to Google Maps via its API. This data can be stored in a file that can be accessed remotely, or stored in a database which can be retrieved via a local API service.

Markers JSON Data:

{
  "markers": [
    {
      "name": "Rixos The Palm Dubai",
      "position": [25.1212, 55.1535],
    },
    {
      "name": "Shangri-La Hotel",
      "location": [25.2084, 55.2719]
    },
    {
      "name": "Grand Hyatt",
      "location": [25.2285, 55.3273]
    }
  ]
}

If you are implementing a long-term solution, you will need an API key. Once you have that, you can use it in your code like this:

API Key usage:

<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=loadMap">
</script>

For this example, we’ll get away with accessing Google Maps API without a key. Expect to get a warning (in the console) about this. For simplicity sake, I’ll show you the entire working code in a single HTML file.

HTML + JavaScript:

<!DOCTYPE html>
<html>
  <head>
   <title>Dubai Hotels</title>
  </head>

  <body onload = "loadMap()">
    <h2>Dubai Hotels</h2>
    <div id = "map" style = "width:640px; height:480px;"></div>
      <script>

        // fake JSON call
        function getJSONMarkers() {
          const markers = [
            {
              name:  "Rixos The Palm",
              location: [25.1212, 55.1535]
            },
            {
              name: "Shangri-La Hotel",
              location: [25.2084, 55.2719]
            },
            {
              name: "Grand Hyatt",
              location: [25.2285, 55.3273]
            }
          ];
          return markers;
        }

        function loadMap() {
          // Initialize Google Maps
          const mapOptions = {
            center:new google.maps.LatLng(25.2048, 55.2708),
            zoom: 11
          }
          const map = new google.maps.Map(document.getElementById("map"), mapOptions);

          // Load JSON Data
          const hotelMarkers = getJSONMarkers();

          // Initialize Google Markers
          for(hotel of hotelMarkers) {
            let marker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(hotel.location[0], hotel.location[1]),
              title: hotel.name
            })
          }
        }
      </script>
      <script src = "https://maps.googleapis.com/maps/api/js"></script>
  </body>
</html>

To learn more about the Google Map classes that have been used here, you can check out the reference manuals for the following:

If you dig in the documentation a little bit, you can learn how to add animations and custom icons to you Google Map markers. To learn more, check out the tutorials Working with Geolocation & Google Maps API and Google Maps Made Easy with GMaps.

Also: See more JSON examples.