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

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

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

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

Google マップ

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

解決済

GoogleMapAPIを利用した住所検索と描画について

ssk
ssk

総合スコア0

Google API

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

Google マップ

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

1回答

0評価

0クリップ

2098閲覧

投稿2017/02/10 17:24

######説明
住所入力→検索ボタンクリックされた時
\$\('#address_search'\)\.on\('click',function\(\){

条件指定→検索ボタンクリックされた時
\$\('#MapSearch'\)\.submit\(function\(event\) {

と処理を分けています。

######できていないこと
条件指定→検索ボタンクリックされた時
に必ず、center: new ns.LatLng(35, 139.739)が表示されてしまいます(自分で指示出してるんですが。。)

######やりたいこと
**すでに住所入力→検索がされていて条件指定→検索**
移動はさせずに条件指定の検索結果を表示させたいです。

**すでに条件指定→検索がされていて住所入力→検索**
条件指定で検索した結果得たマーカーはそのままで
入力された住所へ移動

######考察

javascript

mapOptions = { zoom: 12, minZoom : 10, maxZoom : 20, center: new ns\.LatLng\(35, 139\.739\), };

center: new ns\.LatLng\(35, 139\.739\)
↑素人ながら、ここを動的に変えればいいと思っています。。
その方法もわからず、、、

以下、コードです。
何卒、よろしくお願いいたします。

javascript

<script type="text/javascript"> var map; var infoWindow; //初期表示 function initMap\(\) { ns = google\.maps; mapOptions = { zoom: 12, minZoom : 10, maxZoom : 20, center: new ns\.LatLng\(35, 139\.739\), mapTypeId:google\.maps\.MapTypeId\.ROADMAP }; map = new ns\.Map\(document\.getElementById\("map"\), mapOptions\); }; //住所検索がクリックされた時 \$\('#address_search'\)\.on\('click',function\(\){ geocoder = new google\.maps\.Geocoder\(\); var address = document\.getElementById\("address"\)\.value; if \(geocoder\) { geocoder\.geocode\( { 'address': address, 'region': 'jp' },function\(results, status\) { if \(status == google\.maps\.GeocoderStatus\.OK\) { map\.setCenter\(results\[0\]\.geometry\.location\); var bounds = new google\.maps\.LatLngBounds\(\); for \(var r in results\) { if \(results\[r\]\.geometry\) { var latlng = results\[r\]\.geometry\.location; bounds\.extend\(latlng\); new google\.maps\.Marker\({ position: latlng, map: map }\); } } //map\.fitBounds\(bounds\); }else{ alert\("Geocode 取得に失敗しました reason: " \+ status\); } }\); } }\); //条件を指定した検索ボタンクリックされた時 \$\(function\(\) { \$\('#MapSearch'\)\.submit\(function\(event\) { event\.preventDefault\(\);//送信をキャンセル var \$form = \$\(this\);//対象のフォーム要素を取得 // 送信ボタンを取得 // (後で使う: 二重送信を防止する。) var \$button = \$form\.find\('button'\); \$\.ajax\({ url: "/hoge/ajax/hoge\.json", type: "GET", data: \$form\.serialize\(\), dataType: "json", timeout: 10000, // 送信前 beforeSend: function\(xhr, settings\) { // ボタンを無効化し、二重送信を防止 \$button\.attr\('disabled', true\); }, // 応答後 complete: function\(xhr, textStatus\) { // ボタンを有効化し、再送信を許可 \$button\.attr\('disabled', false\); }, }\)\.done\(function initMap\(jsonDataList\) { ns = google\.maps; mapOptions = { zoom: 12, minZoom : 10, maxZoom : 20, center: new ns\.LatLng\(35, 139\.739\), mapTypeId:google\.maps\.MapTypeId\.ROADMAP }; map = new ns\.Map\(document\.getElementById\("map"\), mapOptions\); json = jsonDataList; json\.jsonDataList\.forEach\(function \(place\) { var marker = new ns\.Marker\({ position: new ns\.LatLng\(place\.lat, place\.lan\), map: map }\); ns\.event\.addListener\(marker, 'click', function \(\) {//情報ウィンドウ if \(!infoWindow\) { infoWindow = new ns\.InfoWindow\(\); } infoWindow\.setContent\(place\.hoge\);//place infoWindow\.open\(map, marker\); }\); }\); google\.maps\.event\.addDomListener\(window, 'load'\); }\)\.fail\(function \(response\) { alert\("error"\); }\); }\); }\); </script>

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Google API

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

Google マップ

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