GoogleMapsAPIを使ってみた。

最近、GoogleMapsAPIの練習ばっかりしてたので、忘れない内に復習のため載せて行きたいと思います。

内容が偏って行くばかりですが・・・。

今回は、はじめの一歩、GoogleMap上の自分が印を打ちたい地点にマーカーを表示させる方法です。

では、どうぞ！

まず、GoogleMapsAPIを使うには、GoogleMapsAPIKeyというコードが必要なので、こちらのSign Up for the Google Maps APIから、下の方にある規約に同意して、自分のドメインを登録します。あと、この際Gmailのアドレスも必要っぽいので、もしお持ちでない方はそちらも登録する必要があります。

ここで登録するドメインについてですが、ボクの場合だと、http://mkicle.biz/で登録すれば、http://mkicle.biz/blog/ページでも、http://mkicle.biz/mukiyuchi/のページでも、GooglemapAPIKeyが使用できます。

逆に、http://mkicle.biz/blog/で登録すると、http://mkicle.biz/や、http://mkicle.biz/mukiyuchi/のページでは使用できなくなります。

なので、必ずしもGoogleMapを使用するページのアドレスを登録しなければいけないというわけでなく、普通にドメインを登録して大丈夫です(当たり前？？)。恥ずかしながら、初めて使った時に、ここでボクはずいぶん困りました(笑)ので、詳しめに書いてみました。

で、登録をすると、ページに"Yourkey is"と自分のAPIKeyが表示されます。

これで、ほぼ完了です。あとは、

<head>～</head>内に、

<script src=http://maps.google.com/maps?file=api&v=2&key=自分のAPIKeyを貼り付けてください type="text/javascript"></script>//<![CDATA[
   function load() {      if (GBrowserIsCompatible()) {
   //地図を作成
   var map = new GMap2(document.getElementById("map"));
   map.setCenter(new GLatLng(35.677335,139.744613), 16); 
   //マーカーを追加(国会議事堂)
   var marker = new GMarker(new GLatLng(35.676148,139.74479));map.addOverlay(marker);
//マーカーを追加(国立図書館)
    var marker = new GMarker(new GLatLng(35.678494,139.744205));
        map.addOverlay(marker);      }
    }    //]]></script>

と書いてください。始めの2行は、APIKeyについての記述で、7行目の

map.setCenter(new GLatLng(35.677335,139.744613), 16);

は、メインとなる地図の((緯度,経度),縮尺)の値となっています。また同じように、9行目、11行目は、国会議事堂と国立図書館の緯度、経度の値を入力していて、これによってマーカーが表示されます。

この緯度と経度を調べるのには、Geocodingが便利です。ここで、住所や名称を入力すると、緯度と経度を出してくれます。

そして、最後に、<body>～</body>タグ内に、

<body onload="load()" onunload="GUnload()"> <div id="map" style="width: 500px; height: 300px"></div> </body>

と書くと、国会議事堂と国立図書館にマーカーが表示された地図が作成されます。当然、"style"で指定されてる部分は、外部のスタイルシートでも管理でき、ここで指定した大きさで地図は表示されます。これで一通り完成です。面倒な方は、GoogleMapsAPIを取得したページで、サンプルのソースが一緒に表示されるので、そのまま貼り付けて、いじった方が上の説明よりわかりやすいかも知れません！

Ho-KAGO After School

タグ:

関連記事

このブログ記事と同じカテゴリのブログ

トラックバックURL

コメントする