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.
- Device: iPhone SE
- OS: iOS 13
- Browser: Safari
- @googlemaps/react-wrapper version: 1.1.35
- Nextjs13
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!
