Serious Bug: Map - Mobile map pans incorrectly when viewing an organization

[fancyham]

VERY HIGH PRIORITY -- HOT FIX REQUESTED.

Re-creating this as a new issue per @hanapotski because the solution for

• Serious Bug: Map - Mobile map doesn’t update when viewing an organization #2028
  didn't seem to work -- the issue with the map panning to the wrong ___location still exists.

A hint for this: Part of the issue seems to be the map's zoom level. At default zoom, it's not a problem. Changing the zoom causes the problem.

Describe the bug

Serious bug:

When viewing a list of organizations, and tapping one to get details about it, the map does not update show or highlight the organization’s pin. Often the pin is way off-screen.

The map should re-center (ideally with a smooth scroll/pan) on the highlighted pin automatically, ideally showing both the user’s current ___location and the pin so that they can determine the relative ___location.

Steps to reproduce the issue

(if applicable, please specify platform (iOS, Android, Windows, Mac version) and brower)

1. Go to foodoasis.net
2. Enter a ___location to get a list of organizations
3. Scroll around the map, zoom in or zoom out
4. Tap an organization to view the organization detail page
5. Map does not update to show the organization’s pin.

See more videos at
-#2028

What's the expected result?

Map should re-center on the organization’s pin automatically, each time a new organization is viewed.

Ideally, the map smoothly pans to the new ___location, and ideally, the user’s current ___location / entered address is also visible on the map (though this may be difficult if the user has panned the map manually)

See Apple or Google maps or Yelp on mobile phones for example.

What's the actual result?

The organization’s pin may be highlighted, but is often off-screen with no indication for how to find the pin itself.

This is a regression — the previous version centered on highlighted pins properly.

Additional details / screenshot

A similar problem appears when searching from the map screen.

1. From landing page, enter an address. On desktop, map Pin appears in the wrong place but map pans correct place at first.
   

2. Do a search again from the map page and the map now re-centers in the wrong place, and the pin doesn’t move to the correct place.
   

ScreenRecording_07-19-2024.17-15-01_1.mp4

To it might have something to do with loading the page for the first time vs going to a new ___location

Device configuration

• Device: iPhone 13 mini
• OS version: 17.4
• Browser: Safari

Related issues

• Text panel obscures map and pin on mobile, off-center on desktop #2168
• Serious Bug: Map - Mobile map doesn’t update when viewing an organization #2028

When making your PR

Please assign @fancyham and @Shienny1 to PRs so we can review