0

ウェブサイトに Google マップを追加しようとしていますが、これを試しました。

 $.getScript("https://maps.googleapis.com/maps/api/js?sensor=false", function () {
     alert("1");          
     var map;
     var myOptions = {
         zoom: 8,
         center: new google.maps.LatLng(-34.397, 150.644),
         mapTypeId: google.maps.MapTypeId.ROADMAP
     };
     alert("2");
     map = new google.maps.Map(document.getElementById("container"), myOptions);
 });

これは機能していません。理由を教えてもらえますか？

編集

スクリプトが完全に読み込まれました。私はこれalert(1)を示しているので知っていますが、その後、コントロールは到達しませんalert(2)。

4

3 に答える 3

4 
document.getElementById(id)

idとは何ですか。それはどこで定義されましたか?

また、getScript は Ajax リクエストを実行するためのものですが、これは実際には Google マップを実行する方法ではありません。通常の方法でスクリプトを呼び出し、ドキュメントの準備ができたときに実行される init 関数を用意するだけです。または、とにかく Google Maps API が提供する window.load イベント リスナーを使用することをお勧めします。

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

<script type="text/javascript">
function init(id) 
     {          
             var map;
             var myOptions = {
                 zoom: 8,
                 center: new google.maps.LatLng(-34.397, 150.644),
                 mapTypeId: google.maps.MapTypeId.ROADMAP
             };
             map = new google.maps.Map(document.getElementById(id), myOptions);
     }

google.maps.event.addDomListener(window, 'load', init('yourDivID'));
</script>
于 2012-06-18T12:09:13.470 に答える
1

これには非同期読み込みを使用する必要があります - https://developers.google.com/maps/documentation/javascript/tutorial#asynch

現在のアプローチでは、スクリプトはこれを行います-

function getScript(src) {
  document.write('<' + 'script src="' + src + '"' + ' type="text/javascript"><' + '/script>');
}

したがって、 を呼び出すと$.getScript、それは無効になります。そして、google.maps.LatLng未定義になります。

非同期バージョンでバージョンを作成しました。フィドル@ http://jsfiddle.net/rifat/G3yPw/を確認できます

于 2012-06-18T13:56:28.257 に答える
0

コンテナ div を確認する必要があります。

幅と高さを指定する必要があります。

そして、私は LatLng の影響を分離していました:

     var map;
     var ll = new google.maps.LatLng(-34.397, 150.644);
     var myOptions = {
         zoom: 8,
         center: ll,
         mapTypeId: google.maps.MapTypeId.ROADMAP
     };
     map = new google.maps.Map(document.getElementById("container"), myOptions);
于 2012-06-18T12:12:39.430 に答える