react-google-maps-api
react-google-maps-api copied to clipboard
JustFly1984
API key Does NOT work with Safari
using the api like this works perfectly with chrome:
return (
<MapPage style={{ height: "100vh", width: "100%" }}>
<LogoSection logo={logo} />
<LoadScript googleMapsApiKey="xxx">
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={zoom}
>
but in safari it does not recognize the api key.
It appears that something is missing/broken with the api key injection for safari. I’m noticing that your examples on the documentation website (https://react-google-maps-api-docs.netlify.app/) are also doing the same thing with safari. So, I don’t think this has anything to do with my implementation.
Do you have any errors in the browser's console? Does the billing enabled in the google cloud account?
@dvislov yes billing is enabled
And it works fine in chrome.
It seems like Safari might not be getting the api key? Since it is telling me to enable billing
But billing is enabled and it works in chrome. Only safari is giving me that error.
@AJTJ Could you please open this simple "Hello World" html example from the Google Maps docs with your key in both browsers?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
window.initMap = initMap;
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
Because I have similar issue, but the API key is provided by the client and I have no any access to its settings. The map is working in the Brave browser, neither in Chrome nor Safari.
I've found another option to load google maps instance https://developers.google.com/maps/documentation/javascript/overview#js_api_loader_package Did you try it?
@dvislov I tried your example. It works in chrome but it does NOT work in Safari.
This is really interesting, and makes me wonder what the problem is. Safari is giving me the same error
.
I tried using the loader.load().then(... method, and it didn't make a difference
All I see in safari logs is errors from google itself, not from our library.
@JustFly1984 yes, so I just tried rewriting my map component using the useLoadScript but I'm still getting the "development purposes only" while in Safari.
You can see it live here: https://yukonliteracy.com/little-libraries/#/ (where it will NOT work in safari, but it does work in chrome)
You can see my code here: https://github.com/Yukon-Literacy-Coalition/ylc_website_v2/blob/master/src/LittleLibraries/index.jsx#L157
@dvislov did you ever solve this problem so that it works in every browser? And on mobile?
@AJTJ Yes, we've checked the billing for the modules we need (places, drawing, etc.) For now everything works fine in Chrome/Safari.
@dvislov what was the problem for you? Did you need to set up billing differently so that it worked in different browsers?
@AJTJ Actually I don't know, it just started working one day. So, the issue depended on some API key settings I suppose
I also have this issue, I tried more than 5 different api keys and still it doesn't work in safari! please let me know if you find a way to resolve it
Well, as stupid as it was, the issue was that our google maps api service wasn't fully configured and purchased. I still don't know why it was working in some situations, but not others.
That being said, make sure you've purchased and configured your google maps api key.