Google Maps オリジナルデザインにカスタマイズ

Motoki Watanabe 52views 更新:2016年12月12日

Google Mapを描画する関数内に http://code.prostaff1.com/sample/10_google-map/styledmaps/ こちらで生成したjsonコードを記入(次のコードは例)

// Original Google Maps Styled Maps Wizard
var style = [
 {
  featureType: "landscape.man_made",
  elementType: "all",
  stylers: [
   { hue: "#bb00ff" }
  ]
 },{
  featureType: "landscape.natural",
    elementType: "all",
    stylers: [
     { hue: "#00ff44" },
     { lightness: 0 },
     { saturation: 80 }
    ]
 },{
    featureType: "transit",
    elementType: "all",
    stylers: [
     { hue: "#00e5ff" },
     { saturation: 56 }
    ]
  }
];

var styledMapOptions = {
 map: map_canvas,
 name: "originalstyle"
}

var stylemap = new google.maps.StyledMapType(style,styledMapOptions);
map_canvas.mapTypes.set("originalstyle", stylemap);
map_canvas.setMapTypeId("originalstyle");

このとき、上記のサイトで生成したjsonコードでは

var stylemap = new google.maps.StyledMapType(stylez,styledMapOptions);

となっているので、

var stylemap = new google.maps.StyledMapType(style,styledMapOptions);

と直す。 最初の宣言する変数名 style と、StyledMapTypeで使う変数名 style は一致している必要がある。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません