Skip to main content

Add a Google Map Component

|

You can now easily add a Google Map to your website using the new Google Map Component. Here’s how you do it:

  1. Create a new page using the Map Data template. Make sure to hide the page from your navigation, as well as from search engines, in the page properties.
  2. Publish your Map Data page.
  3. Create a page for each location you want to add to the map. Assign either the “Place” template or the “Super Template” to each location page.
  4. In the Custom Data tab for each location page, enter the longitude and latitude of the location in the appropriate fields. You can find these values by visiting maps.google.com, searching for the address you wish to add, then right-clicking on your location’s pin and copying the latitude and longitude to your clipboard. You can also add an alternate URL, thumbnail image src, and alt text to the page’s custom data, just like you would when using a page collection component, if desired. These will all display on your new map.
  5. If you want to add an address to your location pages, navigate to each page and enter the address in the appropriate regions (note this will not affect the location’s pin location on the map; it’s what will display as the address in the location card).
  6. Add the label 'map-location' to the page properties of each new location page.
  7. Publish your location pages.
  8. You should now see a JSON file at https://yoursiteurl/map-data.json with the data for each location. Copy this URL to your clipboard.
  9. You can now add the new Google Map component to any slot in a page that uses the Super Template.
  10. Navigate to the page that now contains the Google Map component. Paste the URL of your JSON file in the appropriate field. You can also enter the latitude and longitude to center the map, along with a zoom level.
  11. Publish your page.