Add click event on map marker to open in new tab with directions

Add the following custom JS where you insert the map and marker shortcodes (e.g. in a content template).

You will need to edit the map ID.

( function( $ ) {
	$( document ).bind( 'js_event_wpv_addon_maps_init_map_completed', function(){

		var mapID = 'map-1'; // Editar

		var marker = [], lat, lng, target;

		// Locate the markers and add click handlers to open required URL
		$('[data-marker]').each( function( i, e ){
			
			markerID = $(this).attr('data-marker');

			marker[i] = WPViews.view_addon_maps.get_map_marker( markerID, mapID );

			lat = marker[i].position.lat();
			lng = marker[i].position.lng();
			target = "https://www.google.com/maps/dir/?api=1&destination=" + lat + "," + lng;

			marker[i].addListener('click', function(){
				window.open( target , '_blank');
			});

		});

	});
})( jQuery );

Let us know if this snippet is not working for you:

This snippet doesn’t work
0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments