Roman Roman - 1 month ago 5
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


infoWindow.setContent(contentString);

infoWindow.open(map);
}


in my html:

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

max max
Answer

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.setContent($details[0]);
    infoWindow.open(map);
    infoWindow.$details = $details;
    return infoWindow;
}

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

Added:


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

$(document).ready(function(){
  console.log($('#details'));
});
Comments