Locations Vertical: Change no results map default view

Search Best Practices - Search Front-End
1

Hey team, for one of my clients in Germany the map shows/centers the US if they don’t allow the browser to access their location (or haven’t accepted yet). Search query is for nearby locations (“Standorte in meiner Nähe”, which is one of their vertical prompts).
Can this default be modified to center Germany for the client (or for all clients that only have locations in Germany)?

20211213_us-map_community
20211213_us-map_community1222×539 52 KB

Any help is highly appreciated! Thanks!

2

Hi Hauke,

In your locations map component, do you have displayAllResults in the noResults object set to true? This property would display the map pins for all possible results when no results are found. I’m wondering if this would default the map to center around the locations that are actually in the experience.

For the vertical full page map component, displayAllResults: false by default because our user testing showed it was a confusing experience. You can change this if it works better in this case.

Read more about the No Results configuration in our maps module and check out the map component in the SDK documentation for more info.

Let us know if this helps fix it and, if not, we can explore other options!

3

Hi @Kristy_Huang ,

Thanks for your feedback!

I set displayAllResults to true on the locations vertical.
Search test 1: locations near me (without allowing browser location access which triggers no results).
Search test 2: A far away location that triggers no results (without allowing browser location access).

In both cases the locations’ cards now show up in the vertical search results (which is good) but unfortunately 1. The map still centers the US if the user doesn’t allow browser location access and 2. pins don’t show up at all.
Seems like this map view is a global default setting.

Is there any other option?

4

Hey team,

Some additional context:
The behavior described above sometimes comes up by just opening the locations page (no active search query) and hitting refresh a couple of times (see screenshot below).

Can this by any chance be caused by the integration / JS + iFrame init and loading speed?

20211221_us-map_community
20211221_us-map_community1149×856 177 KB

5

Hi @Hauke_Hagen ,

The issue you’re running into with the no results might be because displayAllResults: true needs to be set in both the VerticalResults component, and in the mapConfig.noResults. It sounds like you might just have it in VerticalResults.

However, as Kristy originally mentioned, this did cause some confusion in user testing. I’d therefore recommend:

  1. Set displayAllResults: false in your VerticalResults component (and mapConfig).
  2. In your mapConfig, pass a default center to Mapbox using the providerOptions attribute.
//truncated
      "mapConfig": {
        "mapProvider": "MapBox", 
        "noResults": {
          "displayAllResults": false 
        },
        "providerOptions": {
           "center": {
            "lon": 13.4050, 
            "lat": 52.5200
          }
        },
//truncated
}

This will center the map on Berlin (or whatever lat/long you specify) when there are no results.

The other provider options you can pass Mapbox are listed here, Map | Mapbox GL JS | Mapbox, and more information can be found in the Provider Options section of this module, Understanding Maps | Hitchhikers

Let us know how this works for you!

Thanks,
Rose