Google Maps геокодирования: «Google не определен»

Question

Я получаю вопрос, когда я пытаюсь загрузить этот код, и я не могу понять, почему он не работает ...

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     var geocoder = new google.maps.Geocoder(); 
     $(".textarea-autosize").autosize(); 

     geocoder.geocode({ 
      address: '{$order->address_delivery["address1"]},{$order->address_delivery["postecode"]},{$order->address_delivery["city"]}' 
      }, function(results, status) { 
      if (status === google.maps.GeocoderStatus.OK) 
      { 
       var delivery_map = new google.maps.Map(document.getElementById('map-canvas'), { 
        zoom: 10, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        center: results[0].geometry.location 
       }); 
       var delivery_marker = new google.maps.Marker({ 
        map: delivery_map, 
        position: results[0].geometry.location, 
        url: 'http://maps.google.com?q={$order->address_delivery["address1"]},{$order->address_delivery["postcode"]},{$order->address_delivery["city"]}' 
       }); 
       google.maps.event.addListener(delivery_marker, 'click', function() { 
        window.open(delivery_marker.url); 
       }); 
      } 
     }); 
    }); 

    // Fix wrong maps center when map is hidden 
    $('#tabAddresses').click(function(){ 
     x = delivery_map.getZoom(); 
     c = delivery_map.getCenter(); 
     google.maps.event.trigger(delivery_map, 'resize'); 
     delivery_map.setZoom(x); 
     delivery_map.setCenter(c); 

    }); 
</script> 

В возникнет ошибка на var geocoder = new google.maps.Geocoder();

Затем я попытался загрузить следующий сценарий: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

и я получаю другую ошибку:

'Uncaught TypeError: Cannot read property 'offsetWidth' of null'

Кто-нибудь имеет представление о том, почему он не работает?

Answer 1

Карты Google не загружаются в то время, когда вы пытаетесь его вызвать. Вы должны использовать это:

HTML:

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap" async defer></script> 

JS:

function initMap() { 
    // Google maps are now initialized. 
} 

Вам необходимо включить async and defer атрибуты в сценарий - это убедиться, что остальная часть сайта держать загрузка вместо ожидания загрузки сценария (что удобно, потому что оно довольно велико). Во-вторых, вы передаете параметр «обратный вызов» при вызове сценария. Это имя функции, которая должна выполняться при загрузке скрипта. Таким образом, вы можете убедиться, что вы только инициализируете карту, когда она действительно загружена и присутствует в вашем окне.