How do I display a Google map with markers on my dashboard?

Follow this article step-by-step to add a google map with markers onto your dashboard. You’ll need to:

Prerequisite: Get your Google Maps API Key

Refer to the Google Maps Javascript API documentation to get an API Key. You will use your API Key where indicated in the Javascript below.

Step 1: Building the HTML component

  1. On your dashboard, click Add a Klip.
  2. Select Build a custom Klip.
  3. Select HTML Template.
  4. Select Don't use a data source.
  5. Select the Klip component and enter a name for the Klip Title.
  6. Select the HTML Template component.

Step 2: Adding HTML

  1. From the Properties panel, HTML Template box, copy and paste the following HTML.

<style type="text/css">
  #map_canvas { width: 800px; height: 800px; }
</style>

<div id="map_canvas"></div>

Step 3: Adding JavaScript

      1. From the Properties panel, Script field, click the Use JavaScript with this HTML Template link.
      2. In the Script box, copy and paste the following JavaScript.
      3. Enter your API Key where it says INSERT-YOUR-API-KEY in the JavaScript below.

require.config({
  paths:{
    "async" : "https://static.klipfolio.com/static/js/require_async"
  }
});

require( ["async!https://maps.google.com/maps/api/js?key=INSERT-YOUR-API-KEY"] , function(ok) {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myOptions = {
    zoom: 4,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Hello World'
  }); 
});

      1. At the Height field, use the drop-down menu to select a display size.
      2. At the Overflow field, use the drop-down menu to select Auto scrollbars.
      3. Click the Save button.
      4. Name the Klip.
      5. Click the Finished button.

 If you are adding multiple maps to the same dashboard, the unique ID for each map needs to be different. For example if you are adding a second map, you will need to change the unique ID - such as id="map_campus" - in both the HTML and the Javascript. Otherwise, the map will not render.

Step 4: Troubleshooting

      • If the map does not display when saved, check for additional line returns after the inserted HTML.

 

 

Advanced: Add a map with markers and values to your dashboard

To add values to your map, you need to:

      • create and upload a data source file containing the coordinates and unit values for the different cities
      • create data columns for this information; see  Add the data source below.
      • refer to this information in the HTML template and script code; see Add the HTML and Add the Javascript below

 

Add the data source

      1. Assign data as follows (the SLICE function removes the row header from each column of the data source).
        • Data: ZipCode, formula: SLICE( A:A )
        • Data: Latitude, formula: SLICE( D:D )
        • Data: Longitude, formula: SLICE( E:E )
        • Data: Units, formula: SLICE( F:F )
      2. Insert references to this information in the HTML Template.

 

 

Add the HTML

        1. Copy and paste the following HTML into the HTML Template box on the Properties tab.

<style type="text/css">
    #map_canvas { width: 100%; height: 400px; }
</style>

<ul id="map-zipCodes" style="display:none;">
{{each data}}
  <li>${$value.ZipCode}</li>
{{/each}}
</ul>

<ul id="map-latitudes" style="display:none;">
{{each data}}
  <li>${$value.Latitude}</li>
{{/each}}
</ul>

<ul id="map-longitudes" style="display:none;">
{{each data}}
  <li>${$value.Longitude}</li>
{{/each}}
</ul>

<ul id="map-Units" style="display:none;">
{{each data}}
  <li>${$value.Units}</li>
{{/each}}
</ul>

<div id="map_canvas"></div>

 

 

Add the JavaScript

  1. On the Properties tab, click Use JavaScript with this HTML Template.
  2. Copy and paste the following JavaScript into the Script box.
  3. Enter your API Key where it says INSERT-YOUR-API-KEY in the JavaScript below.

require.config({
  paths:{
    "async" : "https://static.klipfolio.com/static/js/require_async"
  }
});

require( ["async!https://maps.google.com/maps/api/js?key=INSERT-YOUR-API-KEY"] , function(ok) {
  
  var zipCodes = $("#map-zipCodes li");
  var latitudes = $("#map-latitudes li");
  var longitudes = $("#map-longitudes li");
  var units = $("#map-Units li");  

  var centerLatLng;
  if (latitudes.length > 0 && longitudes.length > 0) {
    centerLatLng = new google.maps.LatLng(parseInt($(latitudes[0]).text()), parseInt($(longitudes[0]).text()))
  }

 
  var myOptions = {
    zoom: 4,
    center: centerLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  var infoWindow = new google.maps.InfoWindow();
  var marker;
  for (var i = 0; i < latitudes.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng($(latitudes[i]).text(), $(longitudes[i]).text()),
      map: map,
      title: $(zipCodes[i]).text()
    });

    google.maps.event.addListener(marker, "click", (function(marker, i) {
      return function() {
        infoWindow.setContent(
          "<div>" +
            "<h1>" + $(zipCodes[i]).text() + "</h1>" +
            "<p><span style='font-weight:bold;'>Units: </span>" + $(units[i]).text() + "</p>" +
          "</div>"
        );
        infoWindow.open(map, marker);
      }   
    })(marker, i));
  }

  }); 

  • Set  Height as required.
  • Set Overflow to Auto scrollbars.
  • Click Save and Name the Klip. Click Finished.

 If you are adding multiple maps to the same dashboard, the unique ID for each map needs to be different. For example if you are adding a second map, you will need to change the unique ID - such as id="map_campus" - in both the HTML and the Javascript. Otherwise, the map will not render.

Related links: