NEW GUIDEMarketing metrics for data teamsDownload here

Google Maps with markers

Pinning locations using Google Maps visually ties your geo-data to specific addresses.

The example below shows a Google map with markers indicating In-N-Out locations.

Google Map with markers

*Learn more about using HTML to customize your reports.

Create a Google Map with markers

Add the stylesheet link and script tag to the top of the HTML:

<link rel="stylesheet" href="https://mode.github.io/alamode/alamode.min.css">
<script src="https://mode.github.io/alamode/alamode.min.js"></script>

Add the customizable snippet at the bottom of the HTML:

<script>

alamode.googleMap(
  {
      google_maps_api_key: "YOUR_API_KEY",
      title: "In-n-Out locations",
      lat_column: "lat",
      lng_column: "long",
      label_column: "city",
      query_name: "Query 1",
      center_lat: 36.75,
      center_lng: -119.77,
      starting_zoom: 6,
      map_type: "terrain",
      height: 600
  }
)

</script>

You can customize the map by editing the parameters in the snippet:

  • html_element: If not provided, the map will be added as the last element in the report. To place it elsewhere, select an element in your report with this parameter.
  • google_maps_api_key: A required Google Maps Javascipt API key. You can create a free key by clicking on the Get a Key button on this page.
  • title: The map's title.
  • lat_column: The dataset column that returns latitude vaules.
  • lng_column: The dataset column that returns longitude vaules.
  • label_column: The dataset column that returns the label values for each map marker.
  • query_name: The name of the query that returns the map's dataset. If you update the name of the query, you’ll need to update it here as well.
  • center_lat: The default center latitude value for the map.
  • center_lng: The default center longitude value for the map.
  • starting_zoom: The default zoom. Typically ranges from 1 to 18. The higher the value, the greater the zoom.
  • map_type: The default map type. You can find more about available types here.
  • height: Height of the chart in pixels.
decorative particle

Get our weekly data newsletter

Work-related distractions for every data enthusiast.