Google Maps API の使い方・方法を解説

豆知識ネット


ディレクトリ検索

Googleの便利な機能

「Google Maps API バージョン3」の基本とカスタマイズについて解説します。
Web上で地図を表示するツールは様々ありますが、その中の一つが「Google マップ」
Google Maps API を使って会社や施設の案内ページに地図を埋め込んだり、ネットサービスに利用する事も出来ます。
Google Maps API バージョン3の使い方・方法

Google Maps API の基本

バージョン2との違い・変更点
バージョン3は、バージョン2に比べて読み込みが高速化されており、Android や iPhone などの携帯端末(スマートフォン)のブラウザでの速度を考慮して設計されています。

もっとも変わった所は、「API キー(key)が不要」になった事だと思います。

API キーが不要」になった事で、ドメイン(URL)ごとに申請する必要がなくなったなどの利便性が高まりました。

基本的な地図の表示の仕方・方法

地図を表示させたいページのヘッダー部に下記のコードを記述し、Google Maps API のライブラリーを組み込みます。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

最後の「sensor=true」は、位置検知センサーがある機器では true で、パソコンなど位置検知センサー機能がない機器は false を指定するのが一般的です。
Android や iPhoneなどの GPS 機能がある携帯電話端末で地図表示するなら true という事になります。


次に、地図を表示させたい位置に div 要素を追加し、ID 属性を記述します。
ID 属性は任意な文字列です。

<div id="g_map" style="width : 600px; height : 400px;"></div>

※地図の横幅・縦幅を px 単位で指定します。「Android や iPhone」などの携帯電話端末では、画面一杯に表示されるように 100% とするのをお勧めします。

基本的な Java Script の追加
下記のコードをヘッダー部(先程、ライブラリーを追記した下)へ追記します。

<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', function() {
  var mapdiv = document.getElementById('任意のID属性');
  var myOptions = {
    zoom: ズーム,
    center: new google.maps.LatLng(緯度, 経度),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scaleControl: true,
  };
  var map = new google.maps.Map(mapdiv, myOptions);
  });
</script>

任意のID属性には、 div 要素で記述した任意の文字列でサンプルでは「g_map」となっています。
また、「zoom: ズーム」の部分にはズームレベル(0〜19)を「緯度,経度」には地図の中心位置をそれぞれ指定します。

Google maps API カスタマイズ

ワンポイント

Googleより「Google Map JavaScript API バージョン3は正式な JavaScript APIとなり、JavaScript API 2は、Googleの廃止ポリシーにより正式に廃止されました」と報告がありました。
また、アップデートなど新しいバージョンにコードを移行する事を推奨しています。

ブックマーク

はてなブックマーク追加 MyYahoo 追加 delicious ブックマーク追加 livedoor クリップ追加 google ブックマーク追加 buzzurl ブックマーク追加 nifty クリップ追加