About & Contact | Advertise | Privacy
Google Tutorials and News

How to Embed Google Maps into your Website

Written by: Christine Buske on Monday, February 8th, 2010
Posted to: Maps
2 comments, add yours!
Tweet

Google Maps are without question one of the most useful Google applications. Recently, I’ve not only used it to find addresses, but also to scope out neighborhoods for a potential future move. In Canada it can get pretty cold in January, and if I can use Street View in Google Maps to take a quick look at a street or neighborhood, instead of going out into the icy cold, I’ll gladly do it. When trying to help people find my location, I used to send a screen shot of a Google Map by email, or post a screen shot of a map on my website.

However, a screen shot isn’t like looking at an actual map, where you can zoom in and out, enable Street View, and get directions. When you are thinking of adding a screen shot of a Google Map to your blog or website, consider adding an actually functional map instead. Here is how it’s done.

Adding Google Maps to your website with gMap

gMap is a handy little plugin that you can use to add dynamic Google Maps to your website. gMap is a small, flexible, jQuery plugin you can download. It only has two requirements:

  1. You need a Google Maps API key.
  2. You also need a jQuery library.

Once installed, you can show locations on a Google Map directly on your website by using the longitude and latitude coordinates for a particular location. At the moment, gMap doesn’t support the use of addresses. Either way, coordinates are a very accurate way of presenting a location. You’ll avoid accidentally publishing the wrong location due to the same address existing in different cities. I recently made that mistake and called a store in Vermont, because the same street name and city exist there as in Ontario. I figured it out fast enough, but if by chance you accidentally post the wrong location on your website it could at the very least be embarrassing. If your website is supposed to bring in business, it is downright detrimental, so I don’t think that not being able to use addresses for a location in gMap is a big deal.

How to get your Google Map coordinates

To use gMap, you need to have the coordinates for your location. Google Maps doesn’t automatically show them, but Google Earth does. There are ways of showing coordinates in Google Maps though, and here is one way how:

  1. Go to the Google Maps Gadgets directory.
  2. Find the “position finder” gadget.
  3. Add it to your Google Maps.
  4. Now, if you click on any location in Google Maps, the coordinates are shown.

Don't miss another post! Subscribe by RSS feed or by email today!

ShareShare this post!   2 comments, add yours!

Related posts

    • Google Maps Helped Solve Kidnapping Case
    • Google Maps: Get To Businesses Faster
    • Asking Google to remove your home from Maps Street View
    • Google Street View Comes to Canada!

2 Responses to “How to Embed Google Maps into your Website”

  1. # Marcus Hillon 09 Feb 2010 at 5:48 am

    There’s an easier way which doesn’t require an API key, plugins or jquery-

    1. Navigate your Google Map to the position you require
    2. Click on “Link” in the horizontal blue bar, over at the top right
    3. Highlight the code inside the “Paste HTML to embed in website” box
    4. Paste that code into your webpage

    You can customise the size of the embedded map by clicking the “Customise and preview embedded map” link you will see after step 2 above.

  2. # Tif Streywoodon 09 Feb 2010 at 1:00 pm

    Excellent, a perfect quick solution!!

    I always used it the way Markus just described it directly from Google Maps or with a service like http://www.map-generator.net

    Btw. here are some other Jquery / Maps Examples:
    http://gmap.nurtext.de/examples.html ;)

    Cheers Tif

  • Advertise Here
  • Authors

    • Abhijeet Mukherjee
    • Christine Buske
    • David Van
    • Peter Jalbert
    • Brian Wallace
    • Phil Glockner
    • Mark O’Neill
    • Yoast DeValk
  • Friends

    • Craig Fifield
    • Joost DeValk
    • Guiding Tech
    • PC Extreme
  • Deals

    • Save $5 - Spanning Sync Discount Code
    • $120 off - With this BOTW promo for ads
    • Coupons! - Save with our Google Checkout Coupons
  • Popular categories

    • News, Gmail, Google Chrome, Google Docs, Google Calendar
  • Just posted

    • Google Docs Gets a New Research Tool
    • Gmail Gets Better Google+ Notifications
    • ScanURL Does a Comprehensive Security Scan for a URL
    • Google Drive Arrives, Google Docs is Now a Part Of It
    • Gmail Now Gives More Information About Emails It Marks As Spam
  • Just said...

    • Google Drive Arrives, Google Docs is Now a Part Of It
      • shle896: Actually, Google Docs does support watching videos and has for...
      • Will: Lots of complaints above. Google docs didn’t have video or mp3...
      • shle896: Aside from the desktop app that syncs files, I don’t see how...
    • Using Page Specific Web Search Operators
      • Landscape Gardening Anaheim: Magnificent site. Plenty of useful information...
    • Gmail Now Gives More Information About Emails It Marks As Spam
      • Moditshaba: How can i set my phone 2 alert me when i receive my mail...
  • Community


      Join me at: Twitter, MyBlogLog
  • Tools

      Beginner's Guide to Google
      Google Help Forums
      Shared Items Plugin
      Track Google via Twitter
      Research Google
      Simply Advanced Google Search
  •  

Google Tutor: Google tutorials and tips © 2003-2012. All Rights Reserved. Advertise, About & Contact Us, Sitemap, Privacy. CDN Service by MaxCDN. GoogleTutor.com is not sponsored by or affiliated with Google, Inc. in any way (although we'd love to be!) we are just fans :)