今回は、動的なGoogle Mapsを表示させるGoogle Maps JavaScript APIについて紹介します。
■Google Maps JavaScript APIとは
Google MapsをAPI化してJavaScriptで動作できるようにしたものです。
ホームページや携帯端末(Android、iOSなど)に組み込むことできます。
現在のGoogle Maps JavaScript APIのバージョンは3.9です。
※バージョン3.8は凍結、バージョン3.0～3.7 は廃止されています。
■Google Maps JavaScript APIのバージョン3.x系の主な変更点
・API Keyが不要
バージョン2.x系まではGoogle Maps JavaScript APIを使用するにあたりAPI Keyを取得する必要がありました。API KEYの取得がなくなったことで、以前より簡単にGoogle Mapsを表示できるようになりました。
・AndroidとiPhoneでの高速化
AndroidとiPhoneで地図を高速表示できるような機能が追加されました。
■Google Maps JavaScript APIでできること
Googleマップの表示やズームコントロールなどのUI部分をカスタマイズすることができます。Googleマップを使ったことがあれば、容易にGoogle Maps JavaScript APIを理解することができます。
■Google Maps JavaScript APIの使用方法
Google Maps JavaScript APIを使用したGoogleマップの表示と
コントロール、マーカーの表示ついて説明します。
・APIを使用したGoolgeマップの表示
APIを使用するためにスクリプトタグで下記のURLを読み込ませます。
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
sensorパラメータはtrueにすることで地図を表示しているユーザーの位置情報を取得することができます。
次にGoogleマップを表示させるキャンバスを作成します。
キャンバスはdiv要素に高さと幅を設定するだけです。
<div id="map_canvas" style="width:300px; height:300px"><div>
キャンバスの作成をした後、Googleマップを表示するための初期設定を行います。初期設定に必要なパラメータはzoom(地図の縮尺)、center(地図の中心座標)、mapTypeId(地図の種類)です。
zoomには1～21までの値を設定でき、数値が大きくなるほど詳細な地図が表示されます。
centerにはLatLngクラスのオブジェクトを指定します。
mapTypeIdにはgoogle.maps.MapTypeId.定数を指定します。
定数にはROADMAP(通常の地図)、SATELLITE(航空写真)、HYBRID(通常の地図 + 航空写真)、TERRAIN(地形)があります。
下記のように初期化のための関数を記述をします。
地図の縮尺を15、地図の中心座標を(33.889577,130.885284)、地図の種類をROADMAPに設定します。
function sample() {
var latlng = new google.maps.LatLng(33.889577,130.885284);
var opts = {
//地図の縮尺
zoom: 15,
//地図の中心座標
center: latlng,
//地図の種類
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
}
上記の初期設定とキャンバスをMapクラスのオブジェクトに読み込ませることでGoogleマップを表示できます。
var map = new google.maps.Map(document.getElementById("map_canvas"), opts);
下にAPIを使用したGoogleマップを表示します。
※下のGoogleマップのソースは付録のサンプル１にあります。
Googleマップを表示するとデフォルトで地図タイプコントロールが表示されます。
その他のコントールはズームコントロールとストリートビューコントロール、外観地図コントロール、移動コントロール、回転コントロール、スケールコントロールがあります。
コントロールの配置場所などはオプションで変更することができます。
マップタイプコントロールの場合は下記のようになります。
//マップタイプコントロール
mapTypeControl: true,
mapTypeControlOptions: {
//右側の真ん中に配置
position: google.maps.ControlPosition.RIGHT_CENTER
}
下に全てのコントロールを追加したGoogleマップを表示します。
※下のGoogleマップのソースは付録のサンプル２にあります。
・マーカーを表示する
マーカーを表示するにはMarkerクラスのオブジェクトを作成する必要があります。オブジェクトの作成は簡単で、マーカーを表示する座標とマップのインスタンスを設定するだけです。マーカーにはタイトルやアニメーションをつけたり、マーカーを自由に動かしたりなどができます。
var marker = new google.maps.Marker({
//マーカーを表示する座標
position: latlng,
//マップのインスタンス
map: map,
//マーカーのタイトル
title: "テストマーカー"
//アニメーション
animation: google.maps.Animation.DROP,
//マーカーのドラッグ
draggable:true
});
下にマーカーを追加したGoogleマップを表示します。
※下のGoogleマップのソースは付録のサンプル３にあります。
以上がGoogle Maps JavaScript APIの使用方法です。
上記のようなカスタマイズができるので、必要な情報のみを載せた地図を作成して簡単にホームページに組み込むことができます。好みのカスタマイズをしたい方や独自の地図アプリを作成したい方は、この機会に試しみてはいかがでしょうか。
＜参考サイト＞
・Google Maps JavaScript API
＜付録＞
・サンプル１
最低限の設定でGoogleマップを表示するサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>サンプル１</title>
<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function sample1() {
var latlng = new google.maps.LatLng(33.889577,130.885284);
var opts = {
//地図の縮尺
zoom: 15,
//地図の中心座標
center: latlng,
//地図の種類
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
//マップの表示
var map = new google.maps.Map(document.getElementById("map_canvas1"), opts);
}
window.onload = sample1;
</script>
</head>
<body>
<div id="map_canvas1" style="width:300px; height:300px"></div>
</body>
<html>
・サンプル２
コントロールを全て表示するサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>サンプル１</title>
<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function sample2() {
var latlng = new google.maps.LatLng(33.889577,130.885284);
var opts = {
//地図の縮尺
zoom: 15,
//地図の中心座標
center: latlng,
//地図の種類
mapTypeId: google.maps.MapTypeId.ROADMAP,
//マップタイプコントロール
mapTypeControl: true,
mapTypeControlOptions: {
//右側の真ん中に配置
position: google.maps.ControlPosition.RIGHT_CENTER
},
//ズームコントロール
zoomControl: true,
//ストリートビューコントロール
streetViewControl: true,
//外観地図コントロール
overviewMapControl: true,
//移動コントロール
panControl: true,
//回転コントロール(45度表示のときにのみ表示される)
rotateControl: true,
//スケールコントロール
scaleControl: true,
};
//マップの表示
var map = new google.maps.Map(document.getElementById("map_canvas2"), opts);
}
window.onload = sample2;
</script>
</head>
<body>
<div id="map_canvas1" style="width:300px; height:300px"></div>
</body>
<html>
・サンプル３
マーカーを表示するサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>サンプル１</title>
<script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function sample3() {
var latlng = new google.maps.LatLng(33.889577,130.885284);
var opts = {
//地図の縮尺
zoom: 15,
//地図の中心座標
center: latlng,
//地図の種類
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//マップの表示
var map = new google.maps.Map(document.getElementById("map_canvas3"), opts);
//マーカーの表示
var marker = new google.maps.Marker({
//マーカーを表示する座標
position: latlng,
//マップのインスタンス
map: map,
//マーカーのタイトル
title: "テストマーカー",
//アニメーション
animation: google.maps.Animation.DROP,
//マーカーのドラッグ
draggable:true
});
}
window.onload = sample3;
</script>
</head>
<body>
<div id="map_canvas1" style="width:300px; height:300px"></div>
</body>
<html>