Googleマップをちょっとカッコよくカスタマイズ！

公開日：2014年5月17日
最終更新日: 2015年3月12日

google_map_photo_01

こんにちは！

最近、いろんなサイトを見ていると、ちょっとカッコいい「Googleマップ」を見かけるようになりました。

いずれカッコいい「Googleマップ」のカスタマイズをやってみたいと思っていたので、実際に実装し、その手順を備忘録として記事にしておきます。

目次！

1.念のため「Googleマップ」とは？
2.設置手順！
3.デモページ！
4.対応ブラウザ！

念のため「Googleマップ」とは？

「Googleマップ」とは、検索エンジンのGoogleが提供する地図表示サービスです。企業や実店舗を持つお店の場所が分かるように「Googleマップ」をサイトに表示して利用するケースが多いです。

「Googleマップ」が導入される前は、デザイナーがマップのイラストなどを作成して掲載していましたが、周辺の状況が変わると修正が必要になり、運用しづらい部分もありました。

でも「Googleマップ」を使用すると周辺の状況などは「Google」側で常に修正されますので、運用面でも便利です。しかも「Googleマップ」をカスタマイズできるようになりましたので、デザインにも合わせることが可能です。

こんな便利な「Googleマップ」を使用しないのは損ですよね。

設置手順！

htmlの設定！

htmlのbody内に以下のコードを追加してください。

<body onload="initialize();">
  <div id="map" style="width: 500px; height:300px;"></div>
</body>

「Googleマップ」の詳細情報を設定！

表示させたい「Googleマップ」の詳細情報を設定します。以下が詳細情報を設定するコードになります。こちらは「map.js」として保存してください。

function initialize() {
  var latlng = new google.maps.LatLng(34.687897, 135.526115);  /* 表示したい場所の経度と緯度を設定 */
  var myOptions = {
    zoom: 15,  /* 拡大比率 */
    center: latlng,  /* 表示枠内の中心点 */
    mapTypeId: google.maps.MapTypeId.ROADMAP  /* 表示タイプを指定 */
  };
  var map = new google.maps.Map(document.getElementById('map'), myOptions);
}

上記のjsについてご説明します。

【var latlng = new google.maps.LatLng(34.687897, 135.526115);】
上記コードの数字の部分で、経度と緯度を指定します。

経度と緯度を指定するには、座標を調べたい場所を「Googleマップ」で開きます。例として「大阪城」の経度と緯度を取得したいと思います。

「Googleマップ」で「大阪城」を開き、調べたい場所の上で右クリックし、「この場所について」をクリックしてください。

google_map_photo_02

画面左上に経度と緯度の情報が表示されます。こちらをコピーし先程のjsに貼り付けてください。これで「大阪城」のマップが表示されているはずです。

google_map_photo_03

jsのコード説明に戻ります。

【zoom:】
上記は「拡大比率」を設定する部分です。数字を大きくすればその分、地図も拡大します。今回は「15」にしておきます。

【center:】
上記はマップの中心を指定できます。「latlng」で通常通り表示したい場所が中心になります。

【mapTypeId:】
上記は地図の表示タイプを設定できます。「google.maps.MapTypeId.」後に指定するタイプが4種類あります。「ROADMAP」が通常の「地図」を表示、「SATELLITE」が「航空写真」を表示、「HYBRID」が「航空写真＋地図」を表示、「TERRAIN」が「地形」を表示となります。

【var map = new google.maps.Map(document.getElementById(‘map’), myOptions);】
最後が地図を読み込む部分です。「map」の部分が「html」で指定したidになります。

これでマップの詳細情報の設定は完了です。

実際にカスタマイズ！

カスタマイズした「map.js」のコードは以下のようになります。

function initialize() {
  var latlng = new google.maps.LatLng(34.687897, 135.526115);  /* 表示したい場所の経度と緯度を設定 */
  var myOptions = {
    zoom: 15,  /* 拡大比率 */
    center: latlng,  /* 表示枠内の中心点 */
    mapTypeId: google.maps.MapTypeId.ROADMAP  /* 表示タイプを指定 */
  };
  var map = new google.maps.Map(document.getElementById('map'), myOptions);

  /* スタイルをカスタマイズ */
  var styleOptions = 
  [
    {
      "featureType": "landscape.natural",
      "stylers": [
        { "color": "#dcdcdc" }
      ]
    },{
      "featureType": "road",
      "stylers": [
        { "gamma": 2.61 },
        { "color": "#ffffff" }
      ]
    },{
      "featureType": "transit.line",
      "stylers": [
        { "invert_lightness": true },
        { "visibility": "simplified" },
        { "color": "#111111" }
      ]
    },{
      "elementType": "labels.icon",
      "stylers": [
        { "visibility": "off" }
      ]
    },{
      "featureType": "landscape.man_made",
      "elementType": "geometry",
      "stylers": [
        { "visibility": "simplified" },
        { "color": "#555555" }
      ]
    },{
      "featureType": "poi",
      "elementType": "geometry",
      "stylers": [
        { "color": "#999999" }
      ]
    },{
      "featureType": "water",
      "stylers": [
        { "color": "#cccccc" }
      ]
    },{
      "featureType": "transit.station",
      "elementType": "geometry",
      "stylers": [
        { "color": "#333333" }
      ]
    }
  ];

  var styledMapOptions = { name: '大阪城' }
  var googlemapType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
  map.mapTypes.set('googlemap', googlemapType);
  map.setMapTypeId('googlemap');

  /* 大阪城アイコンの取得 */
  var icon = new google.maps.MarkerImage('icon_castle.png',  /* アイコンの場所 */
    new google.maps.Size(32,37),  /* アイコンのサイズ */
    new google.maps.Point(0,0)  /* アイコンの位置 */
  );
 
  /*マーカーの設置*/
  var markerOptions = {
    position: latlng,  /* 表示場所と同じ位置に設置 */
    map: map,
    icon: icon,
    title: '大阪城'  /* マーカーのtitle */
  };
  var marker = new google.maps.Marker(markerOptions);
}

上記コードを説明します。
基本的には「var styleOptions」に設定していきます。

【featureType】
対象物のタイプになります。タイプには以下のような種類があります。

「all」・・・地図上の「対象物」が全て選択されます。

「administrative」・・・地図上の「行政」が選択されます。「国名」や「市町村」なども含みます。
「administrative.country」・・・「国」が選択されます。
「administrative.land_parcel」・・・「区画」が選択されます。
「administrative.locality」・・・「地区・市区」が選択されます。
「administrative.neighborhood」・・・「周辺地域」が選択されます。
「administrative.province」・・・「州・県」が選択されます。

「landscape」・・・地図上の「風景」が選択されます。「建物」や「山」なども含みます。
「landscape.man_made」・・・「人造物」が選択されます。
「landscape.natural」・・・「自然物」が選択されます。

「poi」・・・地図上の「ランドマーク」が選択されます。「学校」や「病院」なども含みます。
「poi.attraction」・・・「観光地」が選択されます。
「poi.business」・・・「ビジネス」が選択されます。
「poi.government」・・・「政府機関」が選択されます。
「poi.medical」・・・「緊急サービス」が選択されます。
「poi.park」・・・「公園」が選択されます。
「poi.place_of_worship」・・・「宗教関係の施設」が選択されます。
「poi.school」・・・「学校」が選択されます。
「poi.sports_complex」・・・「スポーツ施設」が選択されます。

「road」・・・地図上の「道路」が選択されます。「高速道路」や「標識」なども含みます。
「road.arterial」・・・「幹線道路」が選択されます。
「road.highway」・・・「高速道路」が選択されます。
「road.local」・・・「地方道」が選択されます。

「transit」・・・地図上の「交通機関の駅と路線」が選択されます。「空路」や「バス停」なども含みます。
「transit.line」・・・「交通機関の路線」が選択されます。
「transit.station」・・・「交通機関の駅」が選択されます。
「transit.station.airport」・・・「空港」が選択されます。
「transit.station.bus」・・・「バス停留所」が選択されます。
「transit.station.rail」・・・「鉄道駅」が選択されます。

「water」・・・地図上の「水域」が選択されます。「海」や「川」「プール」なども含みます。

【elementType】
対象物の要素を選択できます。タイプには「Geometry(線)」「Labels(テキスト)」があります。

【stylers】
上記で指定した対象物の見た目を変更することができます。色に関するオプションは以下の種類があります。

「color(RGBの16進文字)」・・・列対象物の色を設定します(例 “color”:”#dcdcdc”)。
「hue(RGBの16進文字)」・・・基本色を指定します(例 “hue”:”#dcdcdc”)。
「lightness」・・・明度を調整できます(例 “lightness”:”10″)。
「saturation」・・・彩度を調整できます(例 “lightness”:”10″)。
「gamma」・・・階調度を調整できます(例 “gamma”:”1.0″)。
「invert_lightness」・・・現在の明るさを反転できます。「true(反転)」「false(反転しない)」です(例 “invert_lightness”:”true”)。

要素自体を表示するかしないを選択できる「visibility」があります(例　visibility: ‘off’)。

アイコンを追加！

オリジナルのアイコンをマップのマーカーとして設定してみます。まずはアイコンを用意してください。

google_map_photo_04

コードの説明をします。

【new google.maps.MarkerImage】
アイコンが格納されている場所を指定してください。

【new google.maps.Size】
アイコンのサイズを指定してください(横×縦)。

【new google.maps.Point】
アイコンの表示位置を指定してください。基本は(0,0)で問題ありません。

以上で設定が完了しました。

デモページ！

上記の設定をしたデモページを作成しました。

デモページはこちら！

デモページのサンプルファイルはこちらよりダウンロードできます。

サンプルファイルはこちら！

対応ブラウザ！

下記のブラウザで動作チェック済です。

Google Chrome(Windows)
Firefox(Windows)
Safari(Windows)
Internet Explorer 10(Windows)
Internet Explorer 9(Windows)
Internet Explorer 8(Windows)
Internet Explorer 7(Windows)