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 file
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.
From the list of items select ‘Share or embed map’ (highlighted in blue on image below).
In the ‘Share’ window which pops up, go to the second tab ‘Embed a map’ and click ‘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:
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
Open the file in the browser and view the map on the webpage.
Well done! You did it!
Taking it further
You can change the size of the map, its border etc by altering the code.
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.