e. hello@alpha-tango.co.uk t. 01333 329882

Embedding a Google Map into your web page

Published on 23rd March 2015

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

 

0/5 (0 Reviews)

Categories: Google

  • Subscribe

    • This field is for validation purposes and should be left unchanged.
  • Categories

  • Get In Touch

    Alpha Tango
    44 Toll Court
    Lundin Links
    Fife, KY8 6HH

    o: 01333 329882
    Skype: alantomkins
    hello@alpha-tango.co.uk


    Call Me Back

    • This field is for validation purposes and should be left unchanged.
    Alpha Tango