Learning never exhausts the mind
Home >  Web Design > HTML & CSS > Embed Google Maps on your Website

Last Updated on by

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.

One thought on “Embed Google Maps on your Website
  • 7th January 2016 at 12:00 am

    you're a champ! thank you kindly

    Reply

Leave a Reply

Fields marked with * are mandatory.

We respect your privacy, and will not make your email public. Hashed email address may be checked against Gravatar service to retrieve avatars. This site uses Akismet to reduce spam. Learn how your comment data is processed.