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

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

新規登録して質問してみよう
ただいま回答率
87.20%
Google API

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

JavaScript

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

Google マップ

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

解決済

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

MH00214
MH00214

総合スコア0

Google API

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

JavaScript

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

Google マップ

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

1回答

0評価

0クリップ

3787閲覧

投稿2016/03/31 08:16

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

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

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

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

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

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

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

javascript

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

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

###ソースコード

javascript

//ベースは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](https://developers\.google\.com/maps/documentation/javascript/examples/places-searchbox\)

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

Google API

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

JavaScript

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

Google マップ

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