[Resolved] Change what a map shows when there are no search results

[Author]

Posts

[daveG-7]

I have a map that shows the result of a parametric search. My problem comes when the user filters the results such that there are no results. The map then shows a place in the middle of the Pacific Ocean. Instead, I would like it to show the state of Oregon with no markers (ie, be able to control the lat long and zoom level of the map displayed with no results)

I tried putting a transparent marker in the No Results section of the loop. However, I couldn't control the zoom except by setting the map's zoom level when it displayed one result. This doesn't work because the zoom I want for 0 results is much lower than what I want when one legitimate result is returned.

Any ideas on how to get this to work? Thanks.

[Adriano]

Hello,

To achieve that you need to follow this:

1. Call the map render as last thing in the layout
2. Add your default marker inside of the no posts found shortcode
3. Just like this:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<ul class="wpv-loop js-wpv-loop">
		<wpv-loop>
			<li>[wpv-post-body view_template="Loop item in posts"]</li>
          	[wpv-map-marker map_id='map-4' marker_id='marker-[wpv-post-id]' marker_field='wpcf-address-test'][/wpv-map-marker]
		</wpv-loop>
	</ul>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
    [wpv-map-marker map_id='map-4' marker_id='marker-[wpv-post-id]' address='Rua Pedro Trogo - Santo Antônio, Juiz de Fora - State of Minas Gerais, Brazil'][/wpv-map-marker]
	[/wpv-no-items-found]
	[wpv-map-render map_id='map-4' marker_icon='<em><u>hidden link</u></em>
[wpv-layout-end]

[daveG-7]

This doesn't seem to solve the zoom issue. I had already had the no-items found marker showing up, but can't control its zoom level. I want a very zoomed out view for no markers found, but when one marker is found from the search, I want the results zoomed in on that marker.

[Adriano]

You can use the code below in filter JS section:

jQuery( document ).on( 'js_event_wpv_addon_maps_init_map_started', function( event, data ) {
  	if (WPViews.view_addon_maps.maps_data[0].markers[0].marker == 'marker-123'){
      	data.map_options.single_zoom = 1;
    }  
});

First you will need to define an ID for your marker in the wpv-map-marker shortcode inside of no items found. Then use the same ID in the code above and your zoom can be adjusted 🙂

Please let me know if you are satisfied with my reply and any other questions you may have.

Regards,

Adriano Ferreira

[daveG-7]

That worked perfectly - thanks!

[Adriano]

You are welcome.