Googleマップを使用するとdiv内にapiが表示されない

Question

Googleマップを無駄なくページに追加しようとしています。私のコードは独立して動作しますが、実際のWebページに追加するとマップは全く表示されません。あなたが見ることができるように

<div id="map" style="width:100%;height:500px"></div> 
<script> 
    var map; 
    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 8 
    }); 
    } 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=initMap" 
async defer></script> 

は、ページが、この

のように見えるdivがマップをポップアップ表示ではなく。どのように私はこれを表示するだろうか？

Answer 1

myMap関数が呼び出されたことがありません。あなたは間違ってそれを呼んでいる、それは&ではなく、あるべき

編集

<script async defer src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap"> </script> 

...

function myMap() { 
    ... 
} 

myMap(); 

またはスクリプトにコールバックパラメータを使用し、同様にそれを呼び出すことができますスクリプトパラメータの&詳細については

<div id="map" style="width:500px;height:500px"></div> 

<script> 
    function myMap() { 
     var mapCanvas = document.getElementById("map"); 
     var mapOptions = { 
      center: new google.maps.LatLng(51.508742,-0.120850), 
      zoom: 5 
     }; 
     var map = new google.maps.Map(mapCanvas, mapOptions); 
    } 
</script> 

<script async defer src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=myMap"> </script> 

、にあなたのコードを変更しようと、このfiddleをチェックしてください。

- 私はあなたがそれはあなたのサイトに仕事を得ることができない理由はわかりません

から2を編集します。私はそれをうまくやることができて以来。以下は

私はあなたのサイトにコンソール上で実行時に注入したスクリプトです。私はあなたのスクリーンショットから伝えることができますどのような

$('.content--body__wrapper').append('<div id="map" />') 
$('#map').attr('style', 'width:500px; height:500px') 
$('.content--body__wrapper').append(`<script> 
    var map; 
    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 8 
    }); 
    } 
</script>`); 
$('.content--body__wrapper').append(`<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI&callback=initMap" async defer></script>`); 

は、あなたのinitMap関数が呼び出されませんです。私はそれがあなたのコンソールにエラーを提供しないので、それはGoogleマップからのコールバックかどうかは分かりません。

次に、別のアプローチを試してみてください。コールバックではなくjsでinitMapに電話してみてください。

<div id="map" style="width:100%;height:500px"></div> 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBcwtM8EBe7BE1NyPbU5SDYVYoBBtbtpTI"></script> 

<script> 
    $(function() { 
     var map; 
     function initMap() { 
      map = new google.maps.Map(document.getElementById('map'), { 
       center: {lat: -34.397, lng: 150.644}, 
       zoom: 8 
      }); 
     } 
     initMap(); 
    }); 
</script>