How to combine a large map and a long list in design?

Question

User interface

Situation:
There are 2 elements on the page - a list of companies (on the left, 35% of the screen width) and a map (on the right, 65% of the screen width) showing the locations of these companies. The height of the list of companies on an average monitor is about 20-25 screens. The map is attached to the top of the screen, occupies the maximum height and travels along with the list scroll.

Problem:
It is logical that the most optimal way to navigate through both elements is to scroll (for the map, it changes the scale). But since the map is on the right and is wider than the list, in most cases the list will scroll when the cursor is over the map. In this case, instead of scrolling through the list, the user will scroll through the map.
Of the obvious solutions:
Disable map scrolling, let them use the Zoom tools and the left mouse button to drag the center of the map, as, for example, they did on realty.yandex.ru.
Cons: Given that the map is no less important than the list and requires constant zoom changes, scrolling is still needed there.
Is there a wiser solution to this interface problem or am I doomed to leave users with one of the crutches?

Answer 1

First you need to understand which of the elements has priority. If the final information is located on the list (organization name, phone number, email, work schedule, description, reviews, etc.), then this element should be emphasized and given maximum space. If the essence of the service is to show the density of objects on the map, or if the choice is made precisely by location in the city with an accuracy of 100 meters, and not by the description of the institution, then you can leave the map as the main element.
Judging by the screenshot, you have a catalog of places in the city. It contains the most necessary information for the user - in the list. A person, by and large, does not care where the car service is located within his area. The main thing is that there are good reviews and the type of work that the user needs.
Therefore, I would advise you to reduce the map to 50% of the screen, and give the rest to the list.
I would place the list to the right of the map. The user will first zoom the map to his area, and then search for the desired organization in the area. Therefore, it first works with the map (on the left), and then drives the list (on the right). So the cursor will follow the user's attention and will not end up on an unnecessary element at an unnecessary moment.
Airbnb.com had a similar dilemma before the redesign. See how they solved this problem in the current design.

Answer 2

As an option, you can do this:
If the list of companies is scrolled to the very bottom, then we begin to zoom in on the map.
Most likely, the user will only zoom in when they have viewed the entire list.

Answer 3

As an option, you can do this:
Make a drop-down list (or filters) from the list, then if it has scrolling, then after opening, i.e. when the cursor is on the list area.
You can also do this:
Show the first few items of the list, the rest after clicking on "show 10 more", then the cursor after clicking will be on the list area and the user will get used to scrolling through it when the cursor is on it, and intuitively guess to move the cursor to the map when he you need to use the scroll on the map

Answer 4

https://ru.airbnb.com/s/%D0%9B%D0%B8%D1%81%D1%81%D...
airbnb prioritizes apartment listings.