いつもお世話になっております。
Google Maps APIにて外部jsonファイルを読み込みマーカーを表示させております。
マーカーが日本各地に散らばっているため、検索フォームを設置し地名から座標を取得しそのエリアのマーカーが閲覧しやすいようにしております。
これを、検索値をJSONの住所とし、マーカーが立っている場所のみの座標を取得したく思っています。
trueならその座標へ、falseなら移動しない or 初期表示の座標へ
現在のソースをどのように変更すれば良いのかというところから困っており、検索をしても参考となるページにたどり着けません。
お力添えをいただけますと幸いです。
JavaScript
var place = '東京'; var infowindow = new google.maps.InfoWindow(); var markers; var map; //マップのスタイルシート ★2 var styles = 省略 /* ================================= 検索ボタンの挙動 ==================================*/ $(function () { $('#searchButton').click(function (e) { e.preventDefault(); place = $('#searchPlace').val(); google.maps.event.addDomListener(window, 'load', initialize()); }); }); /* ================================= マップ 基本設定 ==================================*/ function initialize(place, z) { 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 mapOption = { zoom: 12, zoomControl: true, mapTypeControl: false, center: latlng, streetViewControl: false, scrollwheel: false, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: styles, }; map = new google.maps.Map(document.getElementById('map'), mapOption); $(function () { var data = new Array(); markers = []; $.getJSON("JSON.json", function (data) { $.each(data, function (i, obj) { 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", } }); 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="searchbox"> <form method="search" action="./index.html"> <div class="formarea"> <input type="text" name="sp" id="searchPlace" placeholder="検索" > <input type="submit" name="regist" value="検索" id="searchButton"> </div> </form> </div> <div id="map"></div>
よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー