Furudateのブログ

プログラミングやネットワーク系の知識・技術がメインのブログ。技術メモ帳的な感じになるかと。岩手から発信していきます。

Google Maps JavaScript API v3 を使ってみる

JavaScript

おはようございます。

今回は、Google Maps API を使ってみたので、使い方等をメモしていきたいと思います。
JavaScriptで書いていきます。
ソースコードはHTMLとJSファイル、CSSをそれぞれ別ファイルに書きました。

HTML側のソースコード

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Google Maps v3</title>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&sensor=false"></script>
		<script src="./js/map.js"></script>
		<link rel="stylesheet" href="css/mystyle.css">
	</head>
	<body>
		<div id="map_canvas"></div>
	</body>
</html>

ポイントとしては以下のとおりです。

  • HTML5で書ける
  • scriptタグでAPIを読み込み。
    • 引数の libraries=places は、プレイス検索を行うためのライブラリを読み込んでいる。
    • sensor=false は、GPSセンサーがある端末かどうか。Webの場合はFalse、スマートフォンの場合はtrueにする。
  • HTML本文のところには、divタグでmap_canvasをIDとして指定しているだけ。ここに表示される。

CSSのソースコード

cssはとても簡単です。というか、MAPのサイズを指定しているだけです。

@charset "UTF-8";

#map_canvas {
	width: 500px;
	height: 500px;
}

JavaScriptのソースコード

さて、やっとJavaScriptを書いていきます。
ここでは以下のことをしていきたいと思います。

  • MAPオブジェクトの作成
  • 現在地の取得し、マーカーの設置
  • サークルの描画
  • プレイス検索と、吹き出しの表示

MAPオブジェクトの作成

var map; // マップ

// マップオブジェクトを作成
function initialize(){
	var myLatLng = new google.maps.LatLng(35.681382, 139.766084);
	var mapOptions = {
		center: myLatLng,
		zoom:11,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize); // Windowがロードされたとき表示させる

ポイントは以下のとおりです。

  • map変数は、今後他の関数でも使うので、グローバルにしている
  • myLatLngに位置情報を入れます。ここでは東京駅の位置情報を入れています
  • mapOptionsでマップオブジェクトのオプションを指定しています。
    • centerは、MAPの中心位置（マーカーを置くところ）を指定しています。
    • zoomは、ズームレベルを指定しています。
    • mapTypeIdでは、表示するMAPの種類を指定しています。基本的には上記の指定でOKです
  • オプションを指定したあとに、map_canvasのIDを指定して表示させるようにしています。
  • 最後に、addDomListenerでWindowがロードされたら表示するようにしています。（window.onloadと同じです）

つぎに現在地を取得し、そこにマーカーを置いてみます。

現在地を取得し、マーカーを表示

まずは現在地を取得する関数を書きたいと思います。

// 現在地取得
function geoLocate(){
	// 位置情報取得のオプション。高精度にする
	var position_options = {
		enableHightAccuracy: true
	};
	// 現在地取得（変わる毎に更新）
	navigator.geolocation.watchPosition(success, fatal, position_options);
	
	//位置情報取得成功時
	function success(position){
		var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
		return myLatLng;
	}
	
	// 位置情報取得失敗時
	function fatal(error){
		var message = "";
		
		switch(error.code){
			// 位置情報が取得出来ない場合
			case error.POSITION_UNAVAILABLE:
				message = "位置情報の取得ができませんでした。";
				break;
			// Geolocationの使用が許可されない場合
			case error.PERMISSION_DENIED:
				message = "位置情報取得の使用許可がされませんでした。";
				break;
			// タイムアウトした場合
			case error.PERMISSION_DENIED_TIMEOUT:
				message = "位置情報取得中にタイムアウトしました。";
				break;
		}
		window.alert(message);
		return null;
	}
}

ポイントは大体ソースコードのコメントに書いてあるので、割愛します。

つぎにマーカーを置くための処理です。

// ユーザのマーカーアイコンを変更
var markerImage = new google.maps.MarkerImage(
	// 画像の場所
	"http://blog-imgs-44.fc2.com/p/c/r/pcrice/mark2.png",
	// マーカーのサイズ
	new google.maps.Size(20, 24),
	// 画像の基準位置
	new google.maps.Point(0, 0),
	// Anchorポイント
	new google.maps.Point(10, 24)
);

// 現在地のマーカー表示
var marker = new google.maps.Marker({
	map:map,
	draggable:false,
	animation: google.maps.Animation.DROP,
	position: myLatLng,
	title: "現在地",
	icon: markerImage
});

マーカーアイコンも上記のようにカスタムできますが、ローカルファイルはJavaScriptでは読み込めないので注意が必要です（Jquery使えば読み込めますが）。
デフォルトで良い場合は、makerImageはいりません。


サークルの描画

// サークルオプションの設定
var circleOptions = { 
	center: myLatLng, 
	map: map,
	radius: 10000, 
	strokeWeight: 3, 
	strokeColor: "#cd5c5c", 
	strokeOpacity: 0.5, 
	fillColor: "#e9967a", 
	fillOpacity: 0.5 
}; 

// サークル表示（半径10k）
var circle = new google.maps.Circle(circleOptions);

サークルの描画は結構簡単です。
radiusではサークルの半径をメートル単位で指定しています（上記の場合は10kmです）。


プレイス検索と、吹き出しの表示

// プレイス検索
var request = {
	location: myLatLng,
	radius: '10000',
};
var infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.search(request, callback);

// プレイス検索のコールバック関数
function callback(results, status){
	if (status == google.maps.places.PlacesServiceStatus.OK) {
		for (var i = 0; i < results.length; i++) {
			var place = results[i];
			createMarker(results[i]);
		}
	}
}

// プレイス検索のときに表示するマーカー
function createMarker(place) {
	var placeLoc = place.geometry.location;
	var marker = new google.maps.Marker({
		map: map,
		position: place.geometry.location
	});

	google.maps.event.addListener(marker, 'click', function() {
		infowindow.setContent(place.name);
		infowindow.open(map, this);
	});
}

ポイントとしては以下のとおりです。

  • radiusで、centerからの検索範囲を指定しています。
  • コールバック関数で、検索で返ってきた個数分のマーカーを設置しています。
  • createMarker関数でマーカーの作成と、マーカーをクリックしたときに吹き出しを表示するようにしています。

全体のソースコード

var map; // マップ
var infowindow; // マーカーの詳細表示

// マップオブジェクトを作成し、マーカーを表示
function initialize(){
	var myLatLng = geoLocate(); // MAPの初期位置
	
	if (myLatLng == null){ // 位置情報取得に失敗した場合、東京駅をセンターにしてMAP表示
		myLatLng = new google.maps.LatLng(35.681382, 139.766084);
	}
	var mapOptions = {
		center: myLatLng,
		zoom:11,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
	
	// ユーザのマーカーアイコンを変更
	var markerImage = new google.maps.MarkerImage(
		// 画像の場所
		"http://blog-imgs-44.fc2.com/p/c/r/pcrice/mark2.png",
		// マーカーのサイズ
		new google.maps.Size(20, 24),
		// 画像の基準位置
		new google.maps.Point(0, 0),
		// Anchorポイント
		new google.maps.Point(10, 24)
	);
	
	// 現在地のマーカー表示
	var marker = new google.maps.Marker({
		map:map,
		draggable:false,
		animation: google.maps.Animation.DROP,
		position: myLatLng,
		title: "現在地",
		icon: markerImage
	});
	
	// サークルオプションの設定
	var circleOptions = { 
		center: myLatLng, 
		map: map,
		radius: 10000, 
		strokeWeight: 3, 
		strokeColor: "#cd5c5c", 
		strokeOpacity: 0.5, 
		fillColor: "#e9967a", 
		fillOpacity: 0.5 
	}; 
	
	// サークル表示（半径10k）
	var circle = new google.maps.Circle(circleOptions); 
	
	// プレイス検索
	var request = {
		location: myLatLng,
		radius: '10000',
	};
	infowindow = new google.maps.InfoWindow();
	var service = new google.maps.places.PlacesService(map);
	service.search(request, callback);
}
google.maps.event.addDomListener(window, 'load', initialize); // Windowがロードされたとき表示させる

// プレイス検索のコールバック関数
function callback(results, status){
	if (status == google.maps.places.PlacesServiceStatus.OK) {
		for (var i = 0; i < results.length; i++) {
			var place = results[i];
			createMarker(results[i]);
		}
	}
}

// プレイス検索のときに表示するマーカー
function createMarker(place) {
	var placeLoc = place.geometry.location;
	var marker = new google.maps.Marker({
		map: map,
		position: place.geometry.location
	});

	google.maps.event.addListener(marker, 'click', function() {
		infowindow.setContent(place.name);
		infowindow.open(map, this);
	});
}

// 現在地取得
function geoLocate(){
	// 位置情報取得のオプション。高精度にする
	var position_options = {
		enableHightAccuracy: true
	};
	// 現在地取得（変わる毎に更新）
	navigator.geolocation.watchPosition(success, fatal, position_options);
	
	//位置情報取得成功時
	function success(position){
		var myLatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
		return myLatLng;
	}
	
	// 位置情報取得失敗時
	function fatal(error){
		var message = "";
		
		switch(error.code){
			// 位置情報が取得出来ない場合
			case error.POSITION_UNAVAILABLE:
				message = "位置情報の取得ができませんでした。";
				break;
			// Geolocationの使用が許可されない場合
			case error.PERMISSION_DENIED:
				message = "位置情報取得の使用許可がされませんでした。";
				break;
			// タイムアウトした場合
			case error.PERMISSION_DENIED_TIMEOUT:
				message = "位置情報取得中にタイムアウトしました。";
				break;
		}
		window.alert(message);
		return null;
	}
}

以上です。

それでは。

参考にさせていただいたサイト

Code Samples - Google Maps JavaScript API v3 — Google Developers
Google Maps API V3 入門・初心者向けサンプル集
Google Mapで現在位置を追跡する2 - Waste Of Time
連載：人気順に説明する初めてのHTML5開発：位置情報をブラウザで活用！ Geolocationを使いこなそう (1/2) - ＠IT