I’m using the Google Maps JS API to load and configure a map. In our testing, we noticed that when the map page (https://silomillstx.webdevdla.cc/location/) is loaded on a Mac with Mac display (built-in display, or laptop display), in MOST cases the map only displays a solid grey, and when the mouse is used to try and move the map, it throws “InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: NaN is not an accepted value” errors.
Map showing grey on native monitor
Now, here’s the truly bizarre part. If I move the exact same window from my laptop screen to one of my external displays (2 over HDMI, 1 over USB-C) and reload the exact same page, it displays and behaves correctly.
Map showing correctly on external monitor
If I move the window back to the native display, the page appears correctly until I reload the page, at which point I’m back to a solid grey, non-working map. ABSOLUTELY no difference in the page code. Literally, the only difference is the display on which the window loading the code is showing.
- The most consistent behavior is seen when the window is maximized to act as virtual desktop.
- When not acting as a virtual desktop, the behavior is a bit less consistent – if initially loaded on one display and then moved to another, it will keep non-working behavior until loaded at fullscreen, but if loaded on an external display (where it works) and then moved to the native display and reloaded, it stops working correctly.
- consistent behavior is seen on three other Macs, with a mix of Intel and M2 processors.
- consistent behavior is seen across Safari 16.5, Chrome 115, Vivaldi 6.1, MS Edge 115, and Firefox 116.
- The behavior is ALSO seen on browserStack.com test systems when the browserstack window is displayed on the native vs external monitor.
- All-in-one Macs have occasionally seen the map load correctly, but mostly not.
- It also doesn’t appear to load on iPads.
So, previous versions of my map generating code worked everywhere, and basically used PHP to retrieve the map settings and then echo out the JS code. It was messy but it worked.
This version runs PHP to pull all the settings into an array that is then turned into JSON and attached to the document object. Then, JS code is used to retrieve the values and run the JS API code. Much cleaner, except for this one issue.
I’ve used Math and Number classes to make sure the lat/lng are rounded to 6 decimal places and passed as numbers, not strings. (Same with zoom level, but rounded to an integer.)
At this point, I’m at a bit of a loss. All I can imagine is that somehow the PHP array->JSON has munged something up, but why it would only affect native Mac displays and not external displays on the same computer, same browser, same browser window, even, is quite beyond me.
I need a lifeline!