CODEWITHSUNDEEP
javascripthtmlcssgoogle-maps
Elixir
Elixir

Reputation: 1

Fix Oops Something Went Wrong! In google maps api

On my website: http://www.ilovefooddreams.com/eligibility I have a google map shown and all of the sudden it now says.

"Oops! Something went wrong.This page didn't load Google Maps correctly. See the JavaScript console for technical details."

I looked everywhere I could find and they said to get an API key. I have one hooked up but it still doesn't work.

Here is the code

    <html>
<head>
  </head>
  <body>
<div id="googleMap" style="width:1030px;height:380px;"></div>


</body>
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDV9O4nd02xCwyy-AeAmFJ_dR3SKh5GKAE&libraries=places&callback=initialize"

    async defer>
</script>

<script>

var amsterdam=new google.maps.LatLng(34.0789742,-118.361875);
function initialize()
{
var mapProp = {
  center:amsterdam,
  zoom:13,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:3000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
  });

myCity.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

</script>



</html>

How do I fix this?

Thanks!

Upvotes: 0

Views: 5812

Answers (2)

geocodezip
geocodezip

Reputation: 161334

The version that is currently on your website is reporting Google Maps API error: MissingKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#missing-key-map-error in the javascript console.` because there is no key on that page where the API is being included (it is not the same as what you posted in your question):

<script
src="https://maps.googleapis.com/maps/api/js">
</script>

Upvotes: 1

Tah
Tah

Reputation: 1536

You have a callback in the script referencing a function called initMap. You need to update it to initialize

<div id="googleMap" style="width:1030px;height:380px;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDV9O4nd02xCwyy-AeAmFJ_dR3SKh5GKAE&callback=initialize" async defer></script>
<script>
function initialize()
{
var amsterdam=new google.maps.LatLng(34.0789742,-118.361875);
var mapProp = {
  center:amsterdam,
  zoom:13,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var myCity = new google.maps.Circle({
  center:amsterdam,
  radius:3000,
  strokeColor:"#0000FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#0000FF",
  fillOpacity:0.4
  });

myCity.setMap(map);
}

</script>

JSFiddle

Make sure to remove the listener as the callback handles this.

Upvotes: 0

Related Questions