Auto Show Info Window of any Marker in Google Maps (was available in DMXzone)

[jellederijke]

Hi there fellow Wapplers,

So what I’m trying to accomplish here is auto show info window of any marker in the google maps component. I did find a tutorial on how to set it up in DMXzone, but it seems to have a different UI in Wappler:

Auto Show Info Window of any Marker in DMXzone Google Maps

Also this topic was previously opened, but no replies:

How to auto show Google Map Marker Info Window?

[Annotation%202019-11-12%20004255] I have tried the following steps on map ready without success: map.maps1.goToMarker(output_location.data.query_location[0].event_location_id);map.maps1.bounceMarker(output_location.data.query_location[0].event_location_id);map.maps1.showInfo(output_location.data.query_location[0].event_location_id) Demo site: http://d3mo.esy.es/map Note: Routing is enabled on the page and map is located within content page. Anything that I’ve missed? Let me know the proper…

I did find the proper div to css style the info window, which would be:

.gm-style .gm-style-iw-c {
}

Also I did notice some code in dmxGoogleMaps.js regarding showinfo, but not sure how to enable this by default (this file is hard to read!)

showInfo: function (e) { var t = this.findMarker(e); t && t.info && this.openInfoWindow(t, t.info) }

Does anyone have any ideas on how to auto show the info window?

Thanks!

[Teodor]

Hello,
Do you want to show the info of a specific marker on your map?

[jellederijke]

That is lighting fast, Teodor! No, not a specific marker. I mean to show every marker’s info on page load/default. On click I open up a modal with a data detail.

Styling the label box would work for me, as well. However I can’t seem to find a div for this.

[patrick]

The showInfo is an action that you can call on an event. You can use the ready event on the App and the choose the Show Info action from Google Maps. You have to pass the key/id of the marker that you want to show.

[jellederijke]

Thanks for the swift response. I have tried your suggested solution and I run into this:
I set the dynamic event for app ready and in this case I refer to marker with ID 1 (just as a test):

However, on page load the info does not auto show:

When I click the marker I do get to see the info:

Did I perhaps misinterpreted the way I should use the key/id of the marker?

How would you advice on selecting all markers? Do I select the ID column from the query that get’s the data for the markers? Or can I use * or something?

Thanks again for all the great help!

[patrick]

Are the markers dynamic? It is possible that they are not available on the ready event, then you have to look for an event when they are available, seems that you managed that with the page load event.

There is not a an action to show them all, you could do it by calling a flow action and call the show info for each id within a repeater.

[jellederijke]

Yes the markers are coming from a serverconnect > database query. I have also tried a dynamic event on serverconnect succes status, but the same result:

Could it have something to do with the bug where the api-key is not saved in the map component?(Google Maps component not saving API key)

Or perhaps I don’t use the right key/id for the marker?

[jellederijke]

Sadly I cannot get this to work. Is anyone else willimg to try to autoshow the info for a (or all) marker(s)?

I’m on a nodejs project w10, latest beta and added google maps key manually to script.

Thanks for anyone willing to help!