@blog.justoneplanet.info

日々勉強

Google Maps API を使ってみよう(1)

■APIデビューと共に皆とやり方を共有!

  1. Google Maps APIのサイトに行く
  2. 自分のサイトのURLを入力しAPIキーをゲット!
  3. Googleのアカウントを持ってなかったら作ってね。
  4. APIキーとサンプルHTMLが表示される。
  5. とりあえずコピー&ペーストしてHTMLを作ってアップしてみる。
  6. キーはチャント保存してね。

■下記がサンプル

どうでしょう?基本的なブラウザだったら表示できてるはず!

■サンプルソースコード

<script src="http://maps.google.com/maps?file=api&v=2&key=((your key!))" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load(){
    if(GBrowserIsCompatible()){
        var map = new GMap2(document.getElementById("map20070719"));
        map.setCenter(new GLatLng(35.633477,139.765449),14);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
    }
}
load();
//]]>
</script>

■簡単な解説

  • if(GBrowserIsCompatible())でGoogleMapが使えるブラウザの絞ってます
  • elseを使えば使えない人用の表示をする事も出来るらしい
  • map.setCenter(new GLatLng(35.633477,139.765449),14)で初期表示の座標を設定
  • map.addControl(new GLargeMapControl())で左側のマップコントロールを表示
  • map.addControl(new GMapTypeControl())で右上の地図のタイプコントロールを表示

■補足

  • 便宜、仕様上ソースを多少変更しております
  • 上記ソースは全要素が読み込まれた後(</body>と</html>)の間に貼り付けてみて下さい。
  • head内に記述する場合はbodyにonload=”load();”と記述し、スクリプト内のload();は消してください。
  • 上記ソースに関数GUnloadをonunloadで実行するようにしてください

1件のコメント»

Google Maps API を使ってみよう(1)…

Google Mapって

グリグリ動かせて楽しいよね。

実はアレって自分のサイトに移植できるの知ってました?

■APIデビューと共に皆とやり (more…)

RSS feed for comments on this post.TrackBack URL

Leave a comment