GoogleMaps Markers dynamic

I have a PHP page that contains a GoogleMaps Map, with authorized Api key and dynamic connection
It shows me all Markers correctly, but I would like to extend dynamic use:
1- With Mouse Over on each Markers -> display image
2- With Mouse Click on each Markers -> go to page
I’m not sure how to set it up
Anyone know how to deal with Wappler?

Hi.
You will have to use custom JS solution to do what you want.
You can take a look at the map itinerary section here. See if you can understand/implement the JS. You can find the code in sources tab of dev tools.

1 Like

So with Wappler you can’t achieve this? So what is the Dynamic Markers section for?
Even before that I also have display problems, because after having entered the result of a Query that lists all the records in Markers Source and obtained the visualization of all markers, I then tried to insert the dynamic data of the query in the other fields (example "title £ or “Label” Unfortunately, the result is probably there, but it is illegible because clicking on the Markers the text appears in white on a white background, and I don’t know how to overcome this problem

If Sid’s js solution doesn’t work for you, you can set the marker-info attribute with the html you want. You will need to know html and how to encode/quote properly but it is possible–but depending on your skills and patience, it might work for you.

Here is a marker-info attribute example from a dmx-google-maps element:

marker-info="' <a class="map_property_card_link" onclick=openPropertyCanvas("' + listing_key + '") href=javascript:void(0)><img class="map_property_card_img"  src='+ media[0].MediaURL+ '><p> '+ address_primary.titlecase() + '</p></a>'"

Which produces this:

2 Likes

Thank you
I’ll try

If you use the mini-code view window to edit this attribute, it will be easier:

' <a class="map_property_card_link" onclick=openPropertyCanvas("'+listing_key+'") href=javascript:void(0)><img class="map_property_card_img"  src='+media[0].MediaURL.default('https://via.placeholder.com/300x232.png?text=No+Images')+'><p> '+address_primary.titlecase()+'</p></a>'

But which database fields exactly match?

  • listing_key
  • media URL
  • address_primary
1 Like

Those are specific to my app–it is just an example. You will have to adapt for your app.

maybe I make a little confession
I have a query on the page that lists all the records needed to populate the map.
In the info, I should therefore copy the entire code suggested by you, modifying the 3 specific fields.
But I don’t quite understand what elements I have to insert to get the click of each Marker, Title / Image / URL of the product sheet
From the query chw populates the map, I can get TITLE and IMAGE, and by URL IDrecord
But how should I enter them? With Wappler or manually?
thanks anyway for your availability

There are things in my example that are specific to my application, I wouldn’t recommend using it as-is.

The main thing to learn is that you are just creating a string of html. Single quotes are surrounding static values, plus symbols separate those from dynamic values from your app. That’s really all this is.

Now I understand, I had misunderstood
Thank you

Thank you.
I was able to configure everything I need, but I still have one problem.
I can’t fit the image into the box
I saw in your code in Custom Image the code “? Perfect_fit”
Maybe that’s what I’m missing, but I don’t know what it is

Great, I’m glad it is working for you.

The ? Perfect_fit you see is not related to this, it is where I am defining which icon should be displayed.

You’ll see in my example that the img tag has a class assigned. In that class, I set the height, width, etc. of the image.

Right, that’s what I’m doing, but ? perfect_fit had caught my attention and curiosity