Google Tutor

How to Embed Google Maps into your Website

Posted: 08 Feb 2010 04:30 AM PST

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:

You need a Google Maps API key.
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: