Question

As the title states how can I with Google API 3 open Infowindow from divs outside google maps.

this is what I am doing today but this only working on the last div link and not every link

markerObj =  document.getElementById(markerId);
                   markerObj.onclick = function(){
                       google.maps.event.trigger(marker, 'click');
                   } 

Any clues?

Answer 1

I think to make this work you’d need to have an array of markers. Then you’d trigger the click on the exact marker you want (right now it’ll just do it on your last marker).

So, as you add markers to your map, append them into an array:

var markers = [];

var marker = new google.maps.Marker({   ... });

marker.addListener('click', function() {
    infowindow.setContent('blah blah');
    infowindow.open(map, this);
});

markers.push(marker);

Then on your divs, pass in an ID to work out which of the array you’re dealing with.

<div id="link0">1</div> <div id="link1">2</a> (JS arrays start at zero)

Then just a slight amend to your code:

markerObj =  document.getElementById(markerId);

// work out which number it is
var linkID = markerId.replace("link", "");

markerObj.onclick = function(){
    google.maps.event.trigger(markers[linkID], 'click');
}