title: Uncaught Reference Error: google is not defined
body: <p>I saw a dozen of questions with the same title &amp; the problem. After going through all those problems &amp; making changes in the code, I wasn't able to resolve this issue.</p>
  
  <p>My Google map works fine. But in the console, this error is shown. Can anyone please help me figure out this problem.</p>
  
  <p>I specified JavaScript code inside the head tag</p>
  
  <pre><code> &lt;script&gt;
      function loadScript()
      {
      var myKey = "__API-Key__";
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src = "http://maps.googleapis.com/maps/api/js?key="+myKey+"&amp;sensor=false&amp;callback=initialize";
      document.body.appendChild(script);
      }
      window.onload = loadScript;
      &lt;/script&gt;
  
      &lt;script&gt;
  
          function initialize()
          {
              var laa=-34.397;
              var lonn= 150.644;
              var mapOptions =
              {
                  zoom: 7,
                  center: new google.maps.LatLng(laa, lonn),
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  maxZoom: 8,
                  minZoom:2
              };
  
              var map = new google.maps.Map(document.getElementById('location-canvas'),
                  mapOptions);
  
              var marker = new google.maps.Marker({
                  map: map,
                  draggable: false,
                  position: new google.maps.LatLng(laa, lonn)
              });
  
              function bind(eventName)
              {
                  google.maps.event.addListener(map, eventName, function ()
                  {
                      common();
  
                  });
              }
  
              bind('zoom_changed');
              bind('center_changed');
              bind('tilesloaded');
              bind('idle');
  
              function common()
              {
                  var bounds = map.getBounds();
                  var southWest = bounds.getSouthWest();
                  var northEast = bounds.getNorthEast();
                  var getcentre=bounds.getCenter();
                  var ne = map.getBounds().getNorthEast();
                  var sw = map.getBounds().getSouthWest();
                  var zoom=map.getZoom();
                  var centre_lat=getcentre.lat();
                  var centre_long=getcentre.lng();
                  var myLatlng=new google.maps.LatLng(centre_lat,centre_long);
                  var mapProp =
                  {
                      center: new google.maps.LatLng(centre_lat,centre_long),
                      zoom:zoom,
                      maxZoom: 8,
                      minZoom:2,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                  };
  
              }
          }
  
          google.maps.event.addDomListener(window, 'resize', initialize);
          google.maps.event.addDomListener(window, 'load', initialize);
  
      &lt;/script&gt;
  </code></pre>
  
  <p>Inside Body tag:</p>
  
  <pre><code>            &lt;div id='location-canvas' style='width:100%;height:500px;'&gt;
  
              &lt;/div&gt;
  </code></pre>