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&amp;v=2&amp;sensor=false&amp;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&amp;v=2&amp;sensor=false&amp;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.