Web Design that taps into the haromny and vision of your dreams.

Embed Google Maps on your Website

Adding a simple Google Map and Directions widget to your website

By on in HTML/CSS

257 words, estimated reading time 2 minutes.

Google Maps Series
  1. Embed Google Maps on your Website
  2. Getting Started with the Google Maps API
  3. Adding Pins, Points and Routes to Google Maps API

Google offers a multitude of methods for adding rich interactive maps to your websites from basic copy and paste code to a full API for a completely custom user experience. This tutorial gives you an overview of the methods and shows you how to get started adding maps.

We Are Here

By far the quickest and easiest method is to copy and paste the code directly from Google Maps. This is especially useful for sharing a specific location, for example, a head office address. This can be done by simply setting up the Google Maps website to show the map type and zoom centred on your location and clicking on the link icon. This will then let you copy the code to share the map via a URL or embed the map on your website.

Sharing Google Maps and Embedding in Website
Sharing Google Maps and Embedding in Website

Get Directions

You can add a get directions feature by adding a small form to the page. This will show a text box for the user to enter their location and it will produce a directions list with a route that they can follow. You should replace "INSERT YOUR ADDRESS HERE" with your actual address or location details.

<form action="http://maps.google.com/maps" method="get" target="_blank">
   <label for="saddr">Enter your location:</label>
   <input type="text" name="saddr" />
   <input type="hidden" name="daddr" value="INSERT YOUR ADDRESS HERE" />
   <input type="submit" value="Get directions" />
</form>

For more advanced options, such as adding routes, waypoints, markers and information boxes, you will need to use the Google Maps API for which there is are separate articles.

Last updated on: Wednesday 21st June 2017

 

Comments

Have a question or suggestion? Please leave a comment to start the discussion.

bobby

bobby

you're a champ! thank you kindly

Reply to bobby

 

Leave a Reply

Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Your email address will not be published.