Displaying a Google map with markers

You can use the HTML Template component to display a Google map in Klipfolio.

This example contains the JavaScript and JavaScript + HTML code to display a Google map of Australia with simple markers.

Step 1: Building the HTML component

  1. Click the Build a New Klip button.
  2. Select the HTML Template component.
  3. Select Don't use a data source.
  4. Select the Klip component and enter a name for the Klip Title.
  5. 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. 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 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'
      }); 

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

  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.

Step 4: Troubleshooting

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

Related links:

Feedback and Knowledge Base