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();

にoccurrsそれから私は、次のスクリプトをロードしようとした：<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

をし、私は別のエラーが出る：

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

を210

誰もそれがうまくいかない理由を知っていますか？

Answer 1

Googleマップは、呼び出ししようとしているときに読み込まれていません。あなたはこれを使用してする必要があります。

HTML：

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

JS：あなたのスクリプトにasync and defer属性を含める必要が

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

を - これはウェブサイトの残りの部分は維持していることを確認しますスクリプトが読み込まれるのを待つのではなく読み込み（これは非常に大きいので便利です）。 第2に、スクリプトを呼び出すときに "コールバック"パラメータを渡します。これは、スクリプトがロードされたときに実行されるべき関数の名前です。こうすることで、マップが実際にロードされてウィンドウ内に存在するときにマップを初期化することだけを確認できます。