How to concatenate a string with Goolge maps it

Wappler General How To
#1

I am trying to add a link in the popup window in google maps. I’ve done it before with the old school DMXzone stuff, but have question on how to add the link?

<dmx-google-maps id="maps1" maptype-control="true" latitude="38.1811509" longitude="-92.6347405" zoom="4" height="600" dmx-bind:markers="conn_dealerQry.data.query1" marker-latitude="lat" marker-longitude="lon" zoom-control="true" marker-id="dealer_id" marker-title="dealer" marker-info="{{dealer}}<br>{{address}}<br>{{city}}, {{state}}, {{zip}}<br>{{phone}}<br><br>[ Click For More Details ]"></dmx-google-maps>

I need to add <a href="link to someplace">[ click for more details ]</a> to the script. Not sure if I need to do an asp & to concatenate the string or + or what? Anyone have any ideas?

thanks

#2

Hey Baub,
Just add the bindings the same way as you used to in the DW extension:

{{binding1}}  <br> {{binding2}} <br> ... <br> {{binding99}}
#3

But the issue is that in the link <a href="link goes here.asp?linkid={{linkid}}">, the quotations break it?

#4

Baub, you need to use the dynamic attributes for the link, just as any other dynamic attribute on your pages.

<a dmx-bind:href="'link.asp?linkid=' + linkid">
#5

Ah thats what I was looking for! Thank you!

1 Like
#6

Well I think I spoke too soon. Can’t seem to get this to work?

<dmx-google-maps id="maps1" maptype-control="true" latitude="38.1811509" longitude="-92.6347405" zoom="4" height="600" dmx-bind:markers="conn_dealerQry.data.query1" marker-latitude="lat" marker-longitude="lon" zoom-control="true" marker-id="dealer_id" marker-title="dealer" marker-info="{{dealer}}<br>{{address}}<br>{{city}}, {{state}}, {{zip}}<br>{{phone}}<br><br>[ <a dmx-bind:href="'dealer-detail.asp?dealerID=' + {{dealerID}}"> Click For More Details</a> ]"></dmx-google-maps>

not quite sure how to close the tag correctly? should it be a
A closing tag or some sort of dmx-bind closing tag?

#7

It should be a normal anchor tag:

<a dmx-bind:href="'dealer-detail.asp?dealerID=' + dealerID"> Click For More Details</a>

Please remove the {{ }} from the dynamic attribute, they are not needed.
Static content is wrapped with single quotes, dynamic content is just the binding, without {{ }}.

#8

Yeah thats what I thought, I was switching around trying different things to get it to work. This code looks correct but kills my map when I use it

<dmx-google-maps id="maps1" maptype-control="true" latitude="38.1811509" longitude="-92.6347405" zoom="4" height="600" dmx-bind:markers="conn_dealerQry.data.query1" marker-latitude="lat" marker-longitude="lon" zoom-control="true" marker-id="dealer_id" marker-title="dealer" marker-info="{{dealer}}<br>{{address}}<br>{{city}}, {{state}}, {{zip}}<br>{{phone}}<br><br>[ <a dmx-bind:href="'dealer-detail.asp?dealerID=' + dealerID"> Click For More Details</a> ]"></dmx-google-maps>
#9

Well it has some syntax errors. What are these used for: [ ]?
Also please escape the double quotes in the anchor tag, if you are trying to paste this directly in the code:

<a dmx-bind:href=&quot;'dealer-detail.asp?dealerID=' + dealerID&quot;> Click For More Details</a>

You cannot nest quotes inside quotes.

#10

are being used as just test for the link button

[ click for more details ] etc, they aren’t code or anything.

36%20PM
Screen Shot 2019-08-07 at 2.42.36 PM.png1157×725 158 KB

this should work according to what you are saying. The map is now appearing correctly but the link isn’t working. Do I somehow need to use the Browser component from app connect?

current code:

<dmx-google-maps id="maps1" maptype-control="true" latitude="38.1811509" longitude="-92.6347405" zoom="4" height="600" dmx-bind:markers="conn_dealerQry.data.query1" marker-latitude="lat" marker-longitude="lon" zoom-control="true" marker-id="dealer_id" marker-title="dealer" marker-info="{{dealer}}<br>{{address}}<br>{{city}}, {{state}}, {{zip}}<br>{{phone}}<br><br>[ <a dmx-bind:href=&quot:'dealer-detail.asp?dealerID=' + dealerID&quot:> Click For More Details</a> ]"></dmx-google-maps>
#11

No Baub, that’s a regular anchor tag.
What’s not working exactly? Can you provide a link to your page where I can check what’s wrong?

NOTE
The quotes must be escaped like:

&quot;

Not:

&quot:

!!!

#12

https://docklifeguard.com/certified-dealer-locator.asp

#13

Please see my post regarding escaping the quotes.

#14

whoops fixed that. still the same.

<dmx-google-maps id="maps1" maptype-control="true" latitude="38.1811509" longitude="-92.6347405" zoom="4" height="600" dmx-bind:markers="conn_dealerQry.data.query1" marker-latitude="lat" marker-longitude="lon" zoom-control="true" marker-id="dealer_id" marker-title="dealer" marker-info="{{dealer}}<br>{{address}}<br>{{city}}, {{state}}, {{zip}}<br>{{phone}}<br><br>[ <a dmx-bind:href=&quot;'dealer-detail.asp?dealerID=' + dealerID&quot;> Click For More Details</a> ]"></dmx-google-maps>
#15

Can you please try removing the [ ] from the code and see if this fixes the issue?

#16

They are removed. Same thing

#17

Are you sure your binding for the Id is right: delaerID?
Shouldn’t that be dealer_id as that’s what i see in your query?

#18

you are correct. I didn’t think it would matter. I figured the link would still work? I changed but it didn’t do anything different. if there was issue with link you would think the page on the link wouldn’t load properly but it would still go to the link.

I corrected that and still doesn’t work.

#19

I see - I’ll check this tomorrow morning in the office, currently 11:15PM here, so I’m not on my computer.

#20

Sounds good. I appreciate your help. I"ll move onto something else here for today. Get back to me when you can. 3:20 pm here my time.