Google Maps coğrafi kodlama: Bu kodu yüklemeye çalıştığınızda

Question

ben bir sorunu alıyorum ve çalışmıyor neden bilemiyorum "google tanımlanmadı" ...

<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> 

hata aşağıdaki senaryoyu yüklemeye çalıştı Sonra var geocoder = new google.maps.Geocoder();

üzerine occurrs: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

ve ben başka hatayı alıyorum:

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

Neden kimse işe yaramadığına dair bir fikri var mı?

Answer 1

Google Haritalar, aramaya çalıştığınız anda yüklenmez. Bunu kullanarak edilmelidir:

HTML:

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

JS: Eğer komut içine async and defer özellikleri eklemeniz gerekebilir

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

- Bu web sitesinin kalanı tutmak emin olacaktır betiğin yüklenmesini beklemek yerine yükleme yapmak (oldukça kullanışlı olduğu için kullanışlı). İkinci olarak, komut dosyasını çağırırken "geri arama" parametresini iletirsiniz. Bu, betik yüklendiğinde çalıştırılması gereken işlevin adıdır. Bu sayede haritayı, sadece gerçekten yüklendiğinde ve pencerenizde bulunduğunda başlattığınızdan emin olabilirsiniz.