title: Random Google is not defined error
body: <p>I have the below error when I reload my page several time.  </p>
  
  <blockquote>
    <p>Uncaught ReferenceError: google is not defined</p>
  </blockquote>
  
  <p>This is not an error I always get though.</p>
  
  <p>The following is my javascript code:</p>
  
  <pre><code>$('document').ready(function () {
          var apiKey = '@System.Configuration.ConfigurationManager.AppSettings["googleAPIKey"]';
          var language = $('#Language').text();
          var n = language.indexOf('-');
          language = language.substring(0, n != -1 ? n : language.length);
          var s = document.createElement("script");
          s.type = "text/javascript";
          s.id = "gogapi"
          s.src = "https://maps.googleapis.com/maps/api/js?key=" + apiKey + "&amp;libraries=places&amp;language=" + language + "&amp;callback=initialize";
          document.head.appendChild(s);
          if ($("#Country").val() != '') {
              updateCityLoad($("#Country").val(), "City");
          }
      });
  
  
           function updateCityLoad(country, city) {
                  getCountryCode(country, function (code) {
                      initialize(code, city)
                  });
          }
  
          function getCountryCode(countryId, callback) {
              var countryCode = "";
              $.getJSON('@Url.Action("GetCountryCode", "TestController")' + "&amp;countryId=" + countryId, function (result) {
                  countryCode = result.data;
                  callback(countryCode);
              });
          }
  
                  function initialize(country, cityID) {
                      var cityfield = document.getElementById(cityID);
                      var options = {
                          types: ['(cities)'],
                          componentRestrictions: { country: country },
                      };
                      var autocomplete = new google.maps.places.Autocomplete(cityfield, options);
                      google.maps.event.addListener(autocomplete, 'place_changed', function () {
                          place = autocomplete.getPlace();
                          $(cityfield).val(place.address_components[0].long_name);
                      })
          }
  </code></pre>
  
  <p>What I am doing is to call the function upDateCity upon change of the country field and upon loading the page, if the country field is not empty, load the google api.  It is when the function updateCityLoad is being called upon the document.ready that I get the google error.</p>
  
  <p>Any idea of how to solve this?</p>