title: Google Maps API isn't loading?
body: <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>