Roman Roman - 1 year ago 74
jQuery Question

How to place a html div in a google maps InfoWindow

I have a google maps application written in JavaScript. I click on an area in maps to create an InfoWindow.

In this info window I want to link a div from my html file. This is so that I can use jquery to add functions and events to the div.

in the InfoWindow, I would like the string 'details...' to appear, and when clicking on it, some function to execute. (for example a simple alert)

In my JS:

google.maps.event.addListener(ccg_area[j], 'click', showTB);
function showTB(event) {

var contentString = #details; //somehow I want to link this to details div


in my html:

<div id="map-canvas">
<div id="details">details...</div>

max max
Answer Source

You could use something like the following to get the contents from a given div:

* @return google.maps.InfoWindow
* @global $

function showTB(event) {
    // jQuery object containing the div
    var $details = $("#details");
    // $details[] is the actual DOM node
    infoWindow.$details = $details;
    return infoWindow;

// Delegate click events on links in div
infoWindow.$'click','a', function(){
  alert('You´re not going anywhere!');
  return false;


Make sure that your code runs when the DOM is ready. Otherwise your selector will return nil.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download