お世話になっております。
Google Map APIにて外部jsonファイルを読み込みマーカーを表示させております。
マーカーが全国に散らばっているため、検索フォームで地名から座標を取得しそのエリアのマーカーが閲覧しやすいようにしております。
■困っていること
表示が不安定で、ファーストビューでマップ部分がグレー一色になってしまう時があります。
検索ボタンを押すとマップが表示されます。
■原因
下記jsのzoom: z || zoom
部分
ズーム値の設定しています。
z・・・検索後の表示のズーム値を指定(13)
zoom・・・閲覧デバイスごとにファーストビューでのズーム値を指定(PC:11、スマホ:9)
この部分をzoom=11
とすればグレー表示が解消されました。
JavaScript
1var place = '東京'; 2var infowindow = new google.maps.InfoWindow(); 3var zoom; 4var markers; 5var map; 6 7/* 検索ボタンの挙動 */ 8$(function () { 9 $('#searchButton').click(function (e) { 10 markerCluster.clearMarkers(); 11 e.preventDefault(); 12 place = $('#searchPlace').val(); 13 google.maps.event.addDomListener(window, 'load', initialize(place,13)); 14 }); 15}); 16function initialize(place,z) { 17 // インスタンス[geocoder]作成 18 var geocoder = new google.maps.Geocoder(); 19 //ズーム値 初期値 拡大縮小ボタン 20 if (window.matchMedia('(min-width: 741px)').matches) { 21 $(function () { 22 zoom = 10; 23 }); 24 } else { 25 $(function () { 26 zoom = 9; 27 }); 28 }; 29 geocoder.geocode({ 30 // 起点のキーワード 31 'address': place 32 }, function (result, status) { 33 if (status == google.maps.GeocoderStatus.OK) { 34 // 中心点を指定 35 var latlng = result[0].geometry.location; 36 // 初期設定オプション 37 var myOptions = { 38 zoom: z || zoom, 39 center: latlng, 40 mapTypeId: google.maps.MapTypeId.ROADMAP, 41 }; 42 // #mapを取得し、[mapOptions]の内容の、地図のインスタンス([map])を作成する 43 map = new google.maps.Map(document.getElementById('map'), myOptions); 44 // 中央部座標取得 45 var latlngDefault = map.getCenter(); 46 // フォームに座標をセット 47 $('#inputLat').attr('value', latlngDefault.lat()); 48 $('#inputLng').attr('value', latlngDefault.lng()); 49 // 場所 50 $('#place').text(place); 51 // ドラッグで座標取得 52 google.maps.event.addListener(map, 'drag', dispLatLng); 53 markMultiple(); 54 } else { 55 alert('情報を取得できませんでした。'); 56 } 57 }); 58} 59 60/* 【概要】テキストボックスフォームへ座標数値をセット、表示する */ 61function dispLatLng(){ 62// 場所 63$('#place').text(place); 64} 65 66/* JSON読み込み */ 67function markMultiple() { 68 markers = []; 69 $.getJSON('json.json', function (data) { 70 $.each(data, function (i, obj) { 71 var latLng = new google.maps.LatLng(obj.map_latitude, obj.map_longitude); 72 var content = '情報ウィンドウの内容'; 73 markMap(latLng, content); 74 }); 75 //クラスタリング設定 76 markerCluster = new MarkerClusterer(map, markers, { 77 imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m', 78 zoomOnClick: true, 79 maxZoom: 15, 80 gridSize: 20 81 }); 82 }); 83} 84 85function markMap(position, MapIcon, studioName, content) { 86 var marker = new google.maps.Marker({ 87 position: position, 88 icon: { 89 url: '/re_search/images/map_icon_w.png', 90 scaledSize: new google.maps.Size(25, 29), 91 }, 92 }); 93 //情報ウィンドウ 94 google.maps.event.addListener(marker, 'click', function () { 95 infowindow.setContent(content); 96 infowindow.open(map, marker); 97 }); 98 markers.push(marker); 99} 100google.maps.event.addDomListener(window, 'load', initialize(place)); 101
HTML
1<div class="searchbox"> 2 <form method="search" action="#.html"> 3 <div class="formarea"> 4 <input type="text" name="sp" id="searchPlace" placeholder="例:東京"> 5 <input type="submit" name="regist" value="検索" id="button"> 6 </div> 7 </form> 8</div> 9<div id="map"></div>
グレー表示にならないように上記の実装をするにはどのように書き換えれば良いかわからず投稿させていただきました。
お力添えをいただけますと幸いです。
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー