Google maps: show data detail in modal on Marker Click

[jellederijke]

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:

Wappler Video Training - Using Google maps as a menu

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:

Displaying Record Details with the Data Detail Component

In some cases you don’t need to show all the details of your dynamic records on the page. For example you just want to show the product name, and then when the users click the product - more information is displayed. This is also useful for update record forms. This can be done using the Data Details component and you can show the details directly on the page or in a modal. Show details on the page We created a dynamic table, displaying an ID, Airport Name and City. There is more info that …

(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

[sid]

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.

[jellederijke]

Hi sid,

Thank you so much for your response

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!

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

Google Maps component not saving API key

I experience this same issue. Tried using a different project, no luck. The api-key just wont stay put, for some reason. I’m on 4.0.0-beta.10 W10 with a nodejs project. @George any suggestions on how to properly save the api key for the Google Maps component? I also get this error: [errormaps] Thanks

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

[sid]

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.

[jellederijke]

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?

[jellederijke]

Ok sorry, that was too easy to google up:

Overview  |  Maps JavaScript API  |  Google Developers

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

[cgrulke]

Hi @jellederijke and @sid

Could you please go into a little more detail on how you pulled this off? Specifically how did you get the data detail to work by clicking the marker?

[sid]

I don’t recollect the specifics around this conversation, to be honest.
In the dynamic on:click event of marker, you will see a binding available to get the ID of the marker. This ID should be the ID from your dynamic markers list data source binding.
Expecting that your data detail would have the same data source as the markers, you should be able to to select using the marker ID binding.