Gmaps4rails - How to call infowindow marker outside from maps - ruby-on-rails

Question

I have used gmaps4rails before with success but this time i have a need that i cant figure out how to do it.
I have my builder working and generating my map_info partials, also, i am able to open every infowindow from markers by clicking inside the map.
What i need is to call the infowindow of a marker from a list. (onclick event inside a div for instance)
builder inside controller
#gmaps_markers = Gmaps4rails.build_markers(#partners) do |partner, marker|
marker.lat partner.latitude
marker.lng partner.longitude
marker.title partner.company
marker.json({:id => partner.id })
marker.infowindow render_to_string(partial: 'pages/partials/subscribe/map_info', locals: { partner: partner })
end
javascript markers + maps generator
handler = Gmaps.build('Google', {
markers: {
clusterer: {
gridSize: 10,
maxZoom: 15
}
}
});
handler.buildMap({
provider: {
disableDefaultUI: false
},
internal: {
id: 'gmaps'
}
},
function() {
markers = handler.addMarkers(#{
raw #gmaps_markers.to_json
});
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
handler.getMap().setZoom(8);
handler.map.centerOn;
}
);
Let me know if you need more details!
Thanks

Answer 1

The easiest option is to trigger the click event on the marker:
function openMarkerInfo(id) {
$.each(markers, function(index, marker) {
if (marker.id == id) {
google.maps.event.trigger(marker.getServiceObject(), 'click')
}
});
};
See working plunk here

Answer 2

You need to add id to marker
Change your map and markers generation js to
Gmaps.store = {}
handler = Gmaps.build('Google', {
markers: {
clusterer: {
gridSize: 10,
maxZoom: 15
}
}
});
handler.buildMap({
provider: {
disableDefaultUI: false
},
internal: {
id: 'gmaps'
}
},
function() {
Gmaps.store.markers = handler.addMarkers(#{
raw #gmaps_markers.to_json
});
handler.bounds.extendWith(Gmaps.store.markers);
handler.fitMapToBounds();
handler.getMap().setZoom(8);
handler.map.centerOn;
});
Then write js function
Gmaps.openMarkerInfo = function(id) {
$.each(Gmaps.store.markers, function() {
if (this.serviceObject.id == id) {
var infowindow = this.infowindow;
infowindow.open(Gmaps.map.map, marker.serviceObject);
}
});
}
Then add it to onclick of your list element
Gmaps.openMarkerInfo(1);

Answer 3

i found a solution. Take a look...
Javascript onclick function
openInfoWindow = function(id) {
$.each(Gmaps.store.markers, function() {
if (this.serviceObject.id == id) {
google.maps.event.trigger(this.getServiceObject(), 'click')
}
});
}
Javascript maps + markers generator
Gmaps.store = {}
Gmaps.store.handler = Gmaps.build('Google',
{
markers: {
clusterer: {
gridSize: 10, maxZoom:15
}
}
});
Gmaps.store.handler.buildMap({
provider: {
disableDefaultUI: false
},
internal: {
id: 'gmaps'
}
},
function(){
markers = #{raw #gmaps_markers.to_json};
Gmaps.store.markers = markers.map(function(m) {
marker = Gmaps.store.handler.addMarker(m);
marker.serviceObject.set('id', m.id);
return marker;
});
Gmaps.store.handler.bounds.extendWith(Gmaps.store.markers);
Gmaps.store.handler.fitMapToBounds();
}
);
And then, call onclick event.
openInfoWindow(id);
Working and no bugs so far...
:)