2015

11

4

GoogleMapsAPIでマップで施設検索してやんよ!!!

タグ：

このエントリーをはてなブックマークに追加
Pocket
LINEで送る
Facebook にシェア
reddit にシェア
LinkedIn にシェア

Googleマップで特定位置の周辺○Km圏内でラーメン屋を探したいといった事がGoogleMapsAPIを使ってできるという事でやってみます！

Google Places APIを使うには？

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

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

単純なマップページに施設検索のフォームを追加したデモページがコチラ 初期設定では池袋駅から半径1Km圏内にあるカフェを表示させています。 マップ上部の入力フォームに「池袋駅　銀行」などの表示させたい対象エリアと施設（または"ラーメン"などの飲食店の種類がある程度選定できる固有名詞）キーワードを入力して『検索』をクリックすると半径1km圏内でGoogleに登録されている施設が表示されます ※施設の情報はGoogleマップに登録されているデータをもとにしているため、開店・閉店したばかりのお店や、事業主が登録していない施設などの情報には誤差があります。 ※デモページのAPIキーはこのURLでしか認証しない設定としているため、ソースを用いる場合は、お使いのGoogleアカウントから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: 100%; height: 90%;"></div>

JavaScript

	var mayMap;
	var service;
	
	// マップの初期設定
	function initialize() {
		// Mapクラスのインスタンスを作成（緯度経度は池袋駅に設定）
		var initPos = new google.maps.LatLng(35.729756, 139.711069);
		// 地図のプロパティを設定（倍率、マーカー表示位置、地図の種類）
		var myOptions = {
			zoom: 15,
			center: initPos,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		// #map_canva要素にMapクラスの新しいインスタンスを作成
		myMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
		// 検索の条件を指定（緯度経度、半径、検索の分類）
		var request = {
			location: initPos,
			radius: 1000,      // ※１ 表示する半径領域を設定(1 = 1M)
			types: ['cafe']    // ※２ typesプロパティの施設タイプを設定
		};
		var service = new google.maps.places.PlacesService(myMap);
		service.search(request, Result_Places);
	}
	
	// 検索結果を受け取る
	function Result_Places(results, status){
		// Placesが検家に成功したかとマうかをチェック
		if(status == google.maps.places.PlacesServiceStatus.OK) {
			for (var i = 0; i < results.length; i++) {
				// 検索結果の数だけ反復処理を変数placeに格納
				var place = results[i];
				createMarker({
					 text : place.name, 
					 position : place.geometry.location
				});
			}
		}
	}
	
	// 入力キーワードと表示範囲を設定
	function SearchGo() {
		var initPos = new google.maps.LatLng(0,0);
		var mapOptions = {
			center : initPos,
			zoom: 0,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		};
		// #map_canva要素にMapクラスの新しいインスタンスを作成
		myMap = new google.maps.Map(document.getElementById("map_canvas"), 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) {
		var bounds = new google.maps.LatLngBounds();
		for(var i = 0; i < results.length; i++){
			createMarker({
				 position : results[i].geometry.location,
				 text : results[i].name,
				 map : myMap
			 });
			bounds.extend(results[i].geometry.location);
		}
		myMap.fitBounds(bounds);
	}
	
	// 該当する位置にマーカーを表示
	function createMarker(options) {
		// マップ情報を保持しているmyMapオブジェクトを指定
		options.map = myMap;
		// Markcrクラスのオブジェクトmarkerを作成
		var marker = new google.maps.Marker(options);
		// 各施設の吹き出し(情報ウインドウ)に表示させる処理
		var infoWnd = new google.maps.InfoWindow();
		infoWnd.setContent(options.text);
		// addListenerメソッドを使ってイベントリスナーを登録
		google.maps.event.addListener(marker, 'click', function(){
			infoWnd.open(myMap, marker);
		});
		return marker;
	}
	
	// ページ読み込み完了後、Googleマップを表示
	google.maps.event.addDomListener(window, 'load', initialize);

処理の概要

マップの初期設定（4～24行目）

  • ・ページの読み込みが完了のタイミングでinitialize関数がnew google.maps.La tLngを使ってMapクラスのインスタンスを作成して、緯度・経度を指定して変数「initPos」に格納します。デモでは池袋駅の座標を設定しています。
  • ・変数「myOptions」に地図ののプロパティを設定します。倍率を表す"zoom"に15、マーカーの表示位置を決めるcenterに変数「initPos」の値、地図の種類を表すgoogle.maps.MapTypeIdにROADMAP(標準の道路地図)を指定
  • ・Mapクラスの新しいインスタンスを作成しています。 idがmap_canvasのdiv要素にdocument.getElementByIdメソッドでアクセスし、myOptionsで定義した地図のプロパティで初期化した上で、グローバル変数myMapオフeジ‘ェクトで参照します。
  • ・変数「request」に検索の条件を指定します。locationには緯度と軽度を格納している「initPos」変数の値を、radius(半径)には1000メートルを指定して、半径1キロ以内と指定（※１）
  • ・typesにはプレイス検索の分類を指定します。デモでは"cafe"（カフェ）を選択していますが、分類には様々なものがあります（※２） プレイス検索のタイプの詳細は下記参照
  • ・PlacesServiceのsearch()メソッドで条件に従って検索を実行

検索結果を受け取る（26～39行目）

  • ・PlacesServiceStatusオブジェクトにはリクエストのステータスが絡納されるのでPlacesが検索に成功したかどうかをチェックします
  • ・OK(有効な結果を合む)の場合に、検索結果の数だけfor文で反復処理を実行し、その結果を変数「Places」に格納します。
  • ・nameプロパティはその場所の名前、geometry.locationはその場所の緯度と軽度を表します。

入力キーワードと表示範囲を設定（41～60行目）

  • ・newgoogle.maps.LatLngを使ってMapクラスのインスタンスを作成します。 引数の緯度経度を0で初期化しておき、変数「initPos」に格納
  • ・変数「myOptions」に地図のプロパティに①地図の中心座標を決めるcenterに変数「initPos」の値（ここでは0）、②倍率を表すzoomに0、③地図の種類を表すgoogle.maps.MapTypeldにROADMAPを指定します。
  • ・変数「request」のqueryにはsearchというidのinput要素の値（キーワード）を変数「myword」、radiusには5000メートルを指定して、半径5キロ以内と指定検索の条件を指定します。 locationには、myMap.getCenter()で、地図の中心を指定します。
  • ・tcxtSearch()メソッドで、変数「request」を第一引数にテキスト検索を行います。

検索の結果を受け取る（62～74行目）

  • ・変数「bounds」にLatLngBoundsクラスで、東西南北の緯度・経度で初期化
  • ・検索結果の数だけfor文で反復処理を実行し、マーカーを表示するcreateMarkerl関数を実行します。
  • ・引数positionには、ジオコーディングされた緯度・経度の値を指定し、textにはマーカーがクリックされた時に表示する場所の名前、mapにはmyMapオブジェクトを指定します。
  • ・LatLngBoundsのextend()メソッドにジオコーディングされた緯度・経度の値を渡すと、その場所を合むエリアを境界として認識します。
  • ・fitBounds()メソッドに、東西南北端の緯度・経度を渡すと、それぞれの座標が地図上にすべて表示されるように、zoom値を自動調整してくれます。

該当する位置にマーカーを表示（76～90行目）

  • ・mapプロパティにカフェ名や位置情報を保持しているmyMapオブジェクトを指定し、マーカーを表すMarkerクラスのオブジェクトmarkerを作成します。
  • ・オプションであるl番目の引数には、マーカーを表示する対象となる地図や座標などを設定するために使用するoptionsオブジェクトを指定します。
  • ・吹き出しを開くためには、InfoWindowクラスで用意されているopenメソッドを、コンテンツを表示させるにはsetContentを使用します。
  • ・options.textには各カフェ名が格納されているので、google.maps.eventのaddListenerメソッドを使ってイベントリスナーを登録し、クリックすることでマーカーを表示させます。

プレイス検索のタイプ一覧（おまけ）

今回typesプロパティという施設について調べましたが、かなり種類が多いのですが、Googleのリファレンスでは全て英語でわかりづらかったので日本語で一覧にしました。 ※世界的な施設のタイプ分けなので、日本では馴染みの無い施設も結構あります。 分類は複数指定することが可能です。その場合は下記コードを参照 
types:['bank', 'dentist', ・・・]
accounting 事務所
airport 空港
amusement_park 遊園地
art_gallery 美術館
atm ATM
bakery パン屋
bank 銀行
bar バー
beauty_salon 美容室・ネイルサロン
bicycle_store 自転車屋
bowling_alley ボウリング場
bus_station バス停
cafe カフェ
campground キャンプ場
car_dealer 自動車ディーラー
car_rental レンタカー屋
car_repair 自動車修理
car_wash 洗車場
casino カジノ
cemetery 墓地
church 教会
city_hall 市役所
clothing_store 洋服店
clothing_store コンビニ
courthouse 裁判所
dentist 歯科
department_store デパート
doctor 医者
electrician 電気事業者
electronics_store 電器屋
embassy 大使館
establishment 詳細不明
finance 財務機関
fire_station 消防署
florist 花屋
food 飲食店
funeral_home 斎場
furniture_store 家具屋
gas_station ガソリンスタンド
general_contractor ゼネコン
grocery_or_supermarket 日用品店・スーパーマーケット
gym スポーツジム
hair_care 床屋
hardware_store 工具店, ホームセンター
health 主に医療機関
hindu_temple ヒンドゥー寺院
home_goods_store ホームセンター
hospital 医療機関・クリニック
insurance_agency 保険代理店
jewelry_store 宝石店
laundry クリーニング店・コインランドリー
lawyer 法律事務所
library 図書館
liquor_store 酒店
local_government_office 地方公共団体
locksmith 鍵屋
lodging 宿泊施設
meal_delivery 飲食店（出前系）
meal_takeaway 飲食店（テイクアウト系）
mosque イスラム教の礼拝堂
movie_rental レンタルビデオ店
movie_theater 映画館
moving_company 運送屋・引越し屋
museum 博物館・ミュージアム
night_club ナイトクラブ
painter 塗装屋
park 公園
parking 駐車場
pet_store ペット屋
pharmacy 薬局
physiotherapist 療法士
place_of_worship 神社・寺
plumber 配管工・水道業者
police 警察署・交番
post_office 郵便局
real_estate_agency 不動産業者
restaurant レストラン
roofing_contractor 屋根修理
rv_park 車中泊ができる施設
school 学校・塾
shoe_store 靴屋
shopping_mall ショッピングモール
spa 温泉・銭湯
stadium スタジアム
storage 倉庫
store 店（※かなり曖昧で精度は低い）
subway_station 鉄道駅（地下鉄のみ）
synagogue ユダヤ教の会堂
taxi_stand タクシー乗り場
train_station 鉄道駅
travel_agency 旅行代理店
university 大学
veterinary_care 動物病院
zoo 動物園
このエントリーをはてなブックマークに追加
Pocket
LINEで送る
Facebook にシェア
reddit にシェア
LinkedIn にシェア

トップへ