Displaying a Google map with markers and values

You can use the HTML Template component to display a Google map with markers and values specified in a data source.

This example contains the data source file, JavaScript and JavaScript + HTML code to display a Google map of Australia with markers and unit values for a number of Australian cities.

To display the Google 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 Step 2
  • refer to this information in the HTML template and script code; see Steps 3 and 4

Step 1: Build the HTML component

  1. Click Build a New Klip and select the HTML Template component.
  2. Select Use an existing data source file and upload the required data source file.
  3. Select the Klip component and type a Klip Title.
  4. Select the HTML Template component and proceed to Step 2.

Step 2: 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.

Step 3: Add the HTML

  1. Copy and paste the following HTML into the HTML Template box on the Properties tab.
  2. <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>

     

Step 4: 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.

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

    require( ["async!https://maps.google.com/maps/api/js?sensor=false"] , 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));
      }

      try{google.maps.event.addDomListener(window, 'load', initialize);} catch (e){}


    });

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

Related links:

Feedback and Knowledge Base