HTML
WEB DESIGN
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.
|