新人日誌8

2019年3月20日
他の話題

Webブラウザ上に表示したGoogle Mapで検索条件に合致した現在地周辺の場所の情報を取得してみます。

半径5km範囲で検索バーに入力した文字列に関連した場所の情報を検索してみます。

まず、確認用に半径5kmの円を作ります。

var circle5;
var strokeOpacity = 0.8; 
var fillColor5 = '#FF0000'; 
var fillOpacity = 0.35; 
var radius5 = parseInt(parseFloat(5) * 1000);//半径5km

circle5 = new google.maps.Circle({
      strokeColor: '#FF0000',         //円の線の色
      strokeOpacity: strokeOpacity,   //円の線の不透明度
      strokeWeight: 2,                //円の線の太さ
      fillColor: fillColor5,          //円の色
      fillOpacity: fillOpacity,       //円の不透明度
      map: gmap,                      //表示するGoogleMAP
      center: nowPos,                 //中心座標
      radius: radius5                 //半径
    });

次に検索用のサービスを作成します。

var service = new google.maps.places.PlacesService(gmap);

続いて検索用のリクエストを作成します。

var request = {
      location: nowPos, 		//現在地から
      radius: circle5.getRadius(),  //半径5km圏内の
      type: 'store',                //お店を検索
      query: input.val()          //検索窓のキーワードに関連する
    };

このリクエストを先程の検索用のサービスに渡して場所の情報を取得します。

service.nearbySearch(
      request,    //リクエスト
      function (results, status) {//コールバック関数
    //ステータスを確認して,OKであれば
    console.log(status);
        if (status === google.maps.places.PlacesServiceStatus.OK)
        {
        length = results.length;
        console.log(length);
        if (length > 0) {		//結果が1以上なら
          for(var i= 0; i < length; i++)
          {
            var lat = results[i].geometry.location.lat(); //緯度
            var lng = results[i].geometry.location.lng(); //経度
            console.log(results[i].name);                 //名前
            console.log('の座標は');
            console.log('緯度:'+lat+'＿経度:'+lng);
            console.log('です。');
            console.log('プレイスIDは');
            console.log(results[i].place_id);		//place_id
            console.log('です。');

          }
        }
      }
      }
);

これで現在地周辺の場所の情報が取得できました。