Embed Google Maps on your Website
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.
Adverts Blocked Please disable AdBlocking software and allow me to set cookies so that I can continue providing free content and services.
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.
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