いつもお世話になっております。
Google Maps API にて外部のJSONファイルを読み込みピンを表示させています。
ズームレベルによってマップのデザインを変更したく途中までソースは書けたのですが動作せずに困っております。
アドバイスをいただけましたら幸いです。
やりたいこと
ズームレベル15以上でpoiの表示やwaterの色を指定(15以下は未設定にしたい)など
現在のソースでは、地図のスタイルが全く変わらずにいます。
ズームレベルの条件式(google.maps.event.addListener(map, "zoom_changed", function() 以下)は一応生きてはおります。全く関係のない他のテスト記述は動いたので…。
var map; var markers = []; var infowindow = new google.maps.InfoWindow(); var point_of_interest; //マップデザイン poiの表示非表示 var water_color; //マップデザイン 水の色 function initialize() { geocoder = new google.maps.Geocoder(); var center = new google.maps.LatLng(XXX,XXX); map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP, /* こちらのデザイン記述をズームレベルで変更したいです */ styles: [{ "featureType": "landscape", "elementType": "labels", "stylers": [{ "visibility": "off" }], }, { "featureType": "poi", "elementType": "all", "stylers": [{ "visibility": point_of_interest, }] }, { "featureType": water, "elementType": "all", "stylers": [{ water_color }, { "visibility": "on" }] }] }); markMultiple(); } function markMultiple(){ $.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); }); var markerCluster = new MarkerClusterer(map, markers); }); } function markMap(position, content){ var marker = new google.maps.Marker({ position: position, icon: 'img/icon.png' }); google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(content); infowindow.open(map, marker); }); markers.push(marker); /* ズームレベルでデザインを変更 */ google.maps.event.addListener(map, "zoom_changed", function() { if ( map.getZoom() < 15 ) { point_of_interest = '"off"' water_color = ''; } else if ( map.getZoom() > 15 ){ point_of_interest = '"on"' water_color = '"color": "#ggg"'; } }); } google.maps.event.addDomListener(window, 'load', initialize);
いただいたアドバイスを参考に調整しましたが動きません。
ソースはこちらです。
var styles= [{ "featureType": "landscape", "elementType": "labels", "stylers": [{ "visibility": "off" }], }, { "featureType": "poi", "elementType": "all", "stylers": [{ "visibility": "", }] }, { "featureType": "water", "elementType": "all", "stylers": [{ color: "" }, { "visibility": "on" }] }] }); function initialize() { geocoder = new google.maps.Geocoder(); var center = new google.maps.LatLng(XXX,XXX); var opts = { zoom: zoom, center: center, mapTypeControl: false, streetViewControl: false, zoomControl: zoomControl, mapTypeId: google.maps.MapTypeId.ROADMAP, }; map = new google.maps.Map(document.getElementById("map"), opts); /* ズームレベルでデザインを変更 */ google.maps.event.addListener(map, "idle", function() { if ( map.getZoom() < 15 ) { styles[2].stylers[0].color = '#ff0000'; map.setOptions({styles: styles}); } else if ( map.getZoom() > 15 ){ styles[2].stylers[0].color = ''; map.setOptions({styles: styles}); } }); markMultiple(); }
ご教授いただけますと幸いです。よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/07 02:28