How to add a Google map to your website

Adding a Google map to your website is one way to make your website more interactive and interesting. It can be used to show a visual aid of your business or a place of interest and is relatively easy to implement. In this article I will show you how to add a Google map to your website and include an example page.

Start out by opening your web browser and going to maps.google.com. This will bring up the Google maps website and usually a rough estimate of where you are located in the world, normally the country.

From here you can choose to type a location or move around the Google map to find a particular point. For the example I'm going to be using a map of Melbourne. Once you have selected your location the next step is to click on the "link" icon in the top left.

Once you click this it will expand and show you other options.

From here you can simply click in the box under "Paste HTML to embed in website" option. You should now be able to copy this code.

The next step is opening up your own HTML document to place the code where you would like the map to display. I opened up Notepad++ and you can see the code pasted below in my example. I've added in some bookmarks on the left (blue dots) to show the lines of code.

And just like that you've placed a Google map into your webpage. Save and preview your changes to be sure it's displaying correctly. You can view my Google map examples here.

You can also customise your Google map. If you want to change the view from the standard map to satellite map for example click on the "Satellite" picture / button in the top right.

Clicking on this will change your current view of the map to the Satellite view. Once again you can select the "link" icon in the top left.

This will give you the other options again, the paste code however will be different. Using the same process again you can copy the code into your webpage, save and preview the changes and this time you will have the Satellite map. You can view my example of the Satellite map here.

As you probably noticed you can also turn on and off one or more other map options.

Unfortunately the downfall is that the only embeddable map available at the moment in this list is the "Terrain" option. You can also turn labels off (location names) as well. You can view my example of the Terrain map here.

Conclusion

You now know how to embed a Google map into your own webpage or website.

Back to the articles page.

Comments powered by Disqus