Google maps – embed a map in your page

When you get a new google map api, they give you some sample code to start with. If you want to put that code into it’s own page, with just the map, it’s easy enough. Just make a new page, paste the code in and save it. That’s what I did with my sample code. If you want to add that map to a page (like this page), you can use an iframe to do it. An iframe is just a html page embedded in another page, like a little window. So if I want to put this page:

http://nevan.net/maps/map.html

into this page

I can code it like this:

<iframe src="http://nevan.net/maps/map.html" style="width: 520px; height: 320px;"></iframe>

Here’s the result:

As a note, I gave the iframe 20 pixels more height and width to make up for margins and avoid scroll bars appearing.

Leave a comment

You must be logged in to post a comment.