jQuery and Google Maps Tutorial: #1 Basics

March 04, 2009

There are many times I want to leverage jQuery’s strengths to create a custom Google Maps mashup. In this tutorial, I will walk you through how to get started using jQuery inside the Google Maps environment. I will assume nothing, and explain each piece in detail.

View Final Demo

If you are already familiar with Google Maps API, skip to step #5, or so.

Step #1: Get API key

First, grab yourself an API key for Google Maps , you will need this in the next step.

Step #2: Load Google Maps and jQuery

We want to load up jQuery and Google Maps with the Google AJAX Libraries API.

<script type="text/javascript"src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE">

<script type="text/javascript"charset="utf-8">google.load("maps","2.x"); google.load("jquery","1.3.1");</script>

Make sure to replace YOUR_API_KEY_HERE with your API key. By using the Google AJAX Libraries API, it allows you to load the JavaScript libraries you need right from Google’s servers. This increases the chance that your users will be able to load the scripts faster from their browser cache, as well as shuffle the jQuery script loading off your server.

Step #3: Create the Google Map


To create our Google Map, we need to create a container div and use CSS to give it a width and a height.



<div id="map"></div>

<style media="screen"type="text/css">#map { width:500px; height:500px; }</style>

Use the GMap2 function to make a map instance. Then, set the center of the map. I wrapped this code block in jQuery’s document ready function so that the code is run after the page has loaded.

$(document).ready(function(){ 

  var map = new GMap2(document.getElementById(‘map’)); 

  var burnsvilleMN = new GLatLng(44.797916,-93.278046); 

  map.setCenter(burnsvilleMN, 8); 

});

Here, I used Burnsville, MN’s latitude and longitude because it is where I live right now. There are many ways to get the latitude and longitude of an address, like this simple service by iTouchMap.

The second parameter for setCenter is the zoom level, which is a number. I set the zoom level to"8"here because it is about in the middle.

At this point we should have a simple map.

Step #4: Load the Google Maps Example


To have some points to work with, let’s paste in the google maps example .



// setup 10 random points 

var bounds = map.getBounds(); 

var southWest = bounds.getSouthWest(); 

var northEast = bounds.getNorthEast(); 

var lngSpan = northEast.lng() – southWest.lng(); 

var latSpan = northEast.lat() – southWest.lat(); 

var markers = []; 

for (var i = 0; i<10; i++) { 

  var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); 

  marker = new GMarker(point); 

  map.addOverlay(marker); 

  markers[i] = marker; 

}

Note that I added a markers array to the example code. This will be used in the next step.

Step #5: Loop Through Markers and Add Basic Click Event to Markers

In this step, we start to use jQuery and Google Maps together. We want to be careful to use Google Map’s built-in API as much as possible, leaving jQuery only for what it is best at.




Let’s take that array of markers and loop through them with jQuery’s each method.

$(markers).each(function(i,marker){ 

  GEvent.addListener(marker,"click", function(){ 

    map.panTo(marker.getLatLng()); 

  }); 

});

Inside the loop, let’s use Google Maps’s GEvent namespace to attach a click event to each marker. Then, we will add a panTo behavior to center the map on the marker. marker.getLatLng(); returns the latitude and longitude of the marker, while map.panTo(GLatLng) allows us to center the map on that latitude and longitude.

Step #6 – Make a Clickable List of Markers




Let’s add a clickable list next to the map. Insert a ul.

&lt;ul id="list"&gt;&lt;/ul&gt;

Then let’s style it up a bit by floating the map left and float our list element next to it. We also want to add a hover effect to the list items to give visual feedback to the user that they can click on each item in the list.

<style type="text/css" media="screen">

  #map { float:left; width:500px; height:500px; } 

  #list { float:left; width:200px; background:#eee; list-style:none; padding:0; } 

  #list li { padding:10px; } 

  #list li:hover { background:#555; color:#fff; cursor:pointer; cursor:hand; }

</style>

In our jQuery each loop from last step, let’s append the clickable list items to the list.

$("<li />") 

  .html("Point"+i) 

  .click(function(){ 

    map.panTo(marker.getLatLng()); 

  }) 

  .appendTo("#list");

Here I am just setting the content to"Point (the count)", adding that same panTo action from before, then appending the list item to our list.

Step #7 – Add a Custom Message


When I create a Google Maps mashup, I usually want to replace the built-in info window with something custom. With jQuery, we can add any arbitrary HTML in place of the info window. This is great when you want complete control over what the info window looks like.


Add a message div with some test text.



<div id="message"style="display:none;">Test text.</div>

Then add some basic styling to the message.

#message { position:absolute; padding:10px; background:#555; color:#fff; width:75px; }

We have to place the message div inside the map. To do this, we can use jQuery to append it to an object. The map view is seperated into panes. Each pane is a div layered on top of the other. To get the div object that we want to attach our message div to, we can use map.getPane(PANE). The G_MAP_FLOAT_SHADOW_PANE is the layer that I find works best for attaching custom messages.

$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

To show the message div in place of the info window, we need to separate the click action into a separate function. Replace the map.panTo(marker.getLatLng(); with displayPoint(marker, i);, a call to the new displayPoint function shown below.

function displayPoint(marker, i){ 

  map.panTo(marker.getPoint()); 

  var markerOffset = map.fromLatLngToDivPixel(marker.getPoint());

  $("#message").show().css({ top:markerOffset.y, left:markerOffset.x }); 

}

We put the panTo action in our new function. Then the magic function here is the map.fromLatLngToDivPixel(GLatLng); which converts the latitude/longitude of the marker into a pixel on the map div.This returns aobject containing x (amount of pixels from the left of the map) and y (amount of pixels from the top of the map).

Final Step #8 – Add Some Spice

To finish up, we will add an event when the map stops panning. We can do this by attaching the"movend"event map object. This way, after panning to the marker you’ve clicked on we can use jQuery’s fadeIn method to add some spice.

function displayPoint(marker, index){ 

  $("#message").hide(); 

  var moveEnd = GEvent.addListener(map,"moveend", function(){ 

    var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng()); 

    $("#message") 

      .fadeIn() 

      .css({ top:markerOffset.y, left:markerOffset.x }); 

    GEvent.removeListener(moveEnd); 

  }); 

  map.panTo(marker.getLatLng()); 

}

There you have it. We’ve come a long ways by adding our own custom click event, a clickable list and a custom info window. In the next tutorial, I’ll show you how to store and retrieve points with a server-side language.

View Final Demo

168 comments

#1. Ian Pitts on March 05, 2009

This is excellent! I had no idea it was this easy to integrate Google Maps into a site with such a minimum of code. Thanks for taking the time to write this up.

#2. Casey Becking on March 05, 2009

Very nice and very descriptive just how a tutorial should be thank you!

#3. Andrew Collins on March 05, 2009

I prefer code-centric and code-heavy how-to’s, so thanks for the excellent tutorial.

#4. Keir Clarke on March 05, 2009

This is excellent. Can’t wait for part 2!

#5. Holger Weis on March 06, 2009

Thanks for the nice tutorial!
I noticed that you use document.getElementById() in your example, but you can also do this via the jQuery $() function. This is how I solve this:
var map = new google.maps.Map2($(“#map”).get(0));
Don’t forget to append the .get(0)!

#6. Marc Grabanski on March 06, 2009

@Holger Weis: Thanks for letting people know jQuery’s alternative to document.getElementById.

#7. Logan on March 06, 2009

Excellent stuff! This will really come in handy. The only final step I would like to see is highlighting in the list when a marker is clicked.

#8. Mike on March 10, 2009

Excellent Tutorial!

How would I go about having the map zoom in closer when a user clicks on a location? I’ve tried a bunch of things and nothing seems to work. It keeps the default zoom.

Thanks

#9. Marc Grabanski on March 10, 2009

map.setZoom(number); sets the zoom of the map.

#10. Derek Tut on March 12, 2009

How can I animate the map so it now goes from point to point, pausing and popping up a balloon for each point as it goes along?

#11. Ben on March 17, 2009

And here is a tutorial for Google Maps made in paper :)
Pretty sure you’ll like it.
http://www.youtube.com/watch?v=I9TtDecveCE

#12. Erik White on March 17, 2009

Hi Marc, thanks for the tutorial! I’ve built upon your script and added a couple of new features.
You can see it in action at www.erikwhite.net/gmapjquery.html

Note: I haven’t tested it in anything besides Firefox 3 yet so there could be some cross-browser issues

It now uses an array to store the locations which means you can add data such as labels and text for the markers. When the page loads, it cycles through the array and shows each array item in sequence. If you add more items to the array it will speed up so you don’t have to sit and wait for too long. It also allows you to toggle markers which doesn’t work in your version and shows an active state when you click on a marker or a list item.

#13. Sachin on March 23, 2009

I am a non- programmer. does anyone know about any ready made tool for same or similar requirement? it would be of gr8 help.

#14. Roberto on March 26, 2009

Can I add my own map to the API?
A picture, for example.
Thanks.

#15. Brandon on March 31, 2009

Sachin, if you are looking for a non technical solution SpatialKey provides some amazing maps and reporting without a line of code.

#16. Tim on April 04, 2009

What if you have duplicate coordinates that are the same; can you create one marker with multiple details in your custom description.

#17. Eric Rasch on April 16, 2009

@Erik White: Thank you for providing your twist on this great tutorial. From what I was able to test, Marc’s map works in almost all the browsers, whereas Erik’s does not work in IE 6/7. I’m trying to work out the bugs, but it pretty much comes down to the Javascript code. I’ll post any solution I find.

#18. yeah on April 16, 2009

I’m totally new to jquery and using google maps. So this question might seem stupid to some. Instead of adding random markers I want to add specific locations (and have the list on the side correspond to markers). What part of the code do I need to take out or change in order to achieve this?

#19. alan on April 16, 2009

I was looking in your skills section,Give your self another star for design.You are a 5 star designer.
Good job on everything,I like everything you are doing.

#20. Kelvin on April 19, 2009

Excellent tutorial with detail description and supplementary code.

Thanks for sharing.

#21. Bill Fisher on April 25, 2009

Great tutorial! Thanks especially for introducing me to an easy way to recreate the infoWindow.

I am having trouble, however, with loading content from PHP/MySQL into the infoWindow and then acting upon that content with jQuery… I can get the content there, but can’t get the jQuery working. I think it comes down to the event handling, but I am really not sure. A lot of people on the Google Maps list seem to be having similar trouble…

My point is: I think a lot of folks could use a tutorial on this issue (myself included) and you are obviously a good teacher, so how about it?

Thanks again for the great tutorial!

#22. David on May 04, 2009

Is there a way you can highlight the sidebar item with the corresponding info/item bubble that shows up in the google map?

#23. biuuu on May 04, 2009

very excellent! thank you!

#24. adhitia on May 17, 2009

hi..i interest to your script, and i find some problem, maybe you can help..
i can combine between your gmapJquery with Drag&drop Jquery
here is the script

//asumption this is the MAP Script——

//and this is drag&drop script
$(function() {
// there’s the gallery and the cart
var $gallery = $(‘.kiri’)//, $cart = $(‘#cart’);
// let the gallery items be draggable
$(‘#compare’).draggable({
cancel: ‘a.ui-icon’,// clicking an icon won’t initiate dragging
revert: ‘invalid’, // when not dropped, the item will revert back to its initial position
containment: $(‘#demo-frame’).length ? ‘#demo-frame’ : ‘document’, // stick to demo-frame if present
helper: ‘clone’,
cursor: ‘move’
});

if i see in firebug, it say " $(“#compare”).draggable is not a function "
can anyone help me??

#25. Wes on May 29, 2009

Thanks for the great tutorial, it got me out of a tight spot.

I do have one question though. with the moveend event listener, what happens if you were to have one point and its set as the center. The map doesn’t move then and therefore the listener is never triggered, any thoughts on how to get around that?

#26. Rob C on May 31, 2009

I just want to thank you for a great resource. I am relatively new to gMaps, and am basically blundering around the web reading up on it. I just so happen to luckily click on your url and very glad that I did.

Once question though, although google allows you to load up jQuery form their server, I can still use my own on my server correct? Obviously I’ll try myself, but figured I’d ask as well.

Thanks for the great resource!

Rob

#27. Babji on June 01, 2009

If I want to have text field(s) where user enters the address (street, city , zip ) and then based on this info how do I invoke the API to render the MAP.
The code shows the usage of latitude and longitude?
Thanks

#28. Mark on June 04, 2009

Same problem as Babji..
I want to be able to just provide an address.. unless there is a way to automatically (via php?) get the latitude and longitude values of a given addres..

Thanks a lot,

Mark.

#29. Vitaly Vedernikov on June 05, 2009

Thanks, Mark. Lool at this.

#30. Erik White on June 06, 2009

I made a small tweak to my code so it now works in IE7 (I can’t test IE6 at the moment, but hopefully it’ll work as well)

You can try it at http://erikwhite.net/gmapjquery.html

My code builds on Marc’s code by adding:
-Cycling of markers on load
-Linking marker click activity to list highlighting
-Improved toggling behaviour for markers and list items
-Loading marker locations from an array which also stores marker labels and extra information
-Dynamically calculating the cycle time between markers, depending on the total number of markers

You can see another example here (this site isn’t quite finished yet):

http://southamptonspitfires.co.uk/media/venues

#31. Kim on June 11, 2009

Hi

First: This is by far the best jquery / Gmap tutorial ever :D

But i have a problem, i am building a restaurantsite where you can choose areas in Stockholm and all restaurants within a chosen category and area will be displayed on the map.

The problem is the $(“#message”).appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
The message-DIV it does not appear when i do a second search on the page, only the first time.

Im not even sure where to start debugging :( is this some kind of memory leakage ?

I would really appreciate if you have some advice to this problem

Here is a link to the beta page of the map:
http://testwebb.restaurangbloggen.se/Restaurangkartan.aspx

just choose anything from the drop down menus, first round will display the #message on the map
but the second time you do a search with the drop down menu the #message does not appear anymore

//Kim

#32. Marc Grabanski on June 11, 2009

Kim: the message div’s CSS is display none.. $("#message").show() takes care of your problem.

#33. Kim on June 12, 2009

Whooops couldn’t see the forest because of all the trees :P as we say in sweden

cheers mate =)

#34. Kim on June 12, 2009

Hi Marc

just got home from work checked everywhere on page, im not sure it is because it is display none

Since

$(“#message”).fadeIn().css({ top: markerOffset.y, left: markerOffset.x });

should show the #message div, the weird thing is that it does work the first round but not the second round when i do a new search.

Might there be some kind of DOM object i have to clear/empty?

#35. William on June 14, 2009

Nice tutorial. Now all I need to do is figure out how to embed it into my CMS!

#36. Gianfra on June 19, 2009

Thank you for the input Marc!

#37. taliesin on June 25, 2009

I am no coder and I got the script working – which has to say something about the quality of the walk through – Thanks good job! I There is a question in an earlier post about just listing markers but no response and I have seen Erik’s work with loading from an array. What code is needed to replace the random markers with an array like Erik’s. Any pointers would be great the examples on the Google Maps site are for random markers so don’t help.

#38. Marc Grabanski on June 25, 2009

taliesin: check out part 2 of the series on google maps and jQuery.

#39. taliesin on June 25, 2009

Hi Marc, yes I had already read that but seemed like “over egging the pudding” all I wanted was to show a list of fixed markers instead of the random ones – thanks all the same.

#40. M on June 26, 2009

Great article, Marc. Kudos!

I have built on your tutorial and tweaked it to display marker points between 2 points. I use KML data from Google Maps and then parse it to display the markers.
http://www.sandboxm.com/jquery-and-google-maps/

The final demo is here: http://www.sandboxm.com/examples/DirectionsGmapJQuery.html

Thanks once again!
M

#41. Porto de Galinhas on June 29, 2009

Thanks for the explanation, I was looking for a Jquery solution to this on my maps. I found some good tutorials on how to do it on Javascript but this is just better. Thanks again.

#42. Weblover on June 30, 2009

Thank you very much for your useful jQuery Google Map tutorial and clear explanation.
I arrive your page when I Google with this keyword combinations “showing google maps in jquery”.
Your page is at the first. I get the right place. :)
Your tutorial save me (as well as all others).
Thanks again.

#43. Henry on June 30, 2009

Is there any way to do this with a saved google map?

#44. Suzy on July 01, 2009

Great tutorial! I’d like to try this however before I start I’m wondering if it’s possible to use custom marker icons rather than the default red ones? such as in this Google tutorial –
http://code.google.com/apis/maps/articles/customicons.html

If so it would be great!

#45. Tony on July 02, 2009

suzy:

Before you create your marker, create an icon. Then in the “new GMarker” add the icon you just created…

var icon = new GIcon();

icon.image = "http://www.mysite.com/images/marker_icon.png";

icon.iconSize = new GSize(45, 48);

icon.iconAnchor = new GPoint(8, 42);

icon.infoWindowAnchor = new GPoint(43, 6);                        

                                                    

var marker = new GMarker(point, icon);

That’s all there is to it. You can also create a separate shadow image as an attribute of the icon.

Hope that helps.

#46. Suzy on July 04, 2009

Great! thanks for the reply, I’ll try this out!

#47. Paul on July 05, 2009

Has anyone managed to get the hover state for the links to work in IE? I’ve tried adding the csshover.htc file but this doesn’t work.

Thanks
Paul

Also Suzy I found this great for generating markers
http://www.powerhut.co.uk/googlemaps/custom_markers.php

#48. Your name on July 06, 2009

Very Many Thanks bro! it is usefully!

#49. Jeff Goldenson on July 20, 2009

Marc and List –
First off thanks. This is great.

I was wondering if anybody has added zoom-in / zoom-out to this push button navigation? I’m going to be working with a large custom map and was curious there’s a way include a zoom out from current point, then pan normally at the higher elevation; then zoom in to the new point. A pull-out/push in sort of thing.

Granted this is tile intensive but….suggestions?

#50. TuVinhSoft on July 22, 2009

This is truly great tutorial. I can easy add Google Map to my website. Thanks for sharing.

#51. Tom H on July 30, 2009

Thanks so much for this excellent and detailed tutorial!

#52. Pasi Hietanen on August 07, 2009

You really know how to write a tutorial. Thank you. This is is very useful.

#53. Atea Webdevelopment on August 26, 2009

Thanks, very usefull and simple example, and these boxes are way more flexible than the google maps infoboxes. I got it to work on mouseover/out.

#54. Tom on August 28, 2009

Hi,
Brilliant tutorial thanks, really well written and easy to follow! Now I’m going to go and get an API key to have a play!
Thanks,
Tom

#55. Cyber Valdez on September 04, 2009

Awesome! this helps me a lot!

#56. chandler on September 05, 2009

Hi,
Brilliant tutorial , really well written and easy to follow! Now I’m going to go and get an API key to have a play!

Thanks Marc Grabanski,

chandler

#57. bUrAK on September 06, 2009

Great tutorial. clean and simple yet very effective. Much thanx

#58. Dee on September 11, 2009

Good tutorial. Can this work in Adobe air (html /ajax)?

#59. Roy Prawira on September 15, 2009

Such a good tutorial Marc, thanks for your effort …

I need something to ask about the pane options. You are using G_MAP_FLOAT_SHADOW_PANE as a default pane in your tutorial. In my case, I should create form inside info window (which is using your method, in this tutorial), since I need the info window appear on top of all layer (to make the click/focus events work on my form) so I change pane option to G_MAP_FLOAT_PANE because that’s the highest layer AFAIK.

When we click the map, the map should create a new marker (done and no problem) and the info window that contains the form is open. But when I try to click a button or fill the form, the info window didn’t react anything to my event and the map added a new marker instead of react to the form event.

Do you have any suggestion about this, and sorry could not give you a code because the code running on my local and a little bit bulk to copy paste in here :)

Thanks in advance Marc

#60. запознанства on September 18, 2009

That is good code..thanks and cheers!:)

#61. Briana T on September 24, 2009

I don’t leave alot of comments as I navigate around the web, but everyone once in a while you run into a tutorial that makes you stop and say, “Great Job!” and “Thank You!”. This is one of those for sure. Very nice work. Much appreciated, Mark ;-)

#62. Brian on September 30, 2009

Very good Toturial to begin, thanks!!!

#63. JJJ2 on October 14, 2009

Hi guys..is it possible to modify the current script so that I can mouseover thumbnails & have the GoogleMap Marker automatically reposition ?

Thanks.

#64. baddot on October 20, 2009

hi can i know how do i add address ?

#65. Mohamed on October 20, 2009

I Just want to say thank you.

#66. nicolas on October 22, 2009

I can really use this tutorial for my new university project, thx a lot.

#67. WordPress on November 07, 2009

Great article, very helpfull, Thanks!

#68. الشله on November 15, 2009

Hello .. Very beautiful and gorgeous ..
That’s what I was looking for.
Thank you very much

#69. anon on November 15, 2009

very clear explanation of how to use google maps with jquery – thank you – i only wish other technical writers were are clear as you are – thanks again!

#70. Marc Friederich on November 24, 2009

Nice tutorial.
Did you find some improvements with API v3 ? I still need v2 for some project like own map layer integration and switching to euclidian projection. Will be interesting to adapt this article with API v3. yes ? Thank’s anyway for sharing.

#71. Jeff Seaman on November 30, 2009

Thank you very much for the tutorial. Extremely straightforward and helpful.

#72. noelferreira on December 02, 2009

Hi guys.

First of all thanks for the great tutorial.
I managed to put everything working just as i want in all browsers but not in IE 6/7/… versions.
When cliclink in the marks nothing happens. The script stops and i don’t know hot to debug using IE.

Please check it here:

http://www.amena.tcpnsa.com/Amena/Localizacao

or here:

http://www.amena.tcpnsa.com/Associados-e-Profissionais

Any help would be appreciated.

Thanks in advance. And again … congratulations on the great job you have done!

noel

#73. John on December 03, 2009

Great tutorial on setting up a map using the API… man that thing can be frustrating at time. I really like/appreciate the work you put into this.

Cheers!

#74. Tevez322 on December 08, 2009

Can javascript be invoked inside the info window content using this approach?
Coz as we know in the standart GMaps api openInfoWindowHTML, javascript is not allowed.

#75. Marc Grabanski on December 08, 2009

Yes, JavaScript can be invoked from an infowindow in this method because all we are doing is injecting straight HTML inside the window.

#76. Tevez322 on December 09, 2009

Cool! Then this solves the limitation of google’s openInfoWindowHTML not allowing javascript inside.

#77. Shawn on December 28, 2009

I have created a jQuery plugin for Google Maps. Check it out here: http://www.mayzes.org/googlemaps.jquery.html. :)

#78. Your name on January 17, 2010

Hello Friend !

i want to create map like this

http://aredesforgirls.com.br/ ( Click on the “localizao” Button )

Hope you ’ll find it.

Thanks with regards
Yash Mistrey

#79. Elemental - web and mobile solutions on January 26, 2010

Thanks for the awesome tutorial. Loving Jquery and google maps!

keep the good working flowing!

#80. ziza on January 30, 2010

JQuery is great script

#81. Roger on February 07, 2010

Thanks Marc, this was very useful!

Kim – and anyone else who is wondering why the message doesn’t appear when you click the marker a second time – it’s because the function assigned to var moveEnd is attached to the GMaps “moveEnd” event, and this event only fires if the map actually has to pan. The second time you click the marker the map doesn’t have to mover anywhere, so the message is not faded in.

You can fix this by removing these lines from the finished code:
var moveEnd = GEvent.addListener(map, “moveend”, function(){
…[leave the content here!]…
GEvent.removeListener(moveEnd);
});

The downside is that the message will appear before the map finishes panning to the marker location – but if you move the line
map.panTo(marker.getLatLng());
to the top of the displayPoint function then this is barely noticeable.

#82. Darryl on February 10, 2010

great tutorial!

Is there any way of making a clickable link inside #message? I have tried, but when there is a marker under it, it selects this instead of the link

thanks

#83. Steve on February 12, 2010

I like it a lot. JQUERY really is the nuts.

#84. communicat on February 17, 2010

This is the way step-by-step tutorials should be written!
Keep posting!

#85. Jeremy Coulson on February 18, 2010

Hey, this looks like it’s EXACTLY what I need to knock out a project fast at work. I have a small problem, however. I have gotten an API key from Google, but every time I put it in, I’m told I need a new one. So, I go get a new one. Of course, it gives me the same one. What’s going on?

#86. Lorenz on February 19, 2010

Thanx man..really informative!!

#87. James on February 19, 2010

This comment is for Jeremy Coulson. I just ran into this issue. It is probably because you have your map KEY in QUOTES. Do not put any quotes around the map key!

#88. japboy on February 24, 2010

Thanks for sharing!

#89. William Yates on February 26, 2010

cool example

#90. Gabriel on February 26, 2010

Just what I needed !! Thanks.

#91. pabx panasonic on March 02, 2010

very nice thank’s :)

#92. Steve on March 17, 2010

Is it possible to add the default Map zoom controls back in? So users dont have to guess that double-click zooms the map.

#93. faiz on March 18, 2010

hi dear,
this is really a nice tutorial
I am not expert in all these programming.
but I am trying to do some thing, in which I need help
I want to show just 2 location and the pointer show only that locations.
1 location is in Canada and other is USA.
so can you tell me how can I do this….

#94. Reklam on March 18, 2010

Thanks for this great article. It was very heplfull for me.

#95. Jonas on March 23, 2010

Wanted to second Tim’s question about how to handle two points with the same co-ordinates. How do you check for duplicate points and then adjust the position on the map so they both show up? By the way, I work out of MInneapolis, nice to see a great article out of there. =)

#96. Alex on March 26, 2010

Like Steve, and a couple others, I’m wondering about how I would go about adding the usual zoom with the scroll wheel, or at least the old school zoom buttons. Thanks for a very useful tutorial. Cheers.

#97. Darren on April 06, 2010

I really liked this article. I have been working on a jQuery plugin that might be helpful to others reading this blog.

It allows you to easily get a map on your site, manage markers, custom icons, sidebars…. ect.

http://www.blocsoft.com/bmap/

Darren

#98. Werbeagentur Augsburg on April 07, 2010

Wow, nice tutorial.
Google Maps is a good way to enhance webpages.

@Darran – your plugin looks really helpful, i try it the next days

#99. Peta NTT on April 15, 2010

Thanks for this article and i want to practice in my web

#100. PunitRaizada on April 16, 2010

Thanks a Million… this is just what i was looking for.

#101. candra on April 19, 2010

Wow…. finally i Get what i want… thank a lot

#102. Mehboob Bangladeshi on April 20, 2010

Marc thank you very much for your excellent publication. Good starting for beginners. Your hard work is highly appreciating ………

Brain Breeds

#103. Eric on April 23, 2010

Your link is currently not working? View Final ;)

#104. chris on April 25, 2010

Can I add my own map to the API?
A picture, for example.
Thanks.

#105. Marc Grabanski on April 25, 2010

@chris: that is the entire point of the article. To be able to put pure HTML into the #message.

#106. Mehboob Bangladeshi on May 04, 2010

Marc my Man I have a situation to discuss with you. I am developing an application. I have pointed a few locals here in my city Dhaka. However I do not want to provide access to this map in public. It should be protected such that whoever wants to access the map point must provide a password so that only concerned person could point out the locations. Is this goal achievable using Google Map API? I am trying to study the basic concepts of Google map.

If I want to learn the ins and outs of Google Map could you tell me what would a good starting point?

#107. Marc Grabanski on May 05, 2010

Start learning Google Maps API with their examples.

#108. Harsha M V on May 11, 2010

Thanks for this amazing tutorials. now i can play around and implement it with ease.

#109. miguel on May 13, 2010

Thanks for the tutorial! it was a great way to get started with the google map api

#110. Nicholas on May 14, 2010

Everything I wanted. Thanks so much!

#111. Alex Mavity on June 19, 2010

This is an excellent tutorial to Google Map, I found much in there i was not even sure how to use, will come in very handy thanks for sharing.

#112. Steve on June 19, 2010

I am with everyone else, this makes for an excellent introduction, top stuff.

#113. Andy on July 11, 2010

Thanks for the Google Map Tutorial, as steve stated, makes dfor an excellent starting point, will be checking it out.

#114. Colin on July 22, 2010

Is it possible to trigger one of the messages outside the generated links?

Like in a post or something where id like to manually put a link.

Great tutorial btw.

#115. Emerson Lackey on August 04, 2010

Would be nice to see this adapted to the new v3 API of Google maps. I’m working on some integration right now and having some issues…

#116. Joe on August 06, 2010

Excellent tutorial thank you so much, I know it’s stupid question to ask but I am trying to align the message box on top of the markers not the bottom.
I will appreciate any help.

Many thanks

#117. Mart on August 10, 2010

Thanks v.much for this useful information. I love the fact you can now have full control over the window rather use the standard google maps infoWindow in the form of your custom message :D

Just wanted to ask one question, im having issues with being able to select the text in the custom message box? Ive disabled the following when open:

map.disableDragging();
map.disableDoubleClickZoom()

Im stumped to know what the issue is. Im loading a directions form into the custom message box with the aid of jquery and tabs(as there are other features too) but im unable to use the input because of this issue.

Any suggestion would be really appreciated. Thanks!

#118. Arkadi on August 23, 2010

This actually IS the most useful online tutorial on how to use the Google Maps. Exactly what I was looking for to understand how it works in general. Was able to understand how much time it takes to make a project right away.

Thanks for the post! =)

#119. Joe on August 27, 2010

Hi mark and thanks for a great tutorial,

i have been trying to get fancybox working with google maps but not been able to do that, what i want i basically trigger a fancybox fram that should popup above the map when a link insie a infowindow is clicked, would appreciate if any one could advice on this area.

thanks in advance

/Joe

#120. Joesy on August 28, 2010

Hi,

Thanks for your great article. It helps me a lot!

However, I have a question and would you please so kind to provide some help?

I would like to make something like this example AND showing the message ‘box’ to each marker: so each marker will have one message and all the messages are shown after loading.

Thanks in advance.

#121. Czarina on September 15, 2010

Hello! Great tutorial. I am new to this and I can’t get my head around designating each point to a specific location. Also, I need to customise each point with their own “message”.

Basically, I need a map to show 5 locations and show opening hours/phone numbers in their messages. Please help!

#122. Koty Yell on September 20, 2010

This tutorial was fantastic. I greatly appreciate it.

Maybe you can throw some advice my way about scrolling behavior in the message overlays?

I’ve got a pretty long list of images that appear in any give marker’s overlay window. I wanted this to be scrollable, so I used css to set a max-height and overflow-y to auto.

I can click and scroll through the window just fine, but once I release my mouse button, the map will move with my mouse, as if I was clicking and holding on the map. It seems clicking on the scrollbar is also registering on the map… any advice?

Thanks!

#123. Mario on September 26, 2010

Update for API v3
This is not a cut and paste update for GMAPS API V3, but is lifted from my code:

// To get to the pixel coordinates we now need to get the projection instance which we can get through an overlay:

this.emptyoverlay = new google.maps.OverlayView();

this.emptyoverlay.draw = function() {};

this.emptyoverlay.setMap(this.mapHandler);

// I had some trouble with the coordinates, possibly because I no longer have

// $(XXX).appendTo(

// this.mapHandler.getPane(G_MAP_FLOAT_SHADOW_PANE));

// So computing absolute coordinates here:

// ($(‘#map’) is the Google Map ‘div’.

var absPos  = this.emptyoverlay.getProjection().fromLatLngToContainerPixel(position);

var containerPos = $(‘#map’).offset();

absPos.x += containerPos.left;

absPos.y += containerPos.top;

return absPos;
#124. Bobbi on September 29, 2010

I was just curious… Is there a 508 Compliant/Accessible version of this? I design for several clients who require accessibility and from what I could tell (and tested on the demo) it isn’t accessible.

Outside of that… awesome work!

#125. jack on October 08, 2010

Hi

I need small help regarding this.Could anyone please explain how can i mark the nearby desired locations to a given address in the google map by using jquery. For e.g i am searching for a pharmacy called Redwood Pharmacy in the google map. so after i found the redwood pharamcy i will click on the ballon manually and it will ask for a optin called SearchNearby. So when i give pharmacies google map will show me all the pharmacies that are nearby the given location. So i want to acheive this programatically. I will give the exact address in one text box and pharmacies(for e.g) in another text box of my web application so it should show me the given address and also all the near by pharmacies automatically at one single button click. I know this is little bit complex but my client is asking me for this requirement. Any one please please please please help me in this context. Thanks all in advance

#126. bob on October 14, 2010

So, I can Google Earth integration with the following code, but the placemark tabs will not work in GE mode, only in satellite and map. Any ideas on how to transfer this capability over to GE?

#127. Thorarinn on October 15, 2010

Hello.
Great tutorial. I have been using it on a project where the plan is to display data from public measurement sites on google maps.

I have everything working except for one small problem. The message window that appears when you click on a marker, it is not a real overlay over the google map. That is to say that if markers are behind the message window they can still be clicked. This is a problem since I am putting links in the message window, the user will click on them and be expecting a certain behavior but instead the marker behind the window gets clicked and the message window for it is shown.

This can be seen in the final demo be zooming out, the google markers are active through the message window.

Is there a way to fix this so that google markers can not be clicked through the message window?

#128. AP Design on October 21, 2010

Google Maps JavaScript API V2 Reference

Enabled Scrolling – Add

map.enableScrollWheelZoom();

To JS.

Hope this helps.

#129. Eli on October 26, 2010

I am trying to do something similar, but instead of loading the markers from within the same javascript i would like to load them from a list of objects which have a GeoPt property which enables me to get the lat and long in floats, the code goes like this:

var auxLat = Number (<%p.getGeoPt().getLatitude();%>);
var auxLong = Number (<%p.getGeoPt().getLongitude();%>);
var pos = new LatLng (auxLat,auxLong);

The values are saved, because when i write

<%= p.getGeoPt().getLatitude()%> it prints me on the screen the latitude value.

Does anybody knows what’s wrong and how can i fix it? Sorry if I didn’t provide a lot of info, i am just starting in world of programming and phorum.

Thanks a lot.

#130. Eli on October 26, 2010

I am trying to do something similar, but instead of loading the markers from within the same javascript i would like to load them from a list of objects which have a GeoPt property which enables me to get the lat and long in floats, the code goes like this:

var auxLat = Number (<%p.getGeoPt().getLatitude();%>);
var auxLong = Number (<%p.getGeoPt().getLongitude();%>);
var pos = new LatLng (auxLat,auxLong);

The values are saved, because when i write

<%= p.getGeoPt().getLatitude()%> it prints me on the screen the latitude value.

Does anybody knows what’s wrong and how can i fix it? Sorry if I didn’t provide a lot of info, i am just starting in world of programming and phorum.

Thanks a lot.

#131. mike on October 27, 2010

i am looking for real state mapping solution do some budy have an idea.

#132. Imel on November 11, 2010

Thanks for a great tutorial.
Is there any way to use jquery to add a gpx track overlay onto a google map?

#133. ComputerTutorials on November 27, 2010

A very valuable resource. Thanks.

#134. buzz on December 02, 2010

Such a great tutorial! Thanks!

#135. Evans on December 02, 2010

Hi there
such a great tutorial, also i wish to ask to you implement a google map such that it auto panto from one marker to another, such as like at this site: http://www.thehotlist.com. i will love to read on this thanks

#136. Lennarth Anaya on December 12, 2010

Thank you very much for the tutorial.

I’d like to provide my experience to implement this example in v3:

I created my custom overlay

function SingleElementOverlay(options, overlayedObject, point) {

    this.setValues(options);

    this.div_ = overlayedObject;

    this.div_point_ = point;

};



SingleElementOverlay.prototype = new google.maps.OverlayView();



SingleElementOverlay.prototype.onAdd = function() {

    var pane = this.getPanes().overlayLayer;

    pane.appendChild(this.div_);

        

    // This is how to get pixels

    var curOffset = this.getProjection().fromLatLngToDivPixel(this.div_point_);

        

    $(this.div_).fadeIn().css({ top: (curOffset.y), left: (curOffset.x) } );

}



SingleElementOverlay.prototype.onRemove = function() {

    this.div_.parentNode.removeChild(this.div_);

}

SingleElementOverlay.prototype.draw = function() {}

Each time I want to refresh marker of interest and it’s label position:

// "idel" is the equivalent in v3 to "moveend" in v2:

var moveEnd = google.maps.event.addListener(map, "idle" , function() {

    var messageOverlay = new SingleElementOverlay( { map: map }, $("#message")[0], curMarker.getPosition() );

    messageOverlay.draw();

        

    google.maps.event.removeListener(moveEnd);

});

I hope it serves sombody, I would be glad to reply to any doubt.

#137. salman ansari on December 16, 2010

thax a lot…..it will helps me in my project

#138. Opencart on December 18, 2010

This is way cool. Thanks so much for the tips. Google should make this easier though.

#139. Online classes on December 19, 2010

Its really cool way of writing tops . Its much more easy now.

#140. ved on January 04, 2011

Dear Lennarth Anaya

I am glad to see your code however can you please guide me how can i impliment this or it would be greate help if you can send code including jquey plugin as i am unable to download it here.

Many thanks
Ved

#141. JB on January 08, 2011

Here is another google map wrapper : GMAP3 (use the google map API v3)

available on :

http://night-coder.com/jquery-plugin-gmap3.html
http://plugins.jquery.com/project/gmap3

#142. eugene on January 11, 2011

hi i have a quick question.

How do i hight the right list box eg.( if i click on marker1 point 1 will be hightlighted on the right list textbox) when i click on the marker ?

#143. Phillip on January 14, 2011

Very nice indeed! I did not read everyone’s thread but I wonder if my following question was asked or addressed. Within the “container” you created separate sections or as Google calls them, “panels” of the map that are masked to reside in the containers dimensions while the rest of the map is still accessable by panning using “panTo” and Google’s API. However, when I pan to the left or right or top or bottom and than click one of the links to scroll back, Ari’s ScrollTo jQuery plugin does not work. It seems to only work within the visible dimensions. How can you tweak it where a user can “pan” anywhere (as they can today in your demo) and smoothly scroll back like within your demo? Maybe LocalScroll.js needs to be used? I’m not sure, but maybe you know? It would make this demo that much more usable as markup for an interactive blog, site or section. Thank you and again, GREAT DEMO!

#144. Damir on January 22, 2011

How we can use OpenStreetMap.org instead google data? Can you make tutorial like this for OpenLayer and OSM?

#145. Hussain on January 28, 2011

How can we add a link similar to google embedded map to view map in larger window ?

#146. Melissa on February 11, 2011

I would like the map to load with no markers, and then the markers show/hide when clicked (or a checkbox next to them is clicked). Is that possible with this code? I assume I can load the map with no markers defined, and I’ll be pulling a list of marker details in the right column with php/mysql, but what will I need to get clicking on those right column items to add a marker to the map? Thank you!

#147. Robin Awal Web Dev on February 13, 2011

This tutorial have helped me alot to integrate Google Map on one of my site. I have never worked on it before.

#148. Anish on March 03, 2011

sir
I am Anish. i take vehicle treaking project. let and long value comes from DB and its value pass through google map, my problem its not to show proparly. and also want to drow polylines…..
please help me…. also send source code ….. language:java- jsp

#149. Kiran on March 18, 2011

It was written in 2009 March and I just got up . Thanks for this wonderful tutorial . I am totally new to this world . Have few questions , Could you please in your free time ? Excuse me if they are silly

1) I am putting 2000 markers around the world , It is taking bit amount of time . Is there any tricks to make it faster
2) is it possible to see the whole world map initially , instead of centralizing to one location .
3) is there any I can get Zoom in and zoom out controls on map ? Google map ZOOM in and ZOOM Out controls

#150. Kiran on March 18, 2011

got the answer for my second question mentioned above .. Thank you and other two questions still pending
1) I am putting 2000 markers around the world , It is taking bit amount of time . Is there any tricks to make it faster
3) is there any I can get Zoom in and zoom out controls on map ? Google map ZOOM in and ZOOM Out controls

#151. Marc Grabanski on March 18, 2011

1) look up “cluster marker” which represents globs of markers as clusters. Try to only render markers in the current viewport and then do an ajax request on pan to get more markers.
3) Zoom in and out controls are standard control overlays, not sure what your issue is here.

#152. Justin Bowers on March 20, 2011

Happy belated, written 2 years ago! I must first give credit where credit is due… @Marc: Impressed with your dedication to the responses I see here. Hi-5! Anyhow, I do my best to find an answer to any challenge I have before asking for help, but I’ve been coming here for weeks now and still having a couple I was hoping would be easy for someone to answer, as well as be a resource for future visitors (urls are temp and will be moved to davetribble.com once complete).

1) I love my Google Chrome and things looked great until I went to Firefox to inspect with Firebug to see the map isn’t populating. IE as well.
http://emeraldcityliving.com/schools

2) I’m having a hard time understanding where to edit and create more of the clickable points. I added the ul, then create a li for each but obviously missing something since the google points are loading. My thoughts were to include the lat and long within the () of the google sample but the northwest, longspan, yadda yadda is throwing me off.

3) I’m going to be making the markers polygon shapes of the school districts then looking forward to using the search box you have in your 2nd tutorial for people to put in an address of interest to see what district a house would fall in. Wondering if that will affect my 2nd question but pretty sure I can figure out if 1 and 2 were easy to answer.

I hope my questions/statements make sense and are easy fixes. I’m very much looking forward to using on a personal site once mastered. I appreciate all the time put into this so for. thx

SOME NOTES: Using Genesis Framework by StudioPress. Inserted head script in head section within the framework settings. Called to initiate in the section within the framework for footer and body. Used custom sidebar page widget to include unordered list to keep consistency in layout.

#153. Kiran on March 22, 2011

Thanks Marc for your immediate response . I am sorry for taking time to thank you and to respond to you .

for my second question , I don’t see controls on my browser even for the demo link you gave

http://assets.marcgrabanski.com/resources/jquery-google-maps/tutorial-part1.html

I tried on IE8 , Firefox 3.6.15 and on chrome , I don’t find controls

Thought it is a browser problem , but on other sites foe example
http://chrismckee.co.uk/google-maps-jquery-plugin-jquery-fugmap/examples-continued-for-google-maps-jquery-plugin/
I see controls ..

Thanks again for telling about cluster markers

#154. Artem on March 24, 2011

I have xml file with some data, if i do that:
jQuery.get("new.xml", {}, function (data) { jQuery(data).find("marker").each(function () { var marker = jQuery(this); var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")), parseFloat(marker.attr("lng"))); var marker = new google.maps.Marker({ position: latlng, map: map }); }); });

all works i see all markers that was stored in xml, but if i want to use clustering and write like this:

@var markerClusterer = null;
var map = null;
var markers = [];
jQuery.get(“new.xml”, {}, function (data) {
jQuery(data).find(“marker”).each(function () {
var marker = jQuery(this);
var latLng = new google.maps.LatLng(parseFloat(marker.attr(“lat”)),
parseFloat(marker.attr(“lng”)));

var marker = new google.maps.Marker({
position: latLng,
});
markers.push(marker);
});
});
markerClusterer = new MarkerClusterer(map, markers);@

nothig happens, i see only the map, without clusters, i think that problem there:
markers.push(marker);

#155. Michael REMY on March 28, 2011

nice tutorial !
but it would be ever better to update it with googlemap 3 (not 2.x)

#156. Thomas on March 30, 2011

Hi,
Latest version of gmap3 has been published on http://gmap3.net
Th.

#157. Maccoutinho on April 18, 2011

Hello everyone,

I’m working on a map that gets its points from a Fusion Table and I was wondering if anyone can give me some pointers on how I can adapt this code to get a list of all the displayed points.

I’m also using a search engine that I would like to integrate so that when you do a search the list gets updated with the correspondent points. You can check it out at: http://www.ciclofragmentos.com/museuvirtual/

Thank you very much!

MACC

#158. Dustin on April 26, 2011

How do you change the 10 random points to your own points?

#159. Nisar Ahmad on April 29, 2011

This article is excellent.

#160. Day Milovich on May 04, 2011

this is really awesome. i hope this will be applied on my map of tourism in indonesia, my next project. thanks!

#161. john on May 11, 2011

Hi everyone,

I used this example.I was awesome.Thanks for this article….

But i want that when ever we are passing the longitude and latitude it should come from my jsp page and iterate the values inside the java script to get the places…..

can anyone give me quick response……..i try to do this for past one week……..

Thanks in advance……..

You can also mail me in dyuti.ranjan@rnftechnologies.com

#162. Amit on May 22, 2011

Hi
Thanks for the excellent article. It helped me a lot while showing my GPS traces in website (http://www.amitdutta.net/gpsTraces.php). Now, As I started moving from Google map v2 to v3, I am facing an issue with: $(“#message”).appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
I am having hard times to find an equivalent of this in Google map version 3. Please let me know if someone has done this in v3. Thanks in advance…

#163. Max on May 22, 2011

At Erik White from comment #30:

How did you realise that functionality of “Cycling of markers on load”? I am very much intesting in that, but can’t figure it out.

Thanks for any respons!

#164. Aki on June 01, 2011

Marc,
thank you for the great script. I am wondering if you could help me with a small change to it. I am trying to add image to the list before the text. I added $(“#map_list li”).prepend(‘’ + (i + 1) + ‘.png">’); inside of the $(markers).each(function(i,marker){} function but this gives me all of the icons for each list item. Any sueggestions?

#165. Leslie Yosef on June 06, 2011

Thank you. I’ll think of you the next time I need a map of 10 random locations!

#166. Roman on June 07, 2011

Thanks. This is awesome script.

#167. Nikos Stylianou on June 19, 2011

Thanks for sharing, I’ve just implemented your technique in a drupal style rate and review system which uses ajax to display the data on the map, the drupal gmap module doesn’t work with ajax which is why your technique was very helpful to me, and it worked nicely with a bit of tweaking. Only thing I need to work out now is, how to zoom to fit all my markers on one map, and then center the map.

#168. Nikos Stylianou on June 19, 2011

And here is how I fitted all my markers onto one map

var bounds = new GLatLngBounds;
bounds.extend(new GLatLng(minLat, minLong));
bounds.extend(new GLatLng(maxLat, maxLong));
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

Leave a comment

Comment in textile images by gravatar