How to handle map section navigation in mobile

Given a section which takes full height of the device's viewport and have the following controls at disposal of the user:

• Can pan through the map within a certain boundary (a country);
• Can select an state to view it's information;
• Can input or select a city's name to view it's information;
• Can see only one of the informations simultaneously (accordion).

How does one accommodate these functionalities in a handheld device (i.e. mobile phones)? Without annoying the user with:

• Mistakenly get his touch input while scrolling down the page to pan the map ("scroll hijack"?);
• Visual pollution with too much screen elements (e.g.: Map + Information panel);
• Very small font size.

Here's what the designer came up with:

Disclaimer: he/she doesn't have much experience with UX/UI nor have I.

I came up with this prototype*:

*Made in figma

But I don't think it is the "best" solution, for the following reasons:

• The user don't see the selection on the map, it would just popup above it, giving the animation of the selection in a window of 200 milliseconds (maybe delay it to ~750 milliseconds);
• The user's pan interaction is removed, because the panel is now above it.

But it have its pros:

• The user is given space top and bottom to scroll the rest of the page, the section itself is about 75% of the device's total viewport height;
• No extra information noise/pollution on the initial state (inert, i.e.: no first interaction);
• The user is given an option to exit the information panel (top right corner).

My initial question remains, as I'm not too confident with this "solution" that I've provided. I hope it isn't too subjective and there are better solution for this.

Here is a preview on desktop:

The most important elements of the map section are:

• The map itself;
• The information panel.

---

English is not my first language so any edit/suggestion is appreciated.