2010-12-13 18 views
1

私のサイトで働く基本的なGoogleマップの例を手に入れることができませんでした。私は自分のページに次のdivを持っている:GoogleマップAPIの基本例

<div id="map_canvas" style="width:100%; height:100%"></div> 

そして、私の文書の頭の中で次のよう

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    function initialize() { 
     var latlng = new google.maps.LatLng(-34.397, 150.644); 
     var myOptions = { 
      zoom: 8, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    } 
    jQuery(document).ready(initialize); 
</script> 

要素が私のDOMにロードされ得ているように見えるが、目に見えるはありませんページの地図。

答えて

3

Google Map not showing upによると、divのパーセンテージのサイズ(100%など)が正しく機能しないようです。 divのピクセルの高さと幅を明示的に指定する必要がありました。

+0

Mike Williamsのオンラインリソース - http://econym.org.uk/gmap/basic19.htm - "style =" width:100%; height :100% "と表示されている場合は、高さがゼロの地図divが表示されます。これは、divがのサイズのパーセンテージになるようにしようとしていますが、デフォルトではは不確定な高さです簡単な方法は、その高さがページの100%になるようにを変更することです。 –

0

あなたのサイトにjQueryが有効になっていますか?それ以外の場合、bodyタグ内で "onload = initialize();" - attributを作成してjavascriptを実行します。

私の知る限り、あなたのinital-requestにはAPIキーが必要ですか?

+1

はい、私はjQueryを有効にしています。ドキュメントのロード時にinitialize()関数が呼び出されます。 APIキーは古いバージョン2のGoogle Maps APIの一部であり、不要になりました。 – Kyle

0

コードは大丈夫です。ドキュメントの例と似ていますので、正しく動作するはずです。

初期化機能から画面に情報を印刷しようとしましたか? latlng、myoptions、およびmap変数が正しく作成されているかどうかを確認します。

使用されている場合は、初期化関数を呼び出すことに問題があります...

0

私はあなたのコードをテストし、da_didiが示唆されているように私は<body onload="initialize()">を使用する場合iwが正常に動作します。 jquery.jsのインポートディレクティブがありますか?

+0

はい、jQueryがインポートされ、正しく動作しています。私がOPで述べたように、da_didiへのコメントとして、initialize関数が呼び出されていて、一部の要素がdivにロードされているようです – Kyle

+0

あなたの投稿を編集して、それをネットに書いて –

関連する問題