How to Embed Google Maps into your Website
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:
- Go to the Google Maps Gadgets directory.
- Find the “position finder” gadget.
- Add it to your Google Maps.
- 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!
Share this post! 2 comments, add yours!
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.
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