When running on an iPhone SE with iOS 13, Google Maps briefly displays images for about 1 second and then shows the error: "Sorry, we have no imagery here". It happens on all places, and on all zoom levels. However, this issue does not occur on devices running iOS 14 or later.
The API key is valid and enabled for Maps JavaScript API. The issue occurs on a stable internet connection and over HTTPS. Add full Policy
examp Code:
import { Wrapper, Status } from "@googlemaps/react-wrapper";
import React, { useRef, useEffect } from "react";
const render = (status) => {
if (status === Status.LOADING) return <div>Loading...</div>;
if (status === Status.FAILURE) return <div>Error loading maps</div>;
return null;
};
const MyMapComponent = () => {
const ref = useRef();
useEffect(() => {
const map = new window.google.maps.Map(ref.current, {
center: { lat: -34.397, lng: 150.644 },
zoom: 14,
});
}, []);
return <div ref={ref} style={{ height: "400px", width: "100%" }} />;
};
const MapWrapper = () => (
<Wrapper apiKey="YOUR_API_KEY" render={render}>
<MyMapComponent />
</Wrapper>
);
const Home = () => (
<div>
<h1>My Google Map</h1>
<MapWrapper />
</div>
);
export default Home;
Downgrading Maps JavaScript API version to 3.56 temporarily resolves the issue. However, this is only a temporary solution.
<Wrapper apiKey="YOUR_API_KEY&v=3.56" render={render}>
<MyMapComponent />
</Wrapper>
Any clues on this issue is appreciated. Thank you!
I believe this is caused by the version 3.57 update to the Google Maps Javascript API that was released in late May 2024.
The image tiles are now served in the .webp format and a lot of devices that run older versions of Safari don't support it!
https://caniuse.com/?search=webp
https://developers.google.com/maps/documentation/javascript/releases#3.57.2