お世話になっております。
Google Map APIにて外部jsonファイルを読み込みマーカーを表示させております。
マーカーが日本各地に散らばっているため、検索フォームを設置し地名から座標を取得しそのエリアのマーカーが閲覧しやすいようにしております。
初期設定のズームレベルが低いため、地名を検索後はズームレベルを上げて表示させたいのですが、うまくいかず困っております。
アドバイスをいただけましたら幸いです。
初期表示のズーム値は「9」で、地名検索のsubmitボタンを押した後は「15」に変更するという条件式を書けたら理想です。
submitを押した後のアクションでsetZoomを設定しておりますが、myOptionsに書かれているマップの初期設定時のズーム値が上書きされてしまっているのが現状です。
ソースは下記になります。(関係のなさそうな記述はカットしております)
JS
var place = '東京'; var infowindow = new google.maps.InfoWindow(); var markers; /* ================================= 検索ボタンの挙動 ==================================*/ $(function () { $('#submitbutton').click(function (e) { e.preventDefault(); place = $('#searchPlace').val(); //検索後一瞬このズームレベルで表示されますが、myOptionsのズームレベル(9)に上書きされてしまいます map.setZoom(15); google.maps.event.addDomListener(window, 'load', initialize(place)); }); }); function initialize(place) { // インスタンス[geocoder]作成 var geocoder = new google.maps.Geocoder(); geocoder.geocode({ // 起点のキーワード 'address': place }, function(result, status) { // ジオコーディングが成功した場合 if (status == google.maps.GeocoderStatus.OK) { // 中心点を指定 var latlng = result[0].geometry.location; // オプション var myOptions = { zoom: 9, //←この数値を検索後は15にしたい center: latlng, }; map = new google.maps.Map(document.getElementById('map'), myOptions); //JSON読み込み $(function() { var data = new Array(); markers = []; $.getJSON("smaple.json" , function(data) { $.each(data, function (i, obj) { var positionposition = new google.maps.LatLng(obj.latitude, obj.longitude); var content = 'infoWindowの内容'; myMarker = new google.maps.Marker({ position: new google.maps.LatLng(obj.map_latitude, obj.map_longitude), map: map, icon: { url: 'icon.png', scaledSize: new google.maps.Size(30, 30), }, }); attachMessage(myMarker,content); }); markerCluster = new MarkerClusterer(map, markers, { imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m', zoomOnClick: true, maxZoom: 15, gridSize: 20 }); }); }); } else { alert('取得できませんでした…'); } }); } google.maps.event.addDomListener(window, 'load', initialize(place)); function attachMessage(marker,content) { google.maps.event.addListener(marker, 'click', function() { new google.maps.Geocoder().geocode({ latLng: marker.getPosition() }, function(result, status) { if (status == google.maps.GeocoderStatus.OK) { infowindow.setContent(content); infowindow.open(marker.getMap(), marker); } }); }); markers.push(marker); }
HTML
<div class="search"> <form method="searcharea" action="./#.html"> <div class="formarea"> <input type="text" name="sp" id="searchPlace" placeholder="地名を入力してください" > <input type="submit" name="regist" value="検索" id="submitbutton"> </div> </form> </div> <div id="map"></div>
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー