Sometimes, you might want to change map settings only when certain conditions are met. You might even use some map options that are not available through the Maps interface. Here, we explain the basics of doing this using custom code.

In our example, we want to change map settings when using the map on touch devices.

Changing settings when using Google Maps API

  1. To add custom settings to a map, you need to listen to js_event_wpv_addon_maps_init_map_completed.
  2. Then, get the map using our .get_map() method.
  3. Finally, use the Maps API .setOptions() method to programmatically change any map option.  You can change any available map option. Please refer to the Google Maps API documentation for a list of options that is possible to change.

Here is how our full code looks like:

Change map settings for a Google Map 
// Listen to js_event_wpv_addon_maps_init_map_completed
$( document ).on('js_event_wpv_addon_maps_init_map_completed', function( event, event_settings ) {
	// Get the map using our .get_map() method
	var map = WPViews.view_addon_maps.get_map( event_settings.map_id );
	// Use Maps API .setOptions() method to programmatically change any option on the map.
	if ( map ) {
		map.setOptions({gestureHandling: 'greedy'});
	}
} );

Changing settings when using Azure Maps API

The process for Azure Maps is very similar, with a few notable differences.

  1. To add custom settings to a map, you need to listen to  js_event_wpv_addon_maps_init_map_completed.
  2. Azure starts initialization a little bit earlier than Google Maps, so you might need to use the _.delay function. It ensures that Azure maps have enough time to initialize. This may or may not be needed, depending on where your code snippet is and how it is loaded and started.
  3. Get the map using our .get_map() method.
  4. Use Azure Maps API methods to programmatically change any option on the map.

In our example, we will add traffic flow to an Azure Map, a feature not yet available through the Toolset Maps user interface. Visit Azure Maps API documentation for a full list of methods you can call on a map object.

Here is how the full code looks like:

Change map settings for an Azure Map 
// Listen to js_event_wpv_addon_maps_init_map_completed
$( document ).on('js_event_wpv_addon_maps_init_map_completed', function( event, event_settings ) {
	// Use _.delay function to make sure that the map is fully initialized
	_.delay(function() {
		// Get the map using our .get_map() method
		var map = WPViews.view_addon_maps.get_map(event_settings.map_id);
		// Use Azure Maps API methods to programmatically change any option on the map
		if (map) {
			map.setTraffic( {flow: 'relative'} );
		}
	}, 1);
} );