スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Google Maps APIについて調べたメモ

Google Maps APIは3年ほど前に調べて使っていたことがあるのですが、もうほとんど忘れて使えなくなってしまったので、簡単に再度調べてみました。

Googleマップ

キーの取得はいいとして、地図にアイコンと情報ウインドウを表示させる方法のメモ。

function load() {

  // ブラウザでGoogle Mapが使えるかどうか
  if (GBrowserIsCompatible()) {

    // 地図を作成
    var map = new GMap2(document.getElementById("example"));

    // センターに表示する緯度・経度、ズームレベルを設定
    map.setCenter(new GLatLng(34.701754, 135.494986), 10);

    // マウスホイールによるズームを有効にする
    map.enableScrollWheelZoom();

    // 地図タイプの切り替えを有効にする
    map.addControl(new GMapTypeControl());

    // 地図の移動、ズームの変更ボタンを有効にする(GSmallMapControl, GSmallZoomなどもある)
    map.addControl(new GLargeMapControl());

    // マーカーを作成
    var marker = new GMarker(new GLatLng(34.701754, 135.494986));

    // 地図上にマーカーをオーバーレイ
    map.addOverlay(marker);

    // マーカークリックのイベントを追加
    GEvent.addListener(marker, "click", function() {

      // 情報ウインドウを表示
      marker.openInfoWindowHtml("Marker Clicked!");
    });

  }
}

マーカーの作成とクリック時のイベント、情報ウインドウの内容などを工夫すると、Googleマップを使った基本的なコンテンツは作れるのかなー。

しばらくリファレンスを眺めていましたが、多いですねw 何ができるかをちゃんと把握するにはまだまだ時間がかかりそうです。

[Google Maps API リファレンス]

新しい記事

ピックアップ

Related Posts Plugin for WordPress, Blogger...
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。