Map with route and hotspots

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

Problem: I would like to display a Map that includes several "hotspots" as Markers, and also draw a route on the map.

Solution: You can create a custom Map View that includes Markers that represent each "hotspot". To draw a custom walking route on a Map, you can use the Google Maps Polyline API. Here's the example from the Google Maps API documentation, edited to use a map created in Toolset:

var mapid = 'map-1'; 
var map = WPViews.view_addon_maps.get_map(mapid);
 
var flightPlanCoordinates = [
  {lat: 37.772, lng: -122.214},
  {lat: 21.291, lng: -157.821},
  {lat: -18.142, lng: 178.431},
  {lat: -27.467, lng: 153.027}
];
var flightPath = new google.maps.Polyline({
  path: flightPlanCoordinates,
  geodesic: true,
  strokeColor: '#FF0000',
  strokeOpacity: 1.0,
  strokeWeight: 2
});
 
flightPath.setMap(map);

Replace map-1 with the ID of your map created in Views. Wrap this code in a 'js_event_wpv_addon_maps_init_map_completed' event handler so it is fired when the map is ready. I provided a more complete example implementation in another ticket: https://toolset.com/forums/topic/add-lines-connecting-markers-in-a-google-map/#post-916035
This ticket creates the polyline using on the marker locations, but your line will be unrelated to the markers.

Relevant Documentation:
https://toolset.com/documentation/user-guides/display-on-google-maps/

This support ticket is created 6 years, 5 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)

Tagged: Setting up custom fields, Setting up custom types, Toolset Maps, Types plugin, Views plugin

This topic contains 1 reply, has 2 voices.

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

Assisted by: Christian Cox.

Author

Posts

July 17, 2018 at 12:17 pm #949122

A. Ku

Tell us what you are trying to do?
Hi,
I'm planning a travel site where I want to display some walking routes. Alongside a walking route the hot spots (which are custom post types) should be displayed (and filterable). Is that something I could do with WP toolset?

Is there any documentation that you are following?
I know I can make a custom map in Google maps like:
hidden link

But how can I display both the custom map and the hotspots I created in WP toolset?

Is there a similar example that we can see?

What is the link to your site?

July 17, 2018 at 4:23 pm #949254

Christian Cox

Hi, you can create a custom Map View that includes Markers that represent each "hotspot". If you need more information about placing Markers on a Map or displaying a Map View, please refer to this document: https://toolset.com/documentation/user-guides/display-on-google-maps/

To draw a custom walking route on a Map, you can use the Google Maps Polyline API. Here's the example from the Google Maps API documentation, edited to use a map created in Toolset:

var mapid = 'map-1'; 
var map = WPViews.view_addon_maps.get_map(mapid);

var flightPlanCoordinates = [
  {lat: 37.772, lng: -122.214},
  {lat: 21.291, lng: -157.821},
  {lat: -18.142, lng: 178.431},
  {lat: -27.467, lng: 153.027}
];
var flightPath = new google.maps.Polyline({
  path: flightPlanCoordinates,
  geodesic: true,
  strokeColor: '#FF0000',
  strokeOpacity: 1.0,
  strokeWeight: 2
});

flightPath.setMap(map);

Replace map-1 with the ID of your map created in Views. Wrap this code in a 'js_event_wpv_addon_maps_init_map_completed' event handler so it is fired when the map is ready. I provided a more complete example implementation in another ticket: https://toolset.com/forums/topic/add-lines-connecting-markers-in-a-google-map/#post-916035
This ticket creates the polyline using on the marker locations, but your line will be unrelated to the markers.