######説明
住所入力→検索ボタンクリックされた時
$('#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>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/02/11 05:17
2017/02/11 05:30
2017/02/11 06:09
2017/02/11 06:27 編集
2017/02/11 06:36
2017/02/11 06:45
2017/02/11 07:45 編集
2017/02/11 07:57
2017/02/11 08:00