How to add Google Driving Directions to your website

If you want to know how to add Google driving directions to your website, then read this post. Google Maps is the most popular digital maps service across the globe. It uses real-time traffic information to find the best route to a given destination. Embedding a Google Map to your blog or website helps your visitors view your location on the World map, see your address, and read reviews (if available). While you can easily embed a map into your website using Google Map’s unique Embed code generator, you can’t use that map as a navigation tool to help your visitors find directions to your location. In this post, we will show you how to use Google Maps to show driving directions to your visitors.

How to add Google Driving Directions to your website

We are going to cover the following 2 methods using which you can add Google Driving Directions to your website:

Embed a Static Google Map and use HTML Form to show Map Route
Use Maps iFrame Generator

Let us see these methods in detail.

1] Embed a Static Google Map and use HTML Form to show Map Route

This method involves 2 steps. Step 1 is embedding a static Google Map that pinpoints your location. Step 2 is adding an HTML form that accepts the user’s location and creates a route map for him on Google Maps. Let’s see how this can be done.

A] Embed a Google Map into your Website

Launch your browser.
Open Google Maps in a new browser tab.
Type your address in the Google Maps search bar in the top-left corner.
Pick the location from the list of results that show up.
Note: If you could not find your address, zoom into Google Maps to track it down. You may use Google Map’s Street View panoramas to indicate your location on the map. Once you find it, you can enter your proper address details using the ‘Add a missing place’ or Add your business’ options and then submit your location to Google for review. It will get added within a few hours of the request submission.
When Google Maps appear to pinpoint your location, click on the Share icon.
Switch to the Embed a map tab.
Click on Copy HTLM link to copy the map code to your clipboard. You can decide how big or small you want the map to appear on your website by choosing a predefined size (small, medium, large) or entering a custom size.
Then go to your website’s admin panel.
Open the webpage where you want to embed the map.
Switch to the Code Editor view.
Paste the code.
Exit the Code Editor. You will be able to see the preview of Google Maps.

B] Use HTML form to create Navigation Route on Google Maps

Switch back to the Code Editor view.
Add the code shown in the following image below the Google Map code:
Replace the value of the destination address as highlighted in the image with the address of your location.
Exit the Code Editor view.
Preview the code and check if it is working, by adding an address in the ‘Enter your address’ field and pressing the Show Me Driving Directions button.
The above action should display the route from the entered address to your location on Google Maps.
If everything works fine, you can Publish the code.

2] Use Maps iFrame Generator

Launch your browser.
Open Free HTML Map Generator in a new browser tab.
Enter your address in the Type Your Address search box on the left panel.
Your location will show up in Google Maps on the right side of the screen. You may adjust the Map Type, Zoom Distance, Width or Height. You may also make the map responsive by clicking the toggle button next to the Make Map Responsive option.
Click on the Generate HTML Code button at the bottom.
The code will show up. Click on the Copy code to clipboard button.
Go to your website’s admin panel.
Open the page where you want to place the map.
Switch to the Code Editor view.
Paste the code.
Exit the Code Editor.
Click on the Preview button. Map preview will show up.
Click on the Directions icon.
Google Maps will open with your address prefilled as the destination address.
Enter a start address. You can also use the Your location option to allow Google Maps to use your current location.
Map Route will appear.
If everything works fine, Publish the page.

This is how your visitors will be able to view your location on Google Maps that’s been embedded into your website and find driving directions from their location to yours. Hope you find this post helpful. Do let us know in the comments if you have any queries.

Also Read: Best Google Maps alternatives for everyday use.

Yes, you can add Google Maps to your HTML website or blog using Google’s Embed Code Generator or Google’s free HTML Map Generator. Both of these options allow you to embed a Google Map that pinpoints your address with a Red Balloon, though there’s a slight difference between them. While the former lets you embed a static map that allows your visitors to see your exact location, nearby landmarks, etc., the latter offers a Directions feature that creates a complete route map that they may use to find driving directions to your location. Depending on your need, you can use either of these options to add Google Maps to your website or blog.

How I Can Get Google Maps Embed Code?

It’s quite easy to get Google Maps Embed Code. Just open Google Maps in a new tab of your browser window and enter your address in the available search bar. When Maps pick and show your address, click on the Share icon. In the Share window, click on the Embed a map tab. Then click on Copy HTML link shown in the top-right corner. That’s it! You can also click on the menu (hamburger icon) of Google Maps and click on the Share or embed map option. Another way of getting this code is via the Free HTML Map generator (Maps iFrame Generator), as described in method 2 of the above post.