HTML WEB DESIGN

 

separator-blank.png

 

GUIDE – EMBEDDING AN ACTIVE GOOGLE MAP

 

  • Create a new HTML document. 

  • Make sure the document only has the HTML template in it.  Add a simple header at the top above where your map will be.

 

<html>

<head>

</head>

<body>

<h1>Lockerby's Area on Google Maps</h1><br>

 

</body>

</html>

 

 

·       Go to Google Maps (maps.google.com). 

Zoom and pan to the map that you want.

At the top left on the three line button name menu, click on Share or Embed Map.

Choose Embed a Map at the top.

Copy and paste the HTML code into the body section of your HTML document.

Done!

·       The code will look like this:

 

 

<html>

<head>

</head>

<body>

<center>

<h1>Lockerby's Area on Google Maps</h1><br>

<br>

 

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d8662.124218806957!2d-81.00638648912124!3d46.46515865610014!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sca!4v1656005549229!5m2!1sen!2sca" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

</center>

</body>

</html>

 

 

·       Click here to see how it looks.