Google maps: show data detail in modal on Marker Click

Hi there fellow Wapplers,

Fairly simple question: is it possible to show a modal with a Data Detail on Google Maps Marker Click? If so, how?

I did find this cool video that shows you how to show a dynamic url in the info popup:
https://www.youtube.com/watch?v=x4W8ocN2i3s

However, what I try to accomplish is slightly different.

I’ve tried going the same route as with using a table. Where you click a row, open modal and select ID to show in the data detail in the modal. As explained wonderfully here:


(in the current beta this suffers from a bug where content. is added and you need to remove this in order for the data detail to work)

That does open up a nice modal, but doesn’t show the dynamic data. I use Marker Click Event id as id:

So to clarify, the setup is as such:

  • query on database to get markers address
  • dynamically show these markers on google maps
  • on click marker show modal
  • in modal show data detail that gets data from the right id (this doesn’t seem to work)

Any suggestions are highly appreciated :sunglasses:

Hi.
There is already an option to setup dynamic markers on a map & there is also a dynamic event for “marker clicked”.
On click of marker, you can use the clicked marker’s ID with the binding $event.id.
This is not available in the UI from what I know.
[Also, you might have to get the updated Wappler maps JS (if you are not on beta) from here.

2 Likes

Hi sid,

Thank you so much for your response :two_hearts:

Thanks to your answer I was confident that this was indeed the right approach. I just tried the whole setup over again (seemingly the same as my previous attempt). However, this time it worked! :grin:

What doesn’t work is actually saving the API key. But I already replied to this older thread:

So hopefully this will get fixed soon, now my maps have this ugly ‘for development purposes only’ watermark.

Have been meaning to report this API Key issue.
You need to set it to the script tag up top in the layout page.

What’s worse with this bug is if I add some new component which requires key, it deleted the existing key in the script tag in layout page. :sweat:

1 Like

Thanks for the intel, I’ll fill it in on the layout page. Have a great day!

ps: how exactly did you add it to the script tag? you mean this one, right?

Ok sorry, that was too easy to google up:

<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
1 Like