title: Getting "Uncaught ReferenceError: google is not defined" error using Google Maps API
body: <p>I'm trying to customize a marker on the map but I keep getting 'google is not defined'. I've tried different things but it's still not working. I have used an API key and also included the maps script before initializing the map.
  This is my html:  </p>
  
  <pre><code> &lt;html class="no-js" lang="en-US" &gt;
          &lt;head&gt;
              &lt;meta charset="UTF-8" /&gt;
              &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
              &lt;title&gt;Home &amp;#8211; Algebra&lt;/title&gt;
      &lt;link rel='dns-prefetch' href='//ajax.googleapis.com' /&gt;
      &lt;link rel='dns-prefetch' href='//s.w.org' /&gt;
      &lt;script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js?ver=2.1.0'&gt;&lt;/script&gt;
      &lt;link rel='https://api.w.org/' href='http://localhost/algebra/wp-json/' /&gt;
      &lt;link rel="alternate" type="application/json+oembed" href="http://localhost/algebra/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Falgebra%2Fhome%2F" /&gt;
      &lt;link rel="alternate" type="text/xml+oembed" href="http://localhost/algebra/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Falgebra%2Fhome%2F&amp;#038;format=xml" /&gt;
          &lt;/head&gt;
          &lt;body class="page page-id-4 page-template page-template-page-templates page-template-page-home page-template-page-templatespage-home-php logged-in offcanvas"&gt;
  
  
  
      &lt;header id="masthead" class="site-header" role="banner"&gt;
          &lt;div class="top-strip"&gt;&lt;/div&gt;
          &lt;div class="top-nav"&gt;&lt;/div&gt;
      &lt;/header&gt;
  
      &lt;section class="container"&gt;
  &lt;section class="map"&gt;
      &lt;div id="map-container"&gt;&lt;/div&gt;
    &lt;div class="contact-container"&gt;
      &lt;div class="contact"&gt;
        &lt;img src="" alt="mail-icon"&gt;
        &lt;span&gt;You can contact us at info@algebraventures.com&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
          &lt;/section&gt;
          &lt;div id="footer-container"&gt;
              &lt;footer id="footer"&gt;
              &lt;/footer&gt;
          &lt;/div&gt;
    &lt;script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKX-BAa2bSAiC89C38o8ir29Q7iOWdQ94&amp;callback=initMap"
    type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type='text/javascript''&gt;
  var myCenter = new google.maps.LatLng(29.714954,32.368546);
      function initMap() {
    var mapProp = {
      center:myCenter,
      zoom:13,
      mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("map-container"),mapProp);
    var marker=new google.maps.Marker({
    position:myCenter,
    title: "AZHA"
    });
    marker.setMap(map);
    var infowindow = new google.maps.InfoWindow({
    content:"AZHA"
    });
    infowindow.open(map,marker);
  }
  // google.maps.event.addDomListener(window, 'load', initMap);
  &lt;/script&gt;
  &lt;script type='text/javascript' src='http://localhost/algebra/wp-includes/js/wp-embed.min.js?ver=4.6.1'&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'd appreciate some help, thanks.</p>