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

Written By on in HTML/CSS

257 words, estimated reading time 2 minutes.

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.

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

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" />

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




you're a champ! thank you kindly

Reply to bobby


Leave a Reply

Your email address will not be published.

If you find something abusive or that does not comply with our terms or guidelines please flag it as inappropriate.

Copyright © 2001-2018 Tim Trott, all rights reserved. Web Design by Azulia Designs

This web page is licensed for your personal, private, non-commercial use only.

Disclaimer, Privacy & LegalSitemapContact Me