Webflow Tutorial: Share or embed directions from Google Maps [VIDEO]

July 28, 2020

In this short tutorial, we share how to generate a shareable link or embed code for directions created in Google Maps, which can be easily embedded on your website.

For many Tasmanian businesses, providing one or multiple directions is a really useful tool for helping customers find you.

Placing maps and directions on your website can enable visitors to easily find you and in turn, increase your business.

Some of the industries that can benefit from placing a directoins on your website include:

  • accommodation and hotel providers;
  • bed and breakfast businesses;
  • cafes and restaurants;
  • businesses with hard to find or tricky locations;

In this post, we share how to use Google Maps to not only create directions from one destination to another - but also how to share or embed these directions.

Read on or check out our video tutorial in the player below.

How to create and embed Google Map directions for your website in three easy steps:

  1. Create your Google map directions
  2. Share or embed your Google map directions
  3. Adding your map directions to Webflow
  4. (Bonus step in video: creating a Webflow collection to easy manage maps)

1. Create your Google map directions

Start by heading to https://www.google.com.au/maps and searching for your starting destination.

This can be a specific address (including street number etc.) or a wider location.

Begin by searching for your start location.

Next, scroll down under the pop up and click the "Directions" button.

Click the directions button.

Once loaded, enter your destination or configure your locations in the blue area and click search.

Input your second destination.

Once the full map has loaded, you can configure the route or add additional destinations. If you're satisfied, the next step is to share or embed the map.

2. Share or embed your Google map directions

Begin by clicking the menu in the top left corner of your screen.

Click the menu button.

From the menu items, find and click the "Share or embed map" item.

Click the 'Share or embed map' item.

If you just need to share this map or directions with your website designer, you can copy the link under the "Send a link" tab.

You can copy this link and send it to your website designer.

If you need to embed the map into Webflow (or your website), then click the "Embed a map" tab.

Click the 'Embed a map' tab.

Next, copy the code generated by Google (or click the "Copy HTML" button).

Copy the HTML code.

3. Adding your map directions to Webflow

The first step is to jump across to your Webflow designer and click the "+" symbol to add a new element.

Click the '+' symbol to add a new element in Webflow.

We're going to add the 'Embed' element which is under 'Component'. You can drop and drag this into your editor, or click to insert it.

Add an 'Embed' element.

Open the settings for the Embed Component and paste your copied Google Map HTML (CMD/CTRL + V) from the previous steps into the the custom code area.

Paste in the copied HTML code from Google maps.

As an additional step, we're going to find the 'width' element of this code and change it from '600' to "100%" (or whatever value you require.

You can change the width/height values as needed.

The final step is to click Save & Close and your map should load in the Webflow editor - that's it!

If you're a Webflow designer, you can also check out our video on embedding Google map directions into your website - plus, how you can use Webflow's CMS to create a collection that makes adding new maps super easy for you or your client.

Thanks for reading.

profile image of dominic standing on timber board walk on bruny island looking
by Dominic Anastasio
Owner and Creative Director Wakeford Digital

More Posts

What Google's core update in March means for small businesses in Tasmania

Read post...

One-page web design: Cutting costs or cutting corners for small businesses?

Read post...

What's new on the blog?

What Google's core update in March means for small businesses in Tasmania

Stay ahead in Hobart's digital marketing landscape with our latest insights about Google's 2024 core update, with tailored information for Tasmania's small businesses sector.

Read this post →

One-page web design: Cutting costs or cutting corners for small businesses?

Learn why a one-page website might not be your best option for a small business website - as we consider SEO, user experience and more to help you make an informed decision.

Read this post →

5 Essential Features Every Tasmanian Small Business Website Should Have In 2024

Unlock the potential of your small business with our guide to the top 5 essential website features for 2024, from fast loading speeds to voice search optimisation, learn how to stay ahead in the digital landscape.

Read this post →