GoogleMapのデザインカスタマイズ

GoogleMapをサイトに埋め込む場合、アイコンの変更や色などカスタマイズする方法をご紹介します。

GoogleMap API V3のカスタマイズ方法

カスタマイズにはGoogle Map API V3を利用します。
※jQueryを使用した方法になります。

1. htmlにjavascriptの追加

htmlの下の方。/bodyの直前？あたりに貼りつけ。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
 
$(function(){
 
  // マップ設定
  var latLng = new google.maps.LatLng(35.681801,139.765998);
  map = new google.maps.Map(
    document.getElementById("gMap"),
    {
      zoom: 17,
      center: latLng,
      scrollwheel: false
    }
  );
 
  // マーカー設定
  var markerImg = {
    url: 'images/marker.png'
  };
  var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    icon: markerImg
  });
 
  //デザインカスタマイズ
  var mapStyle = 
[{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#e0efef"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"hue":"#1900ff"},{"color":"#c0e8e8"}]},{"featureType":"road","elementType":"geometry","stylers":[{"lightness":100},{"visibility":"simplified"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"transit.line","elementType":"geometry","stylers":[{"visibility":"on"},{"lightness":700}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#7dcdcd"}]}]
;
 
  var mapType = new google.maps.StyledMapType(mapStyle);
  map.mapTypes.set('myMapType', mapType);
  map.setMapTypeId('myMapType');
 
});
</script>

8行目：住所の設定

(35.681801,139.765998);　住所の緯度、経度を指定する。
緯度、経度を調べる方法はgooglemapで表示したい住所を検索しアイコンを置きたい場所で「右クリック」→「この場所について」をクリック。表示された緯度、経度をクリックすると検索窓に緯度経度が入るのでそれをコピペ。

12行目：地図の縮小拡大

サイズを変更すれば地図の縮小拡大ができます。

20行目：アイコン

アイコン画像を指定します。

30行目：スタイルの変更

ここで地図のデザインを変更することができます。
面倒なのでこちらのサイトからコピペしてくると便利でした。
Snazzy Maps

お好みのデザインを選択して「Copy」ボタンでコピーしてくる。
30行目に貼りつけ。

2. CSS

#gMap {
  height: 440px;
}

3. html

マップを表示したい場所に設置。

<div id="gMap"></div>

たぶんこんな感じで表示できると思います。ご参考までに。

関連記事