[Resolved] Displaying a map based on the URL provided by Google Maps

[Author]

Posts

[Richard]

I'm trying to display French departments/regions. If I type for example Brittany,France directly into Google Maps I get a map of France with the boundaries of the departement clearly delineated. (see attached screenshot). GM provides a simple way to embed that as a map via an iFrame (normal Gmaps functionality). There is also a URL generated.

HTML -

<iframe src="hidden link" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>

URL -

hidden link

I want to store either as a CF within the CPT. The post will then be generated from a template for the CPT which means I need to use the Toolset shortcode

The problem is that if I use a Toolset map/address field it can only find and display (in this case) a specific location rather than the regional map that I want.

If I use the URL field all I get is a link.

What I want is the map with the regional outline displayed within the post as any other map would be.

I'm wondering if I need to wrap the shortcode in an iframe of some sort but am wondering if it connects to the GM API this way.

Any guidance much appreciated.

[Christian Cox]

Hello, you can use the Google Maps Embed API and a single line text field to accomplish something like this in Toolset. Toolset Maps is not actually required. Note that since you are not using address fields in Types, you cannot use these map locations for distance-based searches with Views. Google Maps Embed API requests using Place mode or View mode are free with unlimited usage, per their documentation: https://developers.google.com/maps/documentation/embed/guide

Your map picture above looks most like Place mode in Google Maps, so I'll walk you through the basics of how to set one of these up:
- Use the Google Cloud console to create a Google Maps API key with the Maps Embed API activated. You should restrict this API key so that it can only be used on your site. It is not necessary to save this API key in Toolset > Settings > Maps.
- Create a custom "single line" text field in some field group with Types. Call the field "map location." Associate this field group with a custom post type called "Departments".
- Create a Department post and save Brittany,+France in the single line field. This corresponds to the q parameter in the embed request URL (see the red outline in the first screenshot). The rest of the iframe src URL will be static - i.e. identical for all posts - so you only need to save the q parameter information in the custom field.
- Create a Content Template for Departments and insert this example iframe code from the Maps documentation page:

<iframe width="600" height="450" frameborder="0" style="border:0" src="<em><u>hidden link</u></em>" allowfullscreen></iframe>

- Replace YOUR_API_KEY with your actual maps API key.
- Test out the map. You should see information about the Space Needle appear on a map.
- Go back to your Content Template. Replace Space+Needle,Seattle+WA with the Types field shortcode for your single line text field instead. Use the "raw" output format for best results.
- The updated code looks something like this now:

<iframe width="600" height="450" frameborder="0" style="border:0" src="<em><u>hidden link</u></em> field='your-field-slug' output='raw'][/types]" allowfullscreen>
</iframe>

- Test the Department post on the front-end of the site. You should see a map that looks like the second screenshot here.

Let me know if you get stuck and we can debug from there.

[Richard]

You sir are an absolute star. That worked perfectly. The only minor glitch was the format of the shortcode generated was as follows

{!{types field='my-field-code'}!}{!{/types}!}

So I just substituted my field name in the sample you gave and it worked straight off the bat. I can do any further fine tuning myself.

Once again - much appreciated - that sub renewal was certainly worth it !