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.

<ul id="list"></ul>

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

122 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!

Leave a comment

Comment in textile images by gravatar