Google Mapのカスタマイズ

こんにちわ、無性にかまぼこが食べたい開発者のⅠです。
明日から３連休！という方もいらっしゃると思いますが、地域によっては天気が思わしくないようですので、外出される方は十分ご注意ください。

それでは、前回から引き続き、Google Maps JavaScript APIに関係するお話をしたいと思います。

Google Mapを無事に表示出来た方、もう少しカスタマイズしてみましょう。

マップのレイアウトにかかわるvar optionのプロパティをもう少し紹介しておきますと、


① mapTypeControl: (true/false)

「地図⇔航空写真」を切り替えるボタンの表示・非表示を切り替えます。
ページに表示するマップのサイズとの兼ね合い等の理由で非表示にしたい方もいらっしゃると思います。その場合には、"false"に設定しましょう。


② streetViewControl: (true/false)

「ストリートビュー」の機能の表示・非表示を切り替えます。
余談ですが、APIを利用して埋め込んだMapでも公式ページと同じように表示できることに驚きました……。さすが、Googleですね。


この二つをJavaScriptに追加してみると、このようになります。

 google.maps.event.addDomListener(window, 'load', function () {
var map = document.getElementById("map_canvas");
 var options = {
  zoom: 11,
  center: new google.maps.LatLng(35.360667, 138.727775),
  mapTypeId: google.maps.MapTypeId.ROADMAP
  
//↓ここから↓
streetViewControl: false,
  mapTypeControl: false  
//↑ここまで↑
};
  new google.maps.Map(map, options);
 });

便利機能だからと言ってとりあえず残すのではなく、そのページの趣旨や見た目に合わせて表示を切り替えてみると良いかもしれませんね。

それでは今回はここまでです。