Embedding a Google Map

Include responsive and dynamic maps directly on your page.

Alex Piepenbrink avatar
Written by Alex Piepenbrink
Updated over a week ago

Do you have a business you want people to find? Or maybe want to highlight nearby points of interest, like parking areas, restaurants, or parks? With TIME Sites you can easily embed a Google Map to help you better connect with your audience.

Specify your Location

Go to https://www.google.com/maps and type in your location.

If the pin doesn't appear exactly where you want, you can click on the map the location you want the pin to be and then click again on the coordinates that appear at the bottom of the map.

Get the Embed Code

In the left panel that shows the location information, click on the share icon

Select "Embed a map" and copy the code provided. You can ignore the size selection (we will show you how to adjust the size within TIME Sites).

Place the Code within TIME Sites

On your TIME Sites site, place an embed element where you would like the map to appear. Click on the embed icon in the middle of the element to open up the embed code dialog box and paste your code inside.

Currently, the map is set to be 600px wide by 450px tall. To make the map responsive, change the width and height values to be 100%.

Now your map will fill the embed element and work perfectly across all device modes. Last step is to uncheck Iframed. The code already has an <iframe> tag and it's best practice to not double-iframe code. When you uncheck Iframed you'll see this popup, click on "I understand."

Advanced Map Tips

If you'd like to add places to your map to show points of interest, you can reference this Google support article or search YouTube for one of their countless Google Maps tutorial videos.

If you'd like to style your Google Map to look cleaner than what is provided by default, you can check out the following services:

https://mapstyle.withgoogle.com/
https://snazzymaps.com/

Keep in mind that you will need to create a Google API key to create your own custom map with these services. You will need to also create a billing account on Google Cloud Console, although they do provide a free credit that's more than enough for the average user.


Did this answer your question?