Marc Grabanski

Web Development and Business

Connect on Twitter

© 2016

jQuery and Google Maps Tutorial: #1 Basics

in JavaScript & jQuery

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>#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; 
}
[/code]</p>
 
<p>Note that I added a markers array to the example code. This will be used in the next step.</p>
 
<h2>Step #5: Loop Through Markers and Add Basic Click Event to Markers</h2>
 
<p>In this step, we start to use jQuery and Google Maps together. We want to be careful to use Google Map’s built-in <span class="caps">API</span> as much as possible, leaving jQuery only for what it is best at.</p>
 
<p><object width="462" height="264">
<param value="http://marcgrabanski.com/jing/google-maps-tutorial-pan.swf" name="movie" />
<param value="true" name="allowFullScreen" />
<param value="always" name="allowscriptaccess" /><embed width="462" height="264" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash" src="http://marcgrabanski.com/jing/google-maps-tutorial-pan.swf"></embed></object></p>
 
<p>Let’s take that array of markers and loop through them with <a href="http://docs.jquery.com/Utilities/jQuery.each">jQuery’s each method</a>.</p>
 
<p>[code lang="js"]
$(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>
#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

Comments

  1. 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.

  5. 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)!

  7. 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. 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

  10. 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?

  12. 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. What if you have duplicate coordinates that are the same; can you create one marker with multiple details in your custom description.

  15. @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.

  16. 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?

  17. 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.

  19. 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!

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

  22. 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

    //assumption 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??

  23. 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?

  24. 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

  25. 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

  26. 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. 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?

  32. 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.

  34. 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.

  36. 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.

  37. 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.

  40. 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.

  44. 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?

  49. 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

  51. 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

  54. 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

  55. 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 😉

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

    Thanks.

  62. 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!

  63. 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.

  65. 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

  66. 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!

  67. 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.

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

  74. 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.

  75. 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

  78. 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?

  80. 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!

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

  86. 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….

  88. 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. =)

  89. 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.

  99. 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?

  104. 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.

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

  107. 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.

  109. 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

  110. 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 😀

    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!

  111. 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! =)

  112. 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

  113. 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.

  114. 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!

  115. 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!

  116. 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;

  117. 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!

  118. 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

  119. 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?

  120. 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?

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

  123. 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.

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

  129. 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.

  133. 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

  135. 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 ?

  136. 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!

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

  139. 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!

  141. 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

  142. 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

  143. 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

  144. 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.

  145. 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.

  146. 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

  147. 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);

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

  150. 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

  154. 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…

  155. 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!

  156. 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(’‘); inside of the $(markers).each(function(i,marker){} function but this gives me all of the icons for each list item. Any sueggestions?

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

  159. 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.

  160. 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));

  161. Thanks for the tutorial.

    Guys I found one more tutorial http://vigetlabs.github.com/jmapping/examples/basic.html. Here’s the link with more details http://vigetlabs.github.com/jmapping/usage.html

    I included all dependencies and pasted the two scripts in the above document into my source code exactly as printed. The text appears, but no map. Am I missing an obvious step here? Do I need an API key?

    Have no clue what’s going on.. Please help !!!

    U can mail me at samikshasingh.singh@gmail.com

  163. Hi, ty for a great great tutorial! I have a question too; how do i create say 10 markers with specific positions, and not generated at random places everytime i refresh the page?

    Ty in advance!/Lucas

  164. Hi, thank you for showing this example.

    I have the same Question like my buddy before 😉 Would be very cool if you could demontrate that. 10 specific locations with specific text. I´m not that fit in programming jquery and i think others would fint this very usefull too.

    Thank you in advance
    Joe

  165. Is there a downloadable version of the code? I find that putting together little pieces always results in mistakes (for me!!). For example, I have no idea where to put this…

    <ul id=“list”></ul>

  167. Thank you very much, same question :) specific location instead of random ? :) please, thx in advance

  168. thanks for the lesson
    I have a small problem tell me please how to add each marker for each different message
    now I have everywhere the same

    <script>
$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
  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());
  }
});
</script> 
<style type="text/css" media="screen"> 
  #map { float:left; width:500px; height:500px; }
  #message { position:absolute; padding:10px; background:#555; color:#fff; width:95px; }
  #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> 
</head> 
<body> 
  <div id="map"></div> 
  <ul id="list"></ul>  
    <div id="message" style="display:none;"> 
      ?????
    </div>
</body>

  170. really like your mashup with fade, is it possible to do a fade on an infobox, if so how do I go about referencing the elements in jquery? Thanks.

  172. I have been looking for a nice and quick way to add gmap into a lightbox and this has pointed me in the right direction! Thanks!

  173. Hi, do you have anyway to add an event in the infowindow such that when i click(label or button) on that event, it will update my database?

  175. How can I show data from Database? I have a database that stores latitude and longitude of a house. I am using C# and SQL Server. How can I integrate this map with my asp.net web application.

  176. Ihave learnt quite a lot from the tutorial.
    Using the same example how can I move the marker around by just adding one marker at a time.

  178. Nice tutorial, very clear and simple. in your example you use a code to set random marker points. How can i set the markers in the locations that i want. And how would i code that. Also can each marker be set with its own custom message?
    Thanks

  179. Hi,
    Do you have the complete code for the 2nd part of this tutorial all together with the first part…I downloaded it and tried to get it to work…no luck…spent way too many hours at this…I am a noob at this..please post the final code if possible…would greatly appreciate it.
    thanks
    jim

  181. This can be really a very good tutorial for Google maps. The images and the videos that you have shared are really cool. I have some problem with the coding part as when I tried for the first and second time, I got error but I don’t know what happened the 3rd time that I created the map successfully. Thanks for this informative share.

  183. Nice tutorial. How to use custom instead of random markers and how to create customized description text for each marker? Thanks

  187. Sir, can it be used for mysql too? this code plus mysql..? thanks..i would appreciate if you make one of these with mysql with dynamic data..

  189. can we show an weather update while we click the particular latitude and longtitude of an selected region. I tried, but there are separate api’s used by google for maps and weather. Help me …thanks

  193. Fine idea and fine results. But if you make a dobble click on test part in Google map, then I can replicate a little problem. Do it yourself, simply do watch it. Well , this script is from 2009, but I believe an improvement is an advantage!

  195. I’ve spent ages trying to update my site to use API V3 but must finally admit defeat. I got everything working except displaying the message div. The problem code is this:

    map.getPane(G_MAP_FLOAT_SHADOW_PANE)

    It seems there is no alternative for API V3. Googling suggests a lot of people having the same problem and I found several other people trying to update code that is obviously based on this tutorial. I’ve found posts from others that were trying to do this over a year ago and it is clear that they also gave up:
    http://stackoverflow.com/questions/10434339/google-maps-v2-to-v3-marker-click-overlay-not-working-jquery

    Shame. Would love to know if anyone finds a solution. Converting the rest of the code is fairly straight forward.