如何在谷歌地图信息窗口中放置一个 html div

Question

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>

Answer 1

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'));
});

Answer 2

I took the following approach on a recent class exercise.

First, I create the infowindow with default content pointing to a spinner graphic:

var infowindow = new google.maps.InfoWindow(
    { content: '<img class="spinner" src="images/loaderTransparent.gif">' }
);

The "spinner" class allows me to size and style the spinner with CSS. I should probably put the source URL there as well, come to think of it.

At the end of the HTML file containing the map, I have a hidden DIV which contains the content intended for the info window:

<div id="iw-content" style="display: none">
    <h3>This is my spiffy infowindow</h3>
</div>

And then on the "click" listener, I open the infowindow and set the content to the inner HTML of the hidden div (jQuery syntax shown):

google.maps.event.addListener(marker, 'click',
    function() {
        infowindow.open(map, marker);
        infowindow.setContent($("#iw-content").prop("innerHTML"));
    }
);

The innerHTML property query returns a string containing:

<h3>This is my spiffy infowindow</h3>

And that becomes the InfoWindow content which is displayed to the user as formatted text. I found this useful since it allows the content to be carried with the HTML file rather than as a string within the JavaScript. And you can have multiple content divs in the same HTML file to apply to different infowindows.

I tried using a jQuery .load() call from "# #iw-content" to a DIV established within the default infowindow content using the infowindow.open() completion callback, but couldn't get it to work. I think that was because it was grabbing the outerHTML, in effect, which includes the display:none attribute.

Answer 3

Just add the "text" to the EventListener of the marker @ the InfoWindow

var text = ['<div id="infotext">' "do something here" '</div>'].join('');

var marker = new google.maps.Marker({position: pos, map: map, icon: customIcons.marker});

google.maps.event.addListener(marker, "click", function() {
    if (infowindow) infowindow.close();     
    infowindow = new google.maps.InfoWindow({content: text});
    infowindow.open(map, marker);
});

best

M

Answer 4

I too was facing similar problem. Not sure, if it will help or make relevance? For me it got resolved by document.getElementById('').innerHTML.

    google.maps.event.addListener(marker, 'click', function(){
    marker.content = document.getElementById('infoWindow').innerHTML;
    infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
      infoWindow.open($scope.map, marker);
  });