【GoogleMap】都道府県の境界線を強調してみる

デフォルトのカラーリングだとぼんやりしている県境を
スタイル付き地図を使用することで強調してみました。

(1)動作サンプル
都道府県の境界線を強調してみる

(2)比較サンプル ※普通に地図を表示しているだけの状態
ごく普通のマップ

コード解説

サンプルはjQueryが使える環境を前提にコードを書いていますが
それが無くてもスタイル付き地図は使用することができます。

HTML(HEAD部分)

jQueryとGoogleMapApiV3を読み込んどく。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

HTML(BODY部分)

地図埋め込み用のDIVタグを入れる。
(ついでに今回はjavascriptコードの汎用性を考えてデータ属性に座標と縮尺の情報も含めておく。)

<div id="ggmap" class="ggmap_camvas" data-lat="34.702381" data-lon="135.495302" data-zoom="8">
  <noscript>※地図を表示するためにはjavascriptを有効にする必要があります。</noscript>
</div>

javascript

スタイルオブジェクトを作って地図オブジェクトに紐付けています。

$(document).ready(function(){
  
  //地図の表示条件
  var mapCanvas = $('#ggmap');
  var mapLat = Number(mapCanvas.attr('data-lat'));
  var mapLon = Number(mapCanvas.attr('data-lon'));
  var mapZoom = Number(mapCanvas.attr('data-zoom'));
  var mapCenter = new google.maps.LatLng(mapLat, mapLon);

  //スタイルオブジェクトの内容設定
  //(都道府県の境界線を強調する)　
  var myMapStyles = [
    {
       featureType: 'administrative.province'
      ,elementType: 'geometry.stroke'
      ,stylers: [
         { hue: '#ff0000' }//色(16進数)
        ,{ visibility: 'on' }//表示状態
        ,{ saturation: 100 }//彩度
        ,{ weight:2 }//太さ
      ]
    }
  ];

  //スタイルオブジェクトを作成
  var myMapStyledMapType = new google.maps.StyledMapType(myMapStyles, {name: "MAP"});
  
  //地図オブジェクトを作成
   var myMap = new google.maps.Map(mapCanvas.get(0), {
      center: mapCenter
     ,zoom: mapZoom
     ,mapTypeControlOptions: {
       mapTypeIds: ['my_map_style'] //←ここでマップタイプIDを格納する
     }
   });

   //マップにスタイルを関連付ける
   myMap.mapTypes.set('my_map_style',  myMapStyledMapType);

   //マップに関連付けしたスタイルを適用する
   myMap.setMapTypeId('my_map_style');

});

蛇足

それにしても、太さのオプションがリファレンスサイトでは『width』のはず
なのに実際は『weight』が利くようになっているのは仕様なのだろうか。。。

【参考サイト】
スタイル付き地図 - Google Maps JavaScript API v3 — Google Developers