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

Miri

Well-known member
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:
Code:
[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:
Code:
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
 
Solution
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:
Code:
<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>
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:
Code:
<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>
 
Last edited:
Solution
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:
Code:
<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
 
{$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.
 
Back
Top Bottom