Google Maps API V3 を使って地図を表示する

SPECIAL

HASH(0x7fac8e09de78)

Google Maps API V3

平成 22 年 8 月 19 日現在、Web ページに地図を表示するための Google Maps API V3 が Google より提供されています。

この Google Maps API は、無料会員も含めて、不特定多数の一般の人が利用できる場所に地図を設置する場合であれば、商用・非商用を問わず無料で利用することが出来るようになっています。

少なくとも現時点での情報ですが、地図の表示さえ不特定多数の人が利用できれば、そこに乗せるための情報料を第三者から貰うような商用利も可能だそうです。また、SNS などの一般に閉じたサイトように Google Maps API Premier という有料サービスも提供されているとのことでした。

この辺りの見解は、公式の Google Maps API 利用規約 や Google Maps API Premier 利用規約 の方が確実だろうと思いますので、そちらも併せてご確認ください。

 

ともあれ、この Google Maps API V3 を利用すれば、緯度と経度の情報から、その場所の地図を簡単に表示することができるようになります。

住所から緯度と経度を取得 （ジオコーディング） したり、逆に緯度と経度から住所を取得 （リバースジオコーディング） したりといったこともできるようになっているようですが、今回は簡単に、緯度と経度の情報をもとに、それを地図に表示して、その位置に印をつけるということをやってみたいと思います。

なお、Google Maps API V3 からは API Key というものを URL 毎に取得する必要がなくなり、だれでもすぐに実装することが出来るようになった様子です。

 

Google Maps API V3 の利用準備

Google Maps API V3 を利用するには、それを利用したい Web ページの <HEAD> の中で、次のように Google Maps API スクリプトを読み込んであげる必要があります。

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

これだけで、Google Maps API V3 を利用する準備が整います。

ここで "senser" という値を引数で指定していますが、これは GPS 当の位置センサーのある機器の場合には "true" を、通常のブラウザーでは "false" を設定する形になるようです。

 

なお、SSL サイトでこのスクリプトの読み込みを行うと、Internet Explorer の場合は、暗号化された通信とされていない通信とが混在しているという警告メッセージが表示される場合があります。これを回避する方法を調べてみると、たとえば Google Maps API Premier と契約するなど、SSL で利用可能な Google Maps API を利用する必要があるようでしたが、詳しいところは分かりません。

 

Google Maps API V3 で地図を表示する

それでは、さっそく地図を表示してみます。

上記の Google Maps API 3 スクリプトの組み込みが終わったら、地図を表示したい場所に、次のように <DIV> ブロックを用意します。

<div id="map1" style="width: 400px; height: 240px;"></div>

このようにしたら、ページ内のどこかで次のスクリプトを実行します。

<script type="text/javascript">

 

function drawMap1()

{

var map_tag = document.getElementById('map1');

var map_location = new google.maps.LatLng(35.67661272328936, 139.76119573116432);

 

var map_options =

{

zoom: 16,

center: map_location,

mapTypeId: google.maps.MapTypeId.ROADMAP,

};

 

var map = new google.maps.Map(map_tag, map_options);

}

 

google.maps.event.addDomListener(window, 'load', drawMap1);

 

</script>

ここで、getElementById の引数に指定されている 'map1' は、地図を表示したい <DIV> タグにつけた ID を指定しています。また、表示したい位置を google.maps.LatLng という型として、緯度 "35.67661272328936" 経度 "139.76119573116432" となるように指定しています。

その他の各種オプションを指定の上、google.maps.Map を、表示位置と表示オプションを指定して生成すれば、ページ上に地図が表示されます。

 

実際に、上記のスクリプトをこのページに含めると、次のような地図を表示させることができます。

このように簡単なコードを記載するだけで、とても高度な地図をページに埋め込むことができました。プログラミングに慣れている人なら、ソースコードの面でも自然でわかりやすく記載できることが見て取れるかと思います。

なお、地図表示の際に指定できるオプションとしては、次のものがあるようです。

オプション名 必須 データ型 用途
backgroundColor   string 地図の背景色を '#000000' のように指定します。地図画像が読み込まれるまでの間に表示される色だそうです。
center ○ google.maps.LatLng 地図の中心位置を示す緯度経度情報です。
disableDefaultUI   boolean 標準的な地図操作インターフェイスを有効化または無効化します。
disableDoubleClickZoom   boolean ダブルクリックによる地図のズームを有効化または無効化します。
draggable   boolean ドラッグアンドドロップによる地図の移動を有効化または無効化します。既定では有効化されています。
draggableCursor   string ドラッグ可能なオブジェクトにカーソルを乗せた際のカーソルを、カーソル名や URL で指定することができるそうです。
draggingCursor   string ドラッグ操作中のカーソルを、カーソル名や URL で指定することができるそうです。
keyboardShortcuts   boolean キーボードによる地図操作を有効化または無効化します。既定では有効化されています。
mapTypeControl   boolean 地図の種類を利用者が変更することが出来るかどうかを指定します。既定では変更可能です。
mapTypeControlOptions   google.maps.MapTypeControlOptions 選択可能な地図の種類を mapTypeIds 配列で、地図切り替え UI の表示位置を position で、選択方法の種類を style で指定します。表示位置は "TOP_LEFT" や "LEFT", "BOTTOM" といった 8 方向で指定します。選択方法の種類は "DEFAULT", "DROPDOWN_MENU", "HORIZONTAL_BAR" から指定します。
mapTypeId ○ google.maps.MapTypeId 表示される地図の種類を指定します。"HYBRID" ならば "地図+写真" の形式で、"ROADMAP" ならば通常の地図の形式で、"SATELLITE" ならば "航空写真" で、"TERRAIN" なら地形図の形で表示されます。
navigationControl   boolean 地図の拡大縮小や移動などを行うためのナビゲーションコントロールを表示するかどうかを指定します。既定では表示するようになっているようです。
navigationControlOptions   google.maps.NavigationControlOptions ナビゲーションの表示位置は "position" プロパティーを使用して "TOP_LEFT" や "LEFT", "BOTTOM" といった 8 方向で指定します。"style" プロパティーではナビゲーションの種類を選択します。"SMALL" は拡大縮小操作のための小型のボタンが表示されます。"ZOOM_PAN" では、地図の移動やスライダーでの拡大縮小といった操作を行える大型のコントロールが表示されました。他については、試してみた感じでは "DEFAULT" では、"SMALL" と同じコントロールが、"ANDROID" では "ZOOM_PAN" と同じコントロールが表示されるようでした。
noClear   boolean 地図表示用の <DIV> タグ内の内容を消去しないかどうかを指定するようですが、よく分かりませんでした。
scaleControl   boolean 地図の縮尺率や距離を表示するかどうかを指定します。既定では表示されるようになっていました。
scaleControlOptions   google.maps.ScaleControlOptions 縮尺の表示位置は "position" プロパティーを使用して "TOP_LEFT" や "LEFT", "BOTTOM" といった 8 方向で指定します。"style" プロパティーでは縮尺表示の種類を選択するようになっています。ただ、ここで選択可能なものは "DEFAULT" しかないようでした。
scrollwheel   boolean マウスのスクロールホイールで地図の拡大縮小を行えるようにするかどうかを設定します。既定では有効になっているようでした。
streetView   google.maps.StreetViewPanorama  
streetViewControl   boolean ストリートビュー表示のためのコントロールを地図上に表示するかどうかを設定します。既定では無効になっているようでした。
zoom ○ number 地図のズームレベルを指定します。ズームレベルは 0 から 19 までで指定し、数値が大きいくなるほどより接近した地図が表示されるようになります。

ひとつ理解が及ばず空欄になっているところもありますが、ともあれこのようなオプションを組み合わせることで、さまざまな地図を利用者へ提供することが出来るようになっています。

 

Google Maps API V3 で地図上に印を表示する

Google Maps API V3 では、地図上に印をつけることも簡単にできるようになっています。

印をつけるには、次のようにして、印をつける場所の緯度経度情報とその印につけるタイトルを指定します。

var marker;

var marker_options;

 

marker_options =

{

position: map_location,

map: map,

title: 'Sample Marker'

};

 

marker = new google.maps.Marker(marker_options);

"position" プロパティーでは印をつけたい位置の緯度経度情報を設定します。ここでは、先ほど表示した地図の中心位置 (map_location) を指定しています。また、"map" プロパティーでは、印を表示したい地図 (map) を指定します。ここでは、先ほど表示のために生成した地図を指定しています。

このようにして、上記のスクリプトを地図表示の際に使用したスクリプトの後半に追記することで、以下のように地図に印をつけることができました。

今回は中央に印を一つ付けましたが、この要領で好きな位置に印をつけることが可能です。