XF 2.2 Embed google maps, via the coordinates of a custom field.

[Miri]

I have a custom field present in a thousand posts with coordinates(obviously different for each post).
Coordinates are represented like this
LAT,LONG (52.345596,4.919289)

I am currently showing a link:

[URL='https://www.google.com/maps/search/?api=1&query=52.345596,4.919289']MAP[/URL]

This solution has two positive sides:

1. works without api-key
2. shows the google maps marker exactly on the point of the coordinates

and a negative one:

1. doesn't embed the map.

and here is my question:

How do i embed a google map, taking the coordinates from my custom field and displaying the google maps marker on the map?

I tried using various possibilities:

https://developers.google.com/maps/documentation/embed/embedding-map#adding_the_url_into_an_iframe

via the custom field's "Value display HTML", but I can't get it to embed.

I am aware, that for this solution (if I understand correctly), I need an API-KEY

 

[Craigr]

Managed to get it working with embeded map, would be good if you could enter the place name too.

In the custom text field box that i can enter co-ordinates such as this : 38.8768683,-77.0756566

Edit, just noticed if you put place name in rather than co-ordinates it also works with that too.

Value display HTML:

<iframe width="400" height="300" style="border:0;"  src="https://maps.google.com/maps?q={$value}&output=embed" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

 

[leduclanh]

Managed to get it working with embeded map, would be good if you could enter the place name too.

In the custom text field box that i can enter co-ordinates such as this : 38.8768683,-77.0756566

Edit, just noticed if you put place name in rather than co-ordinates it also works with that too.

Value display HTML:

<iframe width="400" height="300" style="border:0;"  src="https://maps.google.com/maps?q={$value}&output=embed" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

{$value} tag did not work for me but I changed to $option, it works like a charm ~ thank you for your code

 

[Miri]

{$value} tag did not work for me but I changed to $option, it works like a charm

I wasn't aware that the {$value} and {$option} tags were equivalent.

Hi @Craigr, thanks for sharing it. It works wonderfully. I've accumulated over eight thousand points using that specific custom field.

just noticed if you put place name in rather than co-ordinates it also works with that too.

As for addresses, I can't use them since, in my case, most points of interest don't have addresses with the specified streets. Good to know, though.

PS: I really wish a developer could create an addon that, using the coordinates from this custom field, could display them as markers on a map.