Toolset Maps 1.0 Released – Display Anything on Google Maps with Toolset

   Amir

Announcements

January 4, 2016
32

This is the first public release of Toolset Maps, the new plugin in Toolset family, which makes it easy to display WordPress content on Google Maps.

Toolset Maps expands Types, Views and CRED by providing advanced geolocalization features to them. It adds an ‘address’ field to Types and CRED and ‘map’, ‘marker’ fields to Views. This way, you can enter store addresses in custom fields and displays them on a map as markers.

Types integration

In Types, you will find a new ‘address’ field type.

The new Address field in Types
The new Address field in Types

The ‘address’ field is available for both posts and users.

Toolset Maps provides a complete GUI with auto-complete, which will help users enter addresses. This functionality comes directly from the Google Maps API, but displayed inside the WordPress admin.

Entering an address
Entering an address

You can also show or hide the coordinates for the selected address, and even fine-tune them by providing new values. Note that Toolset Maps will always adjust the manually entered coordinates to the closest Address that Google can handle.

Address fields can be repeating, so a post or a user can have a list of addresses.

The Types integration has a very basic output. With Types, you can display the stored address as plain text, or the pair of latitude and longitude coordinates of the location. To display a proper map with a marker, you need Views.

CRED integration

When you include address fields in CRED forms, they work very similarly to these fields in the WordPress admin (by Types). Visitors can enter addresses and will see them in a preview on the map.

Views integration

To display addresses on a map, use Views. You will be able to display a Google Map and add markers to it, displaying any information from your site.

Toolset Maps provides two new shortcodes for Views: {{wpv-map-render}} and {{wpv-map-marker}}. You can reach them from the Fields and Views menu, under the Google Maps section.

{{wpv-map-render}} displays a Google Map, without any markers.

The map-insertion dialog
The map-insertion dialog

The dialog to insert a {{wpv-map-render}} shortcode offers several options:

  • Map ID and size – The ID is preloaded with a unique value. Width and height have default values that you can easily override.
  • Zoom and center options – By default, the map center and zoom will depend on the number and location of the markers it contains, but they all can be overwritten by specific values.
  • Marker clustering – You can group markers that are close enough to display them as a cluster, and decide how close and how many markers will be added to each cluster.
  • Map interaction – You can decide what will happen when you double click, scroll and drag the map with your mouse.
  • Map styles – You can set a background for the map (visible when reloading any tile from Google) and set global marker icons to be used on this specific map.

{{wpv-map-marker}} lets you add markers onto a map. The addresses for the markers can be anything. They can be constants (like in an ‘about us’) page, or come from custom fields.

Adding a marker to the map
Adding a marker to the map

The dialog to insert a {{wpv-map-marker}} shortcode offers several options:

  • IDs and source – You can set the map ID where this marker will be shown, the specific marker ID and the source of the location that will be used for this marker. It can be either a Types address field, another custom field, a specific address or a pair of latitude and longitude coordinates.
  • Marker data – Here you can set the marker title (that will be displayed when hovering over it) and the marker popup (that will be displayed when clicking on the marker).
  • Marker icons – Here you can override the icons globally set for the map, so you can use one specific icon for this single marker.

Besides those two shortcodes, there are other three buttons in the Google Maps section of the Fields and Views dialog:

  • Reload button – reloads the map based on the original display settings (resetting what visitors may have changed by dragging and clicking on the map).
  • Focus on marker button – zoom the map on the selected marker.
  • Zoom out button – restore the center and zoom options of the map without reloading it.

You can use Google Maps with all other Views AJAX features, including pagination and for custom search. This means that:

  • When a View has AJAX pagination enabled, a map that shows markers based on the View results will be automatically updated to show the right markers for the current page.
  • When a View has AJAX results for a custom search, a map that shows markers based on the View results will be automatically updated to show the right markers for the current search.

Finally, Views caches each address that it needs to display on a map, to have fast access to its latitude and longitude coordinates instead of pinging the Google Maps API every time it is needed. Cached data can be accessed in the Views -> Settings -> Toolset Maps tab:

Each row can be deleted individually, but you should not normally use this delete function. The basic free Google Maps API has a limit on requests that an IP can perform per second and per day, so we try to store that data as soon as we can. In case of Types Address fields, we store it when the field is saved. Anyway, to avoid reaching a limit, a Google Maps API key can be inserted in that same tab. An API key ensures that even on shared hostings your site is only blamed for actual API calls coming from your domain.

New in this release – clustering

The beta versions of Toolset Maps didn’t have a clustering feature, but it’s included in this first production release. When you insert a map, you can enable clustering. When enabled, markers that are too close (according to your selection) will be grouped together and displayed as one marker, called a ‘cluster’. When visitors click on that marker, the map will zoom and the individual markers will display.

To enable clustering, go to the Marker clustering tab when inserting the map.

Toolset Maps - Clustering Options
Toolset Maps – Clustering Options

As soon as you enable it, clustering will start working. You can tweak the clustering using the various options in that tab.

  • Custom cluster styles
  • A custom calculator callback that decides which cluster style will be applied depending on how many markers belong to each cluster

Last, but not least, you have complete control to customize the markers for clusters, using your Javascript code. Use the WPViews.view_addon_maps.set_cluster_options function to set the icons for different clusters, based on the markers that the cluster replaces.

For example:

jQuery( document ).ready( function() {
  var options = {
    styles: [
  {
    'url':'http://wp_dev.local/wp-content/plugins/wpv-views-maps/resources/images/clusterer/heart30.png',
    'height':'26',
    'width':'30',
    'textColor':'red'
  },
  {
    'url':'http://wp_dev.local/wp-content/plugins/wpv-views-maps/resources/images/clusterer/heart40.png',
    'height':'35',
    'width':'40',
    'description':'lala'
  }
],
    calculator: function( markers, numStyles ) {
  var index = 0;
  var count = markers.length;

  var dv = count;
  while (dv > 0) {
    dv = parseInt(dv - 5, 10);
    index++;
  }

  index = Math.min(index, numStyles);
  return {
    text: count,
    index: index
  };
}
  };
  WPViews.view_addon_maps.set_cluster_options( options, 'map-3' );
});

This implementation sets two cluster styles, and will use the first one for clusters with less than 5 markers, and the second one with clusters with more than 5 markers.

Compatibility with themes and plugins that also use Google Maps

The Google Maps API can only be loaded once for every website. If your theme or another plugin is already displaying Google Maps, you can either use it or use the Google Maps from Toolset. You cannot use both. If the Google Maps API is already loaded, don’t enable Toolset Maps. This will certainly cause a JS conflict and probably both implementations will have problems.

There is no way for Toolset to use the Google Maps API that’s already loaded by other code and your theme cannot use the Google Maps API loaded by Toolset. This is just how the API works. It’s intended for a single-use in any given site.

Download and install

Toolset Maps is now available from inside your Toolset account. Go to Downloads and scroll all the way to the bottom.

Feedback?

Toolset Maps was born from the initiative of Juan, lead developer for Views. Juan spent his evenings on the proof-of-concept, making Toolset Maps an official member of our Toolset suite. Juan and the entire Toolset team would love to hear your feedback, ideas and suggestions. Of course, if you’re already using it for a site that you’re developing, let us know. There’s nothing we like seeing more than our plugins powering your sites.

 

Comments 32 Responses

  1. Hummm…

    “There is no way for Toolset to use the Google Maps API that’s already loaded by other code and your theme cannot use the Google Maps API loaded by Toolset.”

    This means that Toolset cannot be used on any site that uses a Page Builder (Divi Builder, Beaver Builder, Visual Composer, etc) as they come with Google Maps blocks.

    This also means it’s incompatlble with any commercial theme that uses the Google Maps API for some fancy widget.

    And also incompatible with any Google Maps plugin. Is this right ?

    If so, how do you suggest we include a Map into the typical “Contact Us” page, given your plugin is meant for Custom Post Types?

    Thanks.

    • We would love to be wrong about this, but this is what we understand from Google’s documentation and what we’ve seen in practice.

      Have you managed to use Visual Composer, with its own Maps block together with a theme that also displays Google Maps?

      If there’s a way, we would be happy to use it, but our research shows otherwise.

      • Hi Amir.

        My intent is definitely not to “assign blame”, I was the one to bring up this issue during beta testing, I want to help find a solution 🙂

        I just wonder, since Toolset is mostly used (I would assume) to create complex/corporate sites, how we’ll be able to include non-Toolset maps into a site… unless Toolset can do it all, we need something else for those non-CPT mapping needs…

        I myself had provided your team with a Duplicator site, using Divi, and even in the case where a simple View was used (no maps) on a page showing a Google Maps Divi module, I was getting an endless stream of 404’s.

        I’m just looking for a solution, like you…

        • Hmmm,

          My question was: “Does the “other” Page Builder (Visual Composer or other) add the Google API always or just on page (or even the entire site) WHEN a Google map is actually loaded from the Page Builder (i.e. IF I use VC to load a Google Map, then it loads it on this page or the entire site, but if I don’t use VC to load a map, then VC doesn’t load the Google Map API)…

          But, if I understand the last reply, it does create problems (even with Views…?).

          • Toolset loads the Google API only when needed. We don’t know what every other page builder will do. I guess that some will load ‘on demand’ and some will load always. You can see that in the page source.

      • Should work. Toolset will load the Google API only when needed (when there’s a Google Map on the page). If the page builder also does the same, there will be no conflict.

  2. Hi Jean-Francois

    As we discussed earlier (I remmeber you asking about this same issue during development), the Google API can and should only be included once on a site or, at least, on a page. Each maps plugin, addon or component on a theme or plugin provides different features, so it loads the Maps APi with different options which might (and surely will) be incompatible between them.

    Than being said, and as I stated before, there is one wrong idea about Toolset Maps being used here. Toolset Maps makes it easy to add maps on a custom-post-type environment, but it also makes it easy to add a single map to a contact page.

    Let me stress this again: Toolset Maps lets you add maps with sources coming from custom post types, but also from specific individual addresses, or even from latitude-longitude pairs. There is no need of a custom post type at all to display a map using Toolset Maps. You just need Views, and you are good to go to add a map to your “Contact us” page, to your profile page, or wherever you want.

    So, to use your words: yes, Toolset can do it all 🙂

    If you need help setting this, just look at this screenshot:
    https://d7j863fr5jhrr.cloudfront.net/wp-content/uploads/2015/11/insert-marker-2.jpg
    from our documentation:
    https://toolset.com/documentation/user-guides/display-on-google-maps/
    As you can see, when adding a marker you can decide what source it will use to get the address from, and you can even set one custom address right there.

    In case this is not clear enough, please open a support ticket and ask for my help, I will be willing to help you with the setup to cover all your needs.

    Regarding the 404s you were experiencing, we went back to code and checked how to improve it, and from this release on no one of our scripts should be loaded in the frontend if no Toolset Map is to be rendered. Absolutely no one. If you continue to see those errors, then I truly want to work on your support ticket.

    Regards.

    • Juan, that’s a fanstiastic response, thank you !

      I’ll go and test these, and trust me, if I can get away with one less (maps) plugin, I’ll take it 🙂

  4. Seems wonderful !

    Does that include the coordinates of the user to interact with ? For example :
    – display the results depending of the geolocation of the user,
    – allow or disallow content depending on where the user is physically
    ?

    • We don’t yet have filtering back from the map to Views. This is planned next. We want you to be able to move and zoom the map and have it filter the results of the View search. Today, it only goes the other way around. You apply filters in Views and the map can update automatically. We are going to add a way to filter, in the View, according to items that fit in the map. We are also going to add a way to filter from a polygon drawn on the map, but this will take time to implement.

  5. Good to hear it is released. I’ve used the beta in a site which will be launched soon. By the way, it’s a site build in Divi.
    Haven’t tested it using a toolset map in a page using the page builder. I’ve created page templates using Divi Page Builder shortcodes. This solution works perfect.

    Perfect timing again. Now the site is being launch within two weeks, I can deliver it with an official release of toolset maps.

  6. Hi,

    a radius search would be a nice feature.
    If someone is at a specific location
    (identified by his IP using eg. a free or payed GeoIP database like Maxmind has),
    he might want to search for specific custom post types ( restaurants, bars, etc. )
    in a specific distance, radius from his current location…
    Is there a chance this feature would be implemented in the near future?

    Thanks,
    V.

    • Hi Vane

      Yes, there is a chance. In fact, more than just one. As you can read here, we had lots od feedback bits all over, and the ability to filter results based on a location, be it the actual user location or a given one, is high in the list. SO we will move it up in our list too 🙂

      We already have an idea of how to implement this, we just need to get our hands on it,

      Regards.

      • I would love to see this feature as well!
        If a user searches on the map for a location, it would be cool to display all posts that fall within this radius or fall within the view of the map.

    • Hi Roberto

      Mmmmm, never thought about it, but sith a little of work I am sure it can be done, given that:
      – we provide a custom event executed when a map is been completely loaded, including its markers.
      – we provide an API function to interact with a given marker on a map.
      then you should be able to trigger a click event on that specific marker once the map has been loaded, hence displaying the popup window. But as I said, I never did it before. THere might be a chance to have an option built in for that, although I do think this is a quite specific requests.

      Maybe you can try to play with the javascript itself and if you get lost open a ticket about it, I might be able to provide a snippet for you to use.

      Hope it helps.

  8. I am a long-time Types user, but don’t use any other Toolset components. This is very possibly the component that will change that. It sounds great! 🙂

    I have a few questions:
    1) Is there a page where I can use a map created with the new Maps plugin? The video is nice, but I’d like to try an actual map myself.
    2) Must I use Views with Maps, or can I use the shortcodes in php? Are the parameters for the maps shortcodes documented?
    3) I already have a Types managed custom field that stores latitude/longitude. Is there a way I can use this with Maps, or perhaps convert it to an Address field?

    Thanks for your help on this!

    • 1. This is not available (yet) in our demos system. The Toolset Maps plugin will be available in our new Real Estate demo, which we are completing right now.

      2. Yes, all the front-end rendering of our maps is done via Views plugin. Honestly, if you only need to display a map, without anything on it, you don’t need our plugins. There are plugins that will display a map with a single marker it (like for “about us”). The big benefit of using it in Toolset is the ability to plot lists of items on a map. A View does that very well.

      3. This will require a script, because the address fields that we added take one argument (the street address). We convert from coordinates to address and store that in a transient.

      • Amir,

        Thank you for the answers. I have a CPT called Location with a lat/long CF. I want to display many lat/long markers (one for each Location) on the same map. Address will not suffice since lat/long does not necessarily correspond to an address (in this case, places to hike).

        It’s sounds like the Map plugin does not yet accommodate this. Perhaps in a future enhancement. 😉

  9. I finally have v1 installed now. Is having the ability to fine tune the marker location by dragging and dropping still on the To Do list? I can move the marker now, but the drop location kind of goes nuts.

    • Hi Darryl

      Yep, this is a known issue, and on the very top of out priority list. Please stay tunned, we will be addressing this as soon as we can.

      Thanks for the feedback 🙂

  10. Hi Guys,

    Look like a useful extension for the toolset package, I have 2 questions about this tool:
    1. I would like to develop a woocommerce website that products have a location custom field and then show the products on map view, is this possible with this map tool?
    2. I also need to create a search form for the products based on map view, possible?

    Thanks for your great tools & support

    • 1. Yes, you can add address fields to ANY WordPress content, this includes WooCommerce products. You will be able to display products on a map, as markers.

      2. You can create a custom search form that will display WooCommerce products both on a map and as a list (or only one, if you need that). We created a tutorial for how to develop custom parametric searches for WooCommerce products:
      https://toolset.com/learn/create-an-ecommerce-wordpress-site/search-filter-and-results/

      Does this help?

      • Hi Amir,

        Thanks for your quick reply,

        Very helpful answer, I’m working on a complicated product directory project- the toolset package cover almost all my requirements,

        I will update your team after ill finish the development process ,

        Thanks again,
        Chiko

  11. I would like to create a custom post type that shows a list of upcoming places I am touring. I want to display the map based on the address entered in the post. How can I set up my WP template to do this?

    • First, install Types, Views and Toolset Maps plugins.

      You will need to use Types to add the ‘address’ field to the posts (you can add custom fields to posts too).

      Then, use Views to create a ‘View’ that will load posts, ordered and filtered by date (to get the upcoming ones). The View will display the posts. When you create the View, first insert the map, before the View loop. Then, insert the map marker inside the loop, to display the addresses in the posts on the map. This is explained and demonstrated here:
      https://toolset.com/documentation/user-guides/display-on-google-maps/

      There is a short video that shows something very similar to what you want to achieve.

      Does this help?

    • Each post will need a unique map with a single as-yet-identified location. So the authors will need to put the address in as they create each post, and each will show a single marker for that event only. How would that work?

  12. Hi guys,

    I am very happy with this plugin, thank you! I have two questions

    1) I had to combine my address fields to one. And I will need to do that with new posts. I found this article. Is that the way to do it or is their an easier way (in future releases)?
    2) I am testing it now on my local machine. Filtering goes very well. Custom marker and custom cluster marker also. But I would also like to style my map more than only the background. Can I do that?