GoogleMapsAPIでマップで施設検索してやんよ!!! (改良版)

タグ：Google Maps

以前、Google Places APIを利用してGoogleマップの施設、地理的位置、有名なスポットを検索してマップにマーカーを追加しました GoogleMapsAPIでマップで施設検索してやんよ!!! ただこのパターンのデメリットとして

• ・検索キーワードの対象施設がマップの表示に差し代わるため、主軸となる施設のマーカーが消えてしまう
• ・近距離でマーカーピンが複数立つため、施設のジャンルがわかりづらい
• ・1度、世界地図レベルからの表示範囲になるので何かイヤ

という事で上記デメリットを解消した改良版に挑みます！

Google Places APIを使うには？

前回も触れましたが、「プレイス」機能を利用するにはGoogle Places APIを有効にする必要があります。 2016年6月から新規サイトで共有リンクとしてではなくGoogle Maps APIを使ってマップを表示させる場合は、APIキーが必須となりました。 ※この他にAndroid版とiOS版があるようですが、今回は「Google Places API Web Service」を選択します。 Places APIを使用するためには、APIの管理画面である「GoogleDevelopers Console」にてAPIキーを取得して、Places APIを有効にする必要があります。 管理画面メニューの「ライブラリ」から「Google Maps API」⇒「Google Places API Web Service」を選択 「認証情報」から「認証情報を作成」でAPIキーが発行されます。 ※キーを新規発行した場合、発行から５分程度は反映の時間を要するため、すぐにはマップが表示されずエラーが出てしまうので、しばらく時間を置いてから確認してください。

マップに施設検索機能を追加する

実際に下記コードを実装したデモページがコチラ 発行されたキーを下記スクリプトタグ内の指定箇所に実装してください。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=【取得したAPIキー】&libraries=places" charset="utf-8"></script>

HTML

<input type="text" size="55" id="search" value="ダイバーシティ東京付近のカフェ" />
<input type="button" size="55" value="検索" onClick="SearchGo()" />
<div id="map_canvas" style="width: 980; height: 720px;"></div>

JavaScript

// マップの初期設定
var mayMap;
var service;
var latlng = new google.maps.LatLng(【主軸施設の緯度・軽度】);
var icon = new google.maps.MarkerImage('【主軸施設のマーカーピン画像のパス】',new google.maps.Size(65,57),new google.maps.Point(0,0));

function initialize() {
	// googleマップ表示設定
	var initPos = latlng;
	var opts = {
		zoom: 16,
		center: initPos,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		scrollwheel: true,
		scaleControl: true,
        panControl:true,
	};
	var myMap = new google.maps.Map(document.getElementById("gmapBlock"), opts);

    // googleマップマーカー設定
	var markerOptions = {
		position: initPos,
		map: myMap,
		icon: icon,
		title: '【主軸施設名】'
	};
	var marker = new google.maps.Marker(markerOptions);

	// 検索の条件を指定（緯度経度、半径、検索の分類）
	var request = {
		location: initPos,
		radius: 500,
		types: ['cafe','food','restaurant']
	};
	var service = new google.maps.places.PlacesService(myMap);
	service.search(request, Result_Places);
}

// 検索結果を受け取る
function Result_Places(results, status){
	if(status == google.maps.places.PlacesServiceStatus.OK) {
		for (var i = 0; i < results.length; i++) {
			var place = results[i];
			createMarker({
				 text : place.name,
				 position : place.geometry.location
			});
		}
	}
}

// 入力キーワードと表示範囲を設定
function SearchGo() {
	var initPos = latlng;
	var mapOptions = {
		center : initPos,
		zoom: 15,
		mapTypeId : google.maps.MapTypeId.ROADMAP
	};
	myMap = new google.maps.Map(document.getElementById("gmapBlock"), mapOptions);
	service = new google.maps.places.PlacesService(myMap);
	// input要素に入力されたキーワードを検索の条件に設定
	var myword = document.getElementById("search");
	var request = {
		query : myword.value,
		radius : 5000,
		location : myMap.getCenter()
	};
	service.textSearch(request, result_search);
}

// 検索の結果を受け取る
function result_search(results, status) {
	console.log(results)
	var bounds = new google.maps.LatLngBounds();
	// 取得施設情報を解体
	for(var i = 0; i < (results.length + 1); i++){
		var gpmarker = new google.maps.MarkerImage(results[i].icon, null, null, null, new google.maps.Size(25, 25));
		if(i == results.length - 1){
			createMarker({
				icon : icon,
				position : latlng,
				text : '<span style="font-weight: bold;">【主軸施設名】</span><br>【主軸施設の住所】',
				map : myMap
			});
		}else{
			createMarker({
				　icon : gpmarker,
				 position : results[i].geometry.location,
				 text : '<span style="font-weight: bold;">' + results[i].name + '</span><br>' + results[i].formatted_address,
				 map : myMap
			 });
		}
		bounds.extend(results[i].geometry.location);
	}
	myMap.fitBounds(bounds);
}

// 該当する位置にマーカーを表示
function createMarker(options) {
	//console.log(options);
	var marker = new google.maps.Marker(options);
	var infoWnd = new google.maps.InfoWindow();
	infoWnd.setContent(options.text);
	google.maps.event.addListener(marker, 'click', function(){
		infoWnd.open(myMap, marker);
	});
	return marker;
}

// ページ読み込み完了後、Googleマップを表示
google.maps.event.addDomListener(window, 'load', initialize);