Embedding a Google Map into your web page

I get asked how to do this fairly often so I thought I’d just jot it down as it’s really simple, you just nee to know where to look.

GETTING THE CODE to put into your web page

1. Go to https://www.google.co.uk/maps
2. Put in your post code or find your location manually
3. Click on the COG in the bottom right and select SHARE OR EMBED MAP
4. Click on EMBED MAP
5. In the drop down you can select the size. I use custom size and select a size that fits the page.
6. You can easily experiment with the size.  You can also change it manually so if you want a wide but shallow you can just change the height in the code.  The items in red below and the width and height.

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1109.3068147679085!2d-2.9416406499999996!3d56.215634849999994!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4886525fa641da81%3A0x3a7c73a7988ceb!2sLundin+Links%2C+Fife+KY8+6HH!5e0!3m2!1sen!2suk!4v1427098108098″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″></iframe>

EMBEDDING THE MAP ON A WEB PAGE

1. Open your web page editor.
2. You will need to be in source code view.  This might be called SOURCE, HTML, or in WordPress it’s the TEXT view.
3. Then simply paste the Google code onto the page.
4. Save the page.
5. Test.
6. Repeat to the size exactly right but don’t go back to Google just change the sizes as per point 6 above.

Heed help?  Drop me an email at alan.tomkins@alpha-tango.co.uk