いつもお世話になっております。
Google Maps API にて外部のJSONファイルを読み込みマーカーを表示させています。
検索フォームをから任意の座標を取得できるようにしています。
スマホ(iOS)で操作するとマーカーが表示されたりされなかったりで困っております。
ファーストビューでは表示されており、地名検索で座標が変わったマップが再読み込みされると消えてしまいます。
そこから地名を問わず再度検索し新たな座標のマップが読み込まれた際にはマーカーが表示されます。
再び検索するとまた消えてしまい…という繰り返しです。
PCでは問題ありません。
また、ファーストビュー時に表示されているエリア内での検索(東京都を表示中で新宿を検索)でしたらマーカーは表示されたままです。
検索ボタンを押した後のマップのロードが正しくできていないように思えます。
お知恵をお貸しいただけますと幸いです。
余談ですが、ページを更新すると頻繁にマップがグレー1色になってしまったり、マーカーがはじめから表示されなかったり不安定さが目立ちます。
こちらもスマホでのみの事象です。何か関係しておりますでしょうか。
JS
var map; var marker; var infowindow = new google.maps.InfoWindow(); var place = '銀座'; var styles = [{省略します}]; /* 検索ボタンの挙動 */ $(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: 15, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP, styles: styles }; // #mapを取得し、[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() { markers = []; $.getJSON('jsonファイル', function (data) { $.each(data, function (i, obj) { var latLng = new google.maps.LatLng(obj.map_latitude, obj.map_longitude); var content = '情報ウィンドウの内容'; markMap(latLng, 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, studioName, content) { var marker = new google.maps.Marker({ position: position, icon: { url: icon.png, 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
<form method="search" action="#.html"> <input type="text" name="sp" id="searchPlace" placeholder="入力して検索してね" > <input type="submit" name="regist" value="検索" id="searchButton"> </form> <div id="map"></div>
現在の進捗
マーカーのソースをinitialize内に持ってくれば表示されることがわかりました。
function initialize(place) { // 中心点を指定 var latlng = result[0].geometry.location; var marker = new google.maps.Marker({ position: latlng, map: map, }); その他前後のソースは同様なので省略します ``` 上記ですとマップの中心にピンが表示されます。 この部分にmarkMap内の処理を書き換えられればと試しているのですが、どう移植すれば良いか手探り状態です。 よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー