Google Maps API - cannot click on a link in an infowindow
I've 开发者_如何学编程got a problem with InfoWindow in GoogleMaps API v3 in Javascript. I have successfully created an info window, I can set any content inside, but I want to put a hypertext link inside. It works fine, i put normally tag to the setContent() method and the link appears in the window correctly. Unfortunately, it is NOT clickable - it has a correct link attached to it, but when I click on it, nothing happens. When I click on it by right button and select "Open in new windows", it works just fine. Can anyone find out a problem here? I've got a code as simple as follows:
var bubble;
... some lines not related to the bubble ...
bubble = new google.maps.InfoWindow({
maxSize: new google.maps.Size(500,250)
});
... other not related lines...
then I trigger it in an event that creates markers (works fine for the markers):
bubble.setContent('<a href="http://www.google.com">LINK</a>');
google.maps.event.addListener(marker, 'click', function() {
bubble.open(map, marker)
});
where both "map" and "marker" are just fine.
I faced the same problem. I believe this is being caused because the infowindow content is dynamically inserted into the DOM as a div. I don't know why this exactly happens, but here is how I solved it:
- Use jQuery (I was already using this - if you use an alternative js lib, there may be equivalent solution(s) for the same)
- update the html links to also have a class defined (say class="infowindow_link")
Add a jQuery handler to capture the link and follow it
$(".infowindow_link").live('click', function(){ window.location.href=this.href; });
This 'live' call tracks changes to the DOM and attaches the listeners to any new links you insert. The window.location.href update is the normal behavior of following a link.
精彩评论