JavaScript
Article
By Michael Wanyoike

Example Google Maps JSON File

By Michael Wanyoike

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.

--ADVERTISEMENT--

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.

Recommended
Sponsors
The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
Login or Create Account to Comment
Login Create Account