We have updated our reference sites that use Google Maps. The Real Estate site demonstrates filtering within a radius, using the geolocation feature and a custom style for the markers. On the Travel Destination site, you will see how clustering works and you can test the “focus your map” feature.

Filtering by distance and using geolocation

Visit the Map Search page of the Real Estate site.

The property search allows you to filter posts by distance. Now you can look up properties within a given radius of your current location or a specific location.

Searching near a specific location

Use the input field and enter any address. Google maps will prompt you with matching locations when you type. After pressing the “Search map” button, you will be able to view all properties within the specified radius.

Searching properties according to a distance from a point of interest
Searching properties according to a distance from a point of interest

Geolocation

Alternatively, you can ask the site to use your current location.

  1. Press the Use my location button.
  2. You will be asked to share your location. If you allow this, your location will be passed to the input field as your geographical coordinates: latitude and the longitude.
  3. When you click “Search map”, the map will show all properties within the radius you selected.
Clicking on the “Use my location” detects your current location
Clicking on the “Use my location” detects your current location

Using different markers for different post types

The toolset allows you to create markers with custom icons.

In our Real Estate site, we have four different post types for Offices, Apartments, Lands, and Houses. Each post type is represented on the map with a marker using a different color.

Styling markers - each kind of property uses a different icon
Styling markers – each kind of property uses a different icon

How did we implement it? We used custom icons for markers and in the image URL we used the wpv-post-type shortcode, representing the post slug:

Using different markers for different post types
Using different markers for different post types

For example, posts belonging to the Office post type will be represented with the following icon:
https://real-estate-wordpress.discover-wp.com/files/2015/11/marker-office.png

Read more about Customizing the marker Icons.

Showing post fields in the marker pop-up tooltips

You can display post fields in your marker tooltips. In our Real Estate site when you click on a marker, you will see the property image, the post title, and the property price.

Adding pop-up tooltips to markers
Adding pop-up tooltips to markers

To customize the information displayed in the marker pop-up, use the Marker data tab when inserting your markers.

Where to set up your custom content to appear in the marker pop-up
Where to set up your custom content to appear in the marker pop-up

Clustering – grouping together close-by markers

The Travel destination site collects tours from around the world. When some of these places are located close to each other it can be tricky to show them all on a global map.

This is where clustering can help.

Clusters group together markers which are closely located to each other on a map. They are represented by a single, cluster icon on a map:

Clustering - grouping together markers which are closely located to each other
Clustering – grouping together markers which are closely located to each other

When you zoom into the map view, individual markers will appear on the expanded map area. In our example, they represent tours.

Clusters turn into individual markers upon zooming in
Clusters turn into individual markers upon zooming in

Re-focusing the map

When you play with a Google map, you might lose its initial state. Now it is easy to refocus it around a marker.

In our Travel destination site, pick the tour you want and scroll down the page to view the map.

  1. Drag your map to move it.
  2. Press the “Focus map on a marker” button to retrieve the initial focus of the map. The map will be centered according to the marker.

Go ahead and create a new test site in discover-wp.com to play around with these features.
You can also visit our documentation to learn other Toolset Map features.

Step 1. Drag your map to move it.
Step 1. Drag your map to move it.
2. Press the “Focus map on a marker” button to re-center the map
2. Press the “Focus map on a marker” button to recenter the map

Displaying all posts on one map and highlighting the current post

You can display all posts on a map and highlight the current post.

Visit an individual property page of the Real Estate site. You will see all the properties as grey markers and the current property shown with the orange marker.

Displaying all posts on one map and highlighting the current post
Displaying all posts on one map and highlighting the current post

Use the following steps to implement this.

In the template for your single posts:

  1. Insert a shortcode that renders a map.
  2. Insert the marker that reflects the current post’s location. Customize it so that it stands out. For example, you can use a custom icon.
  3. Insert a View that displays all markers on the same map you inserted in step 1. To prevent the current post’s marker from appearing twice on the map, make sure that the Don’t include current page in query result option is checked in the View editor.

What is your favorite Toolset Maps feature?

Go ahead and create a new test site in discover-wp.com to play around with these features.

You can also visit our documentation to learn other Toolset Map features.

Please tell us which is your favorite one.

If you have used any of these features in your project, feel free to share the link in the comments. We will be happy to see how you use Toolset Maps.