Skip Navigation

[Resolved] Display an address field in a map without Views

This thread is resolved. Here is a description of the problem and solution.

Problem: I would like to display a Google Map showing an address field without using Views.

Solution: The Maps plugin without Views will allow you to capture location information in a custom field. Then you could use the Google Maps Static Map API to display a static map image using that location data, but Views is required in order to display an interactive map. A static map is useful when you are showing several small thumbnail maps on the same page - static images will load faster than separate interactive maps. Be sure to enable the Static Maps API for your API key – this is a separate API that must be enabled in the Google API Console.

<img src="https://maps.googleapis.com/maps/api/staticmap?center=[types field='address-field-slug'][/types]&zoom=13&size=300x150&maptype=roadmap&markers=color:red%7C&key=YOURAPIKEY" />

Change the address-field-slug to match your address field. If your site isn’t https, change the protocol. You can also change the zoom and size parameters to fit your needs. Other customization can be added as well, you can review the full API documentation at the link below.

Relevant Documentation: https://developers.google.com/maps/documentation/static-maps/

This support ticket is created 6 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

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 5 replies, has 2 voices.

Last updated by Christian Cox 6 years, 9 months ago.

Assisted by: Christian Cox.

Author
Posts
#612568
toolset-support-shortcodes.PNG

Tell us what you are trying to do?
I have the toolset maps plugin installed and I am trying to display a map from an "Address" post type filed.

Is there any documentation that you are following?
I read through several past support tickets, so I know there is no API like with the rest of fields. I also read the documentation on shorcodes so I tried to used them in my single.php file, but they do not work. In the link you can see what is displayed, and I will upload a screenshot of the code I am useing.

Is there a similar example that we can see?

What is the link to your site?
Here is the page where you can see the shortcodes displayed
hidden link

#612609

1. Fix the syntax of your map and map marker shortcodes. The attributes "marker_id" and "marker_field" are not defined correctly. One way to be sure is to place these fields in a Content Template for the post, and disregard your PHP template. Test them out, and the map should appear. Then you can copy + paste those shortcodes into your PHP. Issues:
- The "marker_id" value should probably be different from the map_id value for simplicity
- The "marker_field" value should be the slug of the address field, plus the "wpcf-" prefix.

2. Remove the types_render_field functions.

3. Only use the map ID "location-map" in one wpv-map-render shortcode.

4. Remove all but one of the wpv-map-render shortcodes.

Here is a working example:

echo do_shortcode('[wpv-map-render map_id="location-map"][/wpv-map-render]');
echo do_shortcode('[wpv-map-marker map_id="location-map" marker_id="location-marker" marker_field="wpcf-locationslug"][/wpv-map-marker]');

Modify "locationslug" to match the slug of your address custom field, prefixed with "wpcf-". So if your field slug is "address", the marker_field value should be "wpcf-address". Note that "location-map" and "location-marker" are arbitrary here. You can call them whatever you want, as long as these values do not conflict with other maps and markers displayed on this page. Copy the other wpv-map-render shortcode attributes like cluster, map_height and map_width into the example shortcode if you want to apply those values.

#612618

Thanks for your help Christian,

Unfortunately, I stil can not make it work :S

Here is the link of the page: hidden link

This is the code I used:

<?php if(types_render_field('location-map')) {
              echo do_shortcode('[wpv-map-render map_id="my-map"][/wpv-map-render]');
              echo do_shortcode('[wpv-map-marker map_id="my-map" marker_id="location-marker" marker_field="wpcf-location-map"][/wpv-map-marker]');
            } ?>

My field slug is: "location-map"

#612863

Please remove the types_render_field conditional and test again. Since types_render_field does not work with address fields, I don't think you can expect the return value of that function to pass that conditional. If this does not work as expected, I need to take a closer look. Please provide login credentials in the private reply fields here.

#613110

Hi again Christian,

So I hadn't installed the plugin Toolset Views. I thought I could use only the Tolset Maps.

Is there a way to use the Toolset Maps plugin without the Toolset Views?

#613449

The Maps plugin without Views will allow you to capture location information in a custom field. Then you could use the Google Maps Static Map API to display a static map image using that location data, but Views is required in order to display an interactive map. A static map is useful when you are showing several small thumbnail maps on the same page - static images will load faster than separate interactive maps. Be sure to enable the Static Maps API for your API key – this is a separate API that must be enabled in the Google API Console.

<img src="<em><u>hidden link</u></em> field='address-field-slug'][/types]&zoom=13&size=300x150&maptype=roadmap&markers=color:red%7C&key=YOURAPIKEY" />

Change the address-field-slug to match your address field. If your site isn’t https, change the protocol. You can also change the zoom and size parameters to fit your needs. Other customization can be added as well, you can review the full API documentation here:
hidden link