質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • JavaScript

    16979questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Google API

    546questions

    Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

  • Google マップ

    372questions

    Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Google Maps API(Places API)を利用して、出てきた検索結果から緯度経度を出力したい

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,408

MasanariHori

score 13

前提・実現したいこと

Google Maps APIの中のライブラリであるPlaces APIを利用して検索ボックスから地名を検索し、マーカーにピンを立てる、ということができるサンプルを見つけ、とりあえずコピペベースでコーディングをしてみました。
最終的な目標としては
1.地図を検索し、地名(施設名など)・緯度・経度のデータを取得してそれらをデータベースに挿入
2.それらの情報をもとに、Google Map上にデータをプロットしていく

ということをしたいと思っています。

現状は
1.検索ボックスにキーワードを入れる
2.地図上に検索された場所のピンがプロットされる
ところまでできています。

ここからまずは地点名と緯度経度データを取得していきたいと思っておりますが、緯度経度のデータをどのように抜き出したらよいかを教えていただければ幸いです。

発生している問題・エラーメッセージ

発生している問題としては
・マーカーの持っている情報(markersという名前の配列?)から緯度経度を取得できない。という点です。

初心者なりに色々と考えてみましたが、下記のような内容で推測をしています。

markers.push(new google.maps.Marker({
        map: map,
        title: place.name,
        position: place.geometry.location
      }));


↑この時点でマーカーの位置をしているはずなので、place.geometry.locationをconsole.logとかで取得しようとしましたが、うまくいきませんでした。

ソースコード

//ベースはGoogleのドキュメントから
<script>
//マップの初期状態のセット
function initAutocomplete() {
  var lat = 35.7945218;
  var lng = 139.79081099999996;
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: lat, lng: lng},
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  // 検索ボックスを作る
  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);


  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });

  var markers = [];
  // [START region_getplaces]
  // Listen for the event fired when the user selects a prediction and retrieve
  // more details for that place.
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();

    //placesに何もなければ処理を終了
    if (places.length == 0) {
      return;
    }

    // 古いマーカーを消去
    markers.forEach(function(marker) {
      marker.setMap(null);
    });

    markers = [];

    // それぞれのiconについて指定
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
      var icon = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(10, 10),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // マーカーを作る
      markers.push(new google.maps.Marker({
        map: map,
        title: place.name,
        position: place.geometry.location
      }));


      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);

      } else {
        bounds.extend(place.geometry.location);
        // bounds.extend(place.geometry.viewport);
      }
    });

    //とりあえずZoomがおかしなことになっていたので強引に修正
    if(bounds === bounds){
      map.fitBounds(bounds);
      map.setZoom(15);

    }else{
      map.fitBounds(bounds);
    }

    // map.fitBounds(place.geometry.viewport);
  });
  // [END region_getplaces]
}

</script>

//読み込み
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAzJwemvClGcDRQeOmMi3QI0cuPnRE1CoY&libraries=places&callback=initAutocomplete"
         async defer></script>

以上です。

宜しくお願い致します。

補足情報(言語/FW/ツール等のバージョンなど)

Google Maps JavaScript API

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

これでいけませんか?

var latitude = place.geometry.location.lat();
var longitude = place.geometry.location.lng();


markersから出すならこうかな。

var mk = markers[ 0 ];
var lnglat = mk.getPosition();
var latitude = lnglat.lat(); // 経度 latitude
var longitude = lnglat.lng(); // 緯度 longitude

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/03/31 18:31 編集

    function writeinputbox(){
    var mk = markers[ 0 ];
    var lnglat = mk.getPosition();
    var latitude = lnglat.lat(); // 経度 latitude
    var longitude = lnglat.lng(); // 緯度 longitude
    var latdata = document.getElementById('latdata');
    var lngdata = document.getElementById('lngdata');
    latdata.value = latitude;
    lngdata.value = longitude;
    }

    writeinputbox();


    で無事にinputタグの要素に入れることができました!
    ありがとうございます!^^

    キャンセル

  • 2016/03/31 18:39

    markers は配列なので、複数個のマーカーが入っていることもあるので、
    markers.length をひろって for で全てのマーカー情報を扱うこともできます。

    var i = 0, l = markers.length, mk, lnglat;
    for ( i = 0; i < l ; i++ ) {
    mk = markers[ i ];
    lnglat = mk.getPosition();
    // 何か処理……
    }

    キャンセル

  • 2016/04/08 16:45

    お返事遅くなりましてすみません!
    ご丁寧に教えていただきありがとうございます!助かります!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16979questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Google API

    546questions

    Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

  • Google マップ

    372questions

    Google Mapは、Google社がオンラインで提供している地図・ローカル検索サービスです。GIS(Geographic Information System:地理情報システム)の中の「WebGIS」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。