0

しばらく調べてみましたが、答えが見つからないようです。Google Maps API v3 をウェブサイトに実装しましたが、うまくいきました。ただし、スタイルを設定しようとすると (単純に彩度を下げるだけ)、うまくいかないようです。さまざまなチュートリアルを試しましたが、役に立ちませんでした。私は Twitter Bootstrap も使用しています。これにより、CSS の作業を少し節約できます。ウェブサイトはここで見ることができます。

マップのスクリプトは次のとおりです。

<script type="text/javascript">
  function initialize() {
    var styles = [
      {
        featureType: "all", elementType: "all", stylers: [ { saturation: -100 }
        ]
      }
    ];

    var mapOptions = {
      center: new google.maps.LatLng(42.29900, -71.26232),
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

  };
</script>

これは、ページのさらに下にある HTML に挿入する方法です。

<div class="bg-blue">
  <div id="map_canvas" style="width: 100%; height: 250px;"></div>
</div>

上で述べたように、マップは表示されますが、スタイルは有効になりません。何かお役に立てることがあればお知らせください。とても感謝しております！

4

2 に答える 2

1

スタイルを作成しましたが、マップに適用していません...

https://developers.google.com/maps/documentation/javascript/styling#styling_the_default_map

function initialize() {

    var styles = [
      {
        featureType: "all", elementType: "all", stylers: [ { saturation: -100 }
        ]
      }
    ];

    var mapOptions = {
      center: new google.maps.LatLng(42.29900, -71.26232),
      zoom: 17,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      styles: styles  // <-- add this
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

};
于 2013-02-27T18:10:25.233 に答える
0

オブジェクトstylesにプロパティを設定する必要があります。mapOptions

var mapOptions = {
  center: new google.maps.LatLng(42.29900, -71.26232),
  zoom: 17,
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  styles: styles
};

http://jsfiddle.net/bTZcS/

于 2013-02-27T18:09:47.427 に答える