Google Maps API v3：リスナーを使用して地図のラベルを動的に変更するにはどうすればよいですか？

Question

Google Maps API v3を使用して、マップのラベルをプログラムで変更するにはどうすればよいですか？あなたは基本的なビューで、hereは、ラベルがclearely表示されて見ることができるように

var Map_Style = //JSON format containing my map style; 
var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: {lat: -19 , lng: -43.5}, 
    }); 
map.setOptions({styles: Map_Style}); //Applying the custom style to my map. 

：私のマップのスタイルを変更するためには

は、私は次のコードを使用しています。

しかし、私が衛星ビューのために変更すると、ラベルは空中像によって難読化されます。 （hereと表示されます。）

マップビューを変更するためにユーザーがボタンをクリックすると、マップスタイルを変更できるリスナーを使用します。それは次のようなものでしょうか？

map.addListener('maptypeid_char', function(e) { 
    //change the map Style 
}); 

したがって、正確にはどのようなアプローチですか？

Answer 1

これは非常に実行可能です。マップevent listenerを使用するだけです。リスナーの内部で、マップスタイルを変更する関数を呼び出します。リスナーのサンプル、クリックDBLCLICK、ドラッグ、マウスオーバー、などされている

は、ここにサンプルです：

function initMap() { 

    var myLatlng = {lat: -25.363, lng: 131.044}; 
    var customMapTypeId = 'custom_style'; 
    var customMapType = new google.maps.StyledMapType([ 
     { 
     stylers: [ 
      {hue: '#890000'}, 
      {visibility: 'simplified'}, 
      {gamma: 0.5}, 
      {weight: 0.5} 
     ] 
     }, 
     { 
     elementType: 'labels', 
     stylers: [{visibility: 'on'}] 
     }, 
     { 
     featureType: 'water', 
     stylers: [{color: '#890000'}] 
     } 
    ], { 
     name: 'Custom Style' 
    }); 
    var customMapTypeId = 'custom_style'; 


    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: myLatlng 
    }); 
//listener for mouse click,etc 
    map.addListener('click', function() { 
    //execute your Style map change 
     map.mapTypes.set(customMapTypeId, customMapType); 
     map.setMapTypeId(customMapTypeId); 
    }); 
} 

何よ、ここが起こるのは、あなたのマウスをクリックすると、地図のスタイル（ラベルなど）が変更されるということですボタン。役に立つかもしれないreference to labels, eventsがあります。