前提・実現したいこと
google maps apiとクラスタリング機能を使ってマップを表示させています。
外部のjsonファイルの座標でマーカーを出力しています。
全国に300個ほど乱立しているので、検索フォームをつけ、入力した地名や住所等の座標に飛べるようにしております。
ところが「検索」ボタンを押すたびにマーカーの表示(数字)がおかしくなってしまいます。
発生している問題・エラーメッセージ
単体マーカーのところがボタンを押すことで「2」に、 「2」でまとまっているマーカーだと「4」に、 再び押すと、単体マーカーが「3」に、「2」でまとまっているマーカーは「6」とどんどん増えていってしまいます。
検索ボタンを押して結果が出力される際に一度マーカーをリセット(削除)して再生成されれば解消できそうなのですが、その記述で苦戦しております。
ご教授いただけますと幸いです。
ソースコード
JSは下記になります。
var map; var markers = []; var infowindow = new google.maps.InfoWindow(); var zoom; var place = '東京駅'; var markerCluster = null; //検索ボタンクリック時の挙動 $(function() { $('#searchButton').click(function(e) { markerCluster.clearMarkers(); //追加してみたマーカー削除コード e.preventDefault(); place = $('#searchPlace').val(); 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: 10, center: latlng, mapTypeControl: false, streetViewControl: false, mapTypeId: google.maps.MapTypeId.ROADMAP, }; // #map_canvasを取得し、[mapOptions]の内容の、地図のインスタンス([map])を作成する map = new google.maps.Map(document.getElementById('map'), myOptions); // 中央部座標取得 var latlngDefault = map.getCenter(); // フォームに座標をセット $('#inputLat').attr('value', latlngDefault.lat()); $('#inputLng').attr('value', latlngDefault.lng()); // 場所 $('#place').text(place); // ドラッグで座標取得 google.maps.event.addListener(map, 'drag', dispLatLng); } else { alert('取得できませんでした…'); } }); markMultiple(); } //テキストボックスフォームへ座標数値をセット、表示する function dispLatLng(){ // 場所 $('#place').text(place); } //jsonファイルの読み込み function markMultiple(){ $.getJSON('jsonファイル', function(data) { $.each(data, function(i, obj) { var latLng = new google.maps.LatLng(obj.A,obj.B); var content = '吹き出しの内容'; var MapIcon = 'img/icon.png'; markMap(latLng, MapIcon, content); }); markerCluster = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',zoomOnClick: true, maxZoom: 15, gridSize: 20}); }); } function markMap(position, MapIcon,content){ var marker = new google.maps.Marker({ position: position, icon: { url: MapIcon, scaledSize: new google.maps.Size(25, 29) //アイコンサイズ } }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(content); infowindow.open(map, marker); }); markers.push(marker); } google.maps.event.addDomListener(window, 'load', initialize(place));
HTMLは下記になります。
<div class="searchbox"> <form method="post" action="#.html"> 住所や地名を入力してください: <input type="text" name="sp" id="searchPlace"> <input type="submit" name="regist" value="検索" id="searchButton"> <a href="#.html">初期化</a> </form> </div> <h3><span id="place"></span></h3> <div id="map"></div>
よろしくお願いいたします。

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/08/10 00:37
2018/08/10 08:47
2018/09/13 01:52