質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.82%

Google Map API ズームレベルによってデザインを変更(水の色変更等)したい

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,233

chibiyuko_0124

score 18

いつもお世話になっております。
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();
}

ご教授いただけますと幸いです。よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

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"
  }]
 }]


ここで、指定している変数ですが。

使っているのは「変数に入った値」であって、変数そのものではありません。
ですから、その変数の中身を変えたところで、mapの中の設定は変わりません。

zoom_changedのイベントで、「mapにスタイル設定を反映する」必要があるのだと思います。

■ ちょびっと、余談。

例えば、 12→16→20 のように、zoomが変更された場合、
16でスタイル設定済みになりますので、20の時にもう一度スタイル設定する必要はないですよね。(逆の場合も同様です)

スタイル設定の反映で、地図の表示回数が増えるのかは不明(やったことないので・・)ですが、その増減の件も含めて無駄な処理は避けるのが無難です。

「スタイルを変えなくてもいい」ケースも考慮して、コードを書かれた方が良いと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/07 11:28

    mix-peach様
    ありがとうございます。
    いただいたアドバイスを参考に修正してみましたが、未だ動きません。
    おっしゃるとおり無駄な処理は避けたいです…。
    「スタイルを変えなくていい」ケースの条件式が書けるのであれば書きたいのでますが、取り急ぎ先にstyleの変更ができればと思っております。
    現状のソースはkei344様の返信に記載させていただきます。

    キャンセル

checkベストアンサー

0

内容については mix-peachさんの回答で。
(下記はスタイルを切り替える部分の例が載っている記事)

【Google Maps APIのMap styleの変更 - kuhaL@boX】
http://www.kuhalabo.net/kxoops/modules/d3blog/details.php?bid=107

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/07 15:38

    提示されたスタイル部分のコードについてはサンプルで動くことは確認いただけたと思います。
    サンプルで提示したものと同じまでコードを削り、動くか確認してみてください。それで動かないなら問題が再現できない以上おやくにたてません。

    キャンセル

  • 2018/09/20 09:32

    kei344様
    返信が遅れました申し訳ありません。
    いただいたサンプルを参考に引き続き試しております。
    長々とお付き合いいただきありがとうございました。

    キャンセル

  • 2018/11/01 15:24

    kei344様
    こちらの件大変遅くなってしまいました。
    デモを参考に無事に実装できました。
    ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.82%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る