Embed a Custom Google Map on a Page

Custom Google Map

You’ve probably used Google Maps to look up directions before, but did you know you can create your own custom map within it? The possibilities for customization are almost endless, and it’s a great way to easily organize and view your favorite locations on one map.

You can then embed this map into Pages using Embed component, here is how.

Step1. Create Custom Map in Google Map 

  1. Open Google Maps and click the menu button in the top left corner.
  2. Click Your Places > Maps > Create Map. 
  3. Name your map and enter in a description.
  4. Add markers for your desired locations. You can label these markers, add descriptions, change the color or shape, and add an image.
  5. You can add walking, biking, or driving paths between two destinations.
  6. You can also add additional layers by clicking on the Add Layer Button. This is useful if you’re creating a very dense map with lots of features and paths.

Step2: Get the embed code

Expand menu in my map and select "Embed on my site" 

Step3: Paste the embed code in Pages

Using embed component paste the code.

HOT Tips!: If you want to make the width of the map responsive to the width of the component, replace the hard coded width size with percentage:

for example replace  width="640" to width="100%"

 

 

Last modified on 1 December 2023 by Hannah Door
Created on 24 August 2017 by Michael Christian

Was this helpful?  

Share