This thread is resolved. Here is a description of the problem and solution.
Problem: I would like to know how to use Types fields with the Google Maps Embed API.
Solution: Use Types to store the query string only, like "Brittany,+France". Then build an iframe in your template and pass the custom field value into the iframe SRC attribute.
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=ABCD*********XYZ&q=[types field='your-field-slug' output='raw'][/types]" allowfullscreen> </iframe>
Relevant Documentation:
https://developers.google.com/maps/documentation/embed/guide
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 2 replies, has 2 voices.
Last updated by 5 years, 3 months ago.
Assisted by: Christian Cox.
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.
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.
