Overview

You want to insert a Google map into a website, it’s easy. All you need to do is copy and paste one line of code into your source html file. That’s it!

Insert a Google map

Open your existing html file or set up a new html fileinfo icon redirect to create new html page. In this example a new local file has been created and named ‘locate.html’.

Open Google maps. Google has been selected for the purpose of this example but other providers of maps are available. Please remember that if you are using Google Maps that Google has terms attached to the use of the map.

In the search box input the place you want to map to.  Here, ‘Hazlehead Park, Aberdeen, UK’ has been input.

On the left of the search box there is a menu, click on the menu.

Google map search

From the list of items select ‘Share or embed map’ (highlighted in blue on image below).

select share and embed on Google maps

In the ‘Share’ window which pops up, go to the second tab ‘Embed a map’ and click ‘COPY HTML’.

Embed a map and copy html

Go back to your file, ‘locate.html’, and paste the link into the file. The link should look similar to the following:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2164.875612858483!2d-2.180274983912312!3d57.139188591682085!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4884110876eecf59%3A0x622c3b100358a0f4!2sHazlehead%20Park!5e0!3m2!1sen!2suk!4v1595261754663!5m2!1sen!2suk" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

which in a code editor (Notepad++) looks like

Notepad++ screen shot

If you would like to know what the different words in the code relate to then please click here.

Save the file – IMPORTANT

View map on web page

Next step is to view your web page in a browser window info icon redirect to how to open a local web page in a browser.

Open the file in the browser and view the map on the webpage.

Well done! You did it!

 

Inserted a Google map of Hazlehead Park Aberdeen

Taking it further

You can change the size of the map, its border etc by altering the code.info icon redirect to google maps code attributes

There is so much more you could do with code and maps, but hopefully this has given you a starting point to explore further if you have never done anything like this before.

Pin It on Pinterest

Share This