How do I add custom maps from Google My Maps?

You can embed more than just regular Google Maps into Safari Portal! 🌎 Using Google My Maps, you can create beautiful custom maps with step-by-step directions, distance indicators, location pins with custom icons, and more, then add them to your pages in Safari Portal with the iFrame Element. 

Jump to section:

• Video tutorial
• Creating a custom map
• Customizing your map
  • Adding directions
  • Adding lines
  • Adding text
  • Adding distances
  • Changing map style, colors, and icons
• Adding your map to Safari Portal
• Tips and Tricks

Video tutorial

This video will show you how to create a map in Google My Maps and then insert it into Safari Portal. 

Creating a custom map

1. Go to Google My Maps, click Create A New Map, then click Create. 
2. Search the address, name, or GPS coordinates of the place you want to add.
3. Click Add to map. 
4. Repeat for all other locations. Or, click directly on the map to add a location. 

Customizing your map

Adding directions

Method 1

1. Click the Draw a line icon and select Add line or shape from the dropdown. 
2. Select car, bike, or walking directions.
3. Click where you want your route to start. Add specific turns and bends by clicking. The map will dynamically change as you move your cursor. 
4. Double-click to finish.
   
    

Method 2

1. Click the Add directions icon . An additional layer will appear in the left menu. 
2. If you have already added location pins to the map, clicking them one after another will automatically add them as the directions' destinations. Otherwise, add the addresses manually in the left menu. 
3. Click Driving to select different transportation options.
4. Click the three dots next to the directions layer for more options, including displaying step-by-step instructions when viewing the map.
   
   

Adding lines

Lines are particularly great at showing flight paths. Here's how to add one. 

1. Click the Draw a line icon and select Add line or shape from the dropdown. 
2. Click to place the start point of the line. Add additional bends or turns with a click.
3. Double-click to end the line. 
4. Name the line or keep the default title. Optionally, add a description.
5. Change the color and thickness of the line with the paint bucket icon . 

Adding text

Add notes to a location or a line by changing its title or adding a description to personalize destinations for your guests.

1. Click on a location marker or line.
2. Click the edit icon . 
3. Change or add a title and description, then click Save.
   
   
   
   
4. Your text will show when guests click on the icon or line. 
   
   

Adding distances

Display the distance between points easily and display a static number on your map. 

1. Click the Measure distances and areas icon . Your cursor will become a crosshair. 
2. Click to place the start point. Add additional bends or turns with a click.
3. Double-click to end.
4. The distance will automatically display between the points you've placed. 

Changing map style, colors, and icons

Click any location marker and select the paint bucket icon to change its color and icon. Search for specific icons in Filter field. You can also upload custom icons!

Click the arrow next to Base map to change the map style.

Adding your map to Safari Portal

1. Click Share on the left menu of the map. 
2. Toggle on Anyone with this link can view in the pop-up, then close the window.
3. Click the three dots next to the name of your map. 
4. Click Embed on my site. 
5. Untoggle Include the owner's profile picture and name in the header. 
6. Copy the code that appears in the pop-up, then click Save. 
7. Navigate to Safari Portal and open the page where you want to add the map.
8. Using the inline editor, add an iFrame Element. 
9. From the Select service dropdown, select Google Maps. 
10. Paste your code into the Paste embed code here field, then click Insert.