Hi guys. Today I thought we’d take a look at how to easily add Google Maps to your pages. Many of the examples I’ve seen online for how to use the Maps service rely on you being able to get the exact longitude and latitude of your location for the API to figure out where the location you want to show is displayed. I think that this is a little too demanding for any business (or developer) to easily lookup and so I thought I’d share with you a much easier way of getting Maps on your site (whether you want to highlight one location or many)…and all you’ll need is the addresses!
What we’re going to be using for our example is David Hong’s excellent new jQuery Google Maps plugin to create this demo. The best part of the plugin is that it supports you just providing an address or list of addresses to the locations you want to show..and it’ll show you a map with all of them on it.
For example:
var addr = ["10 Downing Street Westminster, London, SW1A 2AA, United Kingdom "]
Pretty cool, right?. So, lets have a little tutorial session.
The first thing I’d like you to do is signup for a Google Maps API key before we get started. You can do this here. Next, download my tutorial pack for this post and open up maps.html in your favourite text editor.
All you need to do is find the following line and paste your API key over the text in bold, then save.
<script type="text/javascript" src=http://maps.google.com/maps?file=api&v=2&sensor=false&key=API_KEY_GOES_HERE></script>
We then include David’s jQuery plugin as well as a copy of jQuery itself. The complete list of includes for the page should then be as follows:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=YOUR_API_KEY"></script>
<script type="text/javascript" src="jquerymaps.js"></script>
If you scroll down the page you’ll see a JavaScript array that looks a lot like the address sample I noted above. Let’s try to render a map that shows us a few of the important landmarks over in London.
var addr = [
“10 Downing Street Westminster, London, SW1A 2AA, United Kingdom”, “Buckingham Palace, London, SW1A 1AA, UK”,
“Big Ben, Bridge St, London, Westminster,SW1A 2, United Kingdom”];
Next, lets create and initiate our map. For this we define a new div element to hold our map (lets call it google maps to keep it simple):
<div id="google-map" class="canvas"></a>
And finally our last step is attach a map to this div which we can do as follows (note that you can also easily set the map zoom and configure whether or not to use labels in your final map).
$(function() {
$("div#google-map").googlemap({
controls: true,
labels: true,
zoom: 4,
addresses: a,
debug: true
});
})
Thats it!. I hope this tutorial helps you to easily integrate Google Maps into your websites, projects and blogs. Please feel free to Retweet if you liked it.
As always, a great tutorial
I have to admit I wasn’t aware of this particular jQuery plugin.
As always, a great tutorial
I have to admit I wasn’t aware of this particular jQuery plugin.
Thank you Naesk
I’m glad you enjoyed it.
Thank you Naesk
I’m glad you enjoyed it.
[...] This post was mentioned on Twitter by jQuery Tips. jQuery Tips said: How to easily add a Google Map using jQuery and an address in less than 5 minutes – http://bit.ly/oWa2R #jQuery [...]
[...] This post was mentioned on Twitter by jQuery Tips. jQuery Tips said: How to easily add a Google Map using jQuery and an address in less than 5 minutes – http://bit.ly/oWa2R #jQuery [...]
hi, great idea!
Am i able to put GPS coordinates that way for getting a map?
hi, great idea!
Am i able to put GPS coordinates that way for getting a map?
I would recommend Marc Grabanski's tutorial on the default API package here for that use case:
http://marcgrabanski.com/article/jquery-google-ma...
I would recommend Marc Grabanski's tutorial on the default API package here for that use case:
http://marcgrabanski.com/article/jquery-google-ma...
Thank you for sharing. I've done this before, but using jquery seems to be much cooler.
Thank you for sharing. I've done this before, but using jquery seems to be much cooler.
MOUSEWHEEL FOR ZOOM IN/OUT IS CRUCIAL FOR SUCH AN APPLICATION
MOUSEWHEEL FOR ZOOM IN/OUT IS CRUCIAL FOR SUCH AN APPLICATION
Hi Viktor – if you would like to use GPS coordinates for your app I would recommend trying out the Official examples from the Google MAP API. You can google those easily and they should give you the functionality you are after.
Hi Viktor – if you would like to use GPS coordinates for your app I would recommend trying out the Official examples from the Google MAP API. You can google those easily and they should give you the functionality you are after.
Thanks, Geld
Thanks, Geld
[...] the original: How to easily add a Google Map using jQuery and an address in less … Share and [...]
[...] the original: How to easily add a Google Map using jQuery and an address in less … Share and [...]
OMG enjoyed reading this blogpost. I submitted your feed to my reader.
OMG enjoyed reading this blogpost. I submitted your feed to my reader.
Hi!
This is great thanks!!
I do have one problem …when i use debug:false the map loads but does not set to the addresses in the array.I tried it with your code(from maps.html)and the same thing happens.I am quit a new user of jquery so maybe i am doing something wrong..thanks anyway..
I already tested MANY plugins to Google Maps and I say: your is the BEST!
Congratulations!