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.

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>