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

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

新規登録して質問してみよう
ただいま回答率
85.50%
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」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

Q&A

解決済

1回答

2495閲覧

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

ssk

総合スコア332

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」に該当します。地図・航空写真・地形の表示方式があり、それぞれユーザーが縮尺を調整して表示させることができます。地域の情報サービスを検索する機能やルート検索の機能も搭載されています。

0グッド

0クリップ

投稿2017/02/10 17:24

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

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

と処理を分けています。

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

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

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

######考察

javascript

1mapOptions = { 2 zoom: 12, 3 minZoom : 10, 4 maxZoom : 20, 5 center: new ns.LatLng(35, 139.739), 6};

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

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

javascript

1<script type="text/javascript"> 2var map; 3var infoWindow; 4 5//初期表示 6 function initMap() { 7 ns = google.maps; 8 mapOptions = { 9 zoom: 12, 10 minZoom : 10, 11 maxZoom : 20, 12 center: new ns.LatLng(35, 139.739), 13 mapTypeId:google.maps.MapTypeId.ROADMAP 14 }; 15 map = new ns.Map(document.getElementById("map"), mapOptions); 16}; 17 18//住所検索がクリックされた時 19$('#address_search').on('click',function(){ 20 geocoder = new google.maps.Geocoder(); 21 var address = document.getElementById("address").value; 22 if (geocoder) { geocoder.geocode( { 23 'address': address, 24 'region': 'jp' 25 },function(results, status) { 26 if (status == google.maps.GeocoderStatus.OK) { 27 map.setCenter(results[0].geometry.location); 28 var bounds = new google.maps.LatLngBounds(); 29 for (var r in results) { 30 if (results[r].geometry) { 31 var latlng = results[r].geometry.location; 32 bounds.extend(latlng); 33 34 new google.maps.Marker({ 35 position: latlng, 36 map: map 37 }); 38 39 } 40 } 41 //map.fitBounds(bounds); 42 }else{ 43 alert("Geocode 取得に失敗しました reason: " + status); 44 } 45 }); 46 } 47}); 48 49//条件を指定した検索ボタンクリックされた時 50$(function() { 51 $('#MapSearch').submit(function(event) { 52 event.preventDefault();//送信をキャンセル 53 var $form = $(this);//対象のフォーム要素を取得 54 // 送信ボタンを取得 55 // (後で使う: 二重送信を防止する。) 56 var $button = $form.find('button'); 57 58 $.ajax({ 59 url: "/hoge/ajax/hoge.json", 60 type: "GET", 61 data: $form.serialize(), 62 dataType: "json", 63 timeout: 10000, 64 // 送信前 65 beforeSend: function(xhr, settings) { 66 // ボタンを無効化し、二重送信を防止 67 $button.attr('disabled', true); 68 }, 69 // 応答後 70 complete: function(xhr, textStatus) { 71 // ボタンを有効化し、再送信を許可 72 $button.attr('disabled', false); 73 }, 74 }).done(function initMap(jsonDataList) { 75 ns = google.maps; 76 mapOptions = { 77 zoom: 12, 78 minZoom : 10, 79 maxZoom : 20, 80 center: new ns.LatLng(35, 139.739), 81 mapTypeId:google.maps.MapTypeId.ROADMAP 82 }; 83 map = new ns.Map(document.getElementById("map"), mapOptions); 84 json = jsonDataList; 85 json.jsonDataList.forEach(function (place) { 86 var marker = new ns.Marker({ 87 position: new ns.LatLng(place.lat, place.lan), 88 map: map 89 }); 90 ns.event.addListener(marker, 'click', function () {//情報ウィンドウ 91 if (!infoWindow) { 92 infoWindow = new ns.InfoWindow(); 93 } 94 infoWindow.setContent(place.hoge);//place 95 infoWindow.open(map, marker); 96 }); 97 }); 98 google.maps.event.addDomListener(window, 'load'); 99 }).fail(function (response) { 100 alert("error"); 101 }); 102 }); 103}); 104</script>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

細かく見ていませんが、.done(function initMap(jsonDataList) { の中で new ns.Map していますがこれは不要です。表示済みのマップをsubmitのたびに作ってしまうことになります。

また、中心を動かしたいなら下記メソッドが使用出来ます。

【Map.setCenter() - 位置座標をセットする】
https://syncer.jp/Web/API/Google_Maps/JavaScript/Map/setCenter/

【Map.panTo() - 位置座標を絶対的に移動する】
https://syncer.jp/Web/API/Google_Maps/JavaScript/Map/panTo/

投稿2017/02/10 18:19

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ssk

2017/02/11 05:17

ありがとうございます。 new ns.Mapをコメントアウトしても動作が確認できました。 住所を入力→検索は正常に動作していますが、条件指定→検索の方がうまくいきません、、 一回目の検索ではうまくいっています。 2回目、検索条件を変更して検索すると、1回目の条件のままです。。
ssk

2017/02/11 05:30

.done(function initMap(jsonDataList) { の中で new ns.Map をそのままにすると、2回目の検索条件の結果をマップ上に反映できます。 しかし、マップの位置はcenter: new ns.LatLng(35, 139.739) に移動してしまいます。。
kei344

2017/02/11 06:09

> 2回目、検索条件を変更して検索すると、1回目の条件のままです。。 Marker を削除しなければ残ります。
ssk

2017/02/11 06:27 編集

度々申し訳ございません。 json = jsonDataList;の直前でマーカーを削除しました(やり方が間違っていると思います。)どのように削除すればよいでしょうか? marker = new ns.Marker(); marker.setMap(null); json = jsonDataList;
ssk

2017/02/11 06:45

ありがとうございます。 試行錯誤して行ってみます><
ssk

2017/02/11 07:45 編集

たぶん、根本が違うと思うのですが、、配列はpushできています。 marker_list.forEachが実行されていないようです。 助言いただけると助かります>< //変数宣言 var infoWindow; var marker_list; ns = google.maps; //------------------------------ //マーカーを管理するためのmarker_list marker_list = new ns.MVCArray(); //setMap(null)を実行し、地図から削除 marker_list.forEach(function(marker, idx) { marker.setMap(null); }); //JSONを処理 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); }); });
kei344

2017/02/11 07:57

marker_lisにmarker が入っていないですよ。
ssk

2017/02/11 08:00

できました、、、、! 助言、本当にありがとうございました。 助かりました><基本を勉強しながら進めてまいります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問