Google Maps API isn't loading?
<p>On my website: <a href="http://www.ilovefooddreams.com/eligibility" rel="nofollow noreferrer">http://www.ilovefooddreams.com/eligibility</a> The maps were working completely fine but now all of the sudden it says: </p>

<p>**</p>

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

<p>**</p>

<p>Does anyone know what is wrong? Here is my code:</p>

<pre><code>{% extends "base.html" %}

{% block header_class %}header-expanded slidepanel top
{% endblock %}
{% block header_content %}
  {{ super() }}

&lt;div style="image-align:left;"&gt;
&lt;h2 class="heading h-section" data-barley="index_heading"style="color:black" data-barley-editor="simple"&gt;You are eligible for delivery at any address within this circle.&lt;/h2&gt;
 &lt;/div&gt;

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script async defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDV9O4nd02xCwyy-AeAmFJ_dR3SKh5GKAE&amp;callback=initMap"&gt;
&lt;/script&gt;

&lt;script&gt;

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);

&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="googleMap" style="width:1030px;height:380px;"&gt;&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;



   {% endblock %}
</code></pre>

<p>Thanks for helping!</p>