ZENRIN DataCom

【基礎】Googleマップのカスタマイズ方法 その1

最近ではさまざまなWebサイトに、Googleマップの地図を表示させているサイトが多くなってきています。Googleマップは通常の表示方法以外にも地図の色を変更したり、マーカーを表示・変更、情報ウィンドウの表示など、カスタマイズ次第で地図を見栄え良く見せることが可能です。今回はGoogle Maps APIを使用して、Googleマップをカスタマイズする基本的な方法をご紹介します。

Googleマップをカスタマイズしてより便利に使おう

Googleマップをお店や会社の所在地を表示させるために使うことも多いと思いますが、単純に表示させただけでは分かりにくい場合もありますよね。Googleマップは方法さえ分かれば簡単にカスタマイズが出来るのも大きな魅力。

Googleマップをカスタマイズするには、「Google Maps API」を使用することで可能になります。基本的なカスタマイズ方法を紹介します。

Googleマップの色をカスタマイズ

Googleマップの色味を変更するだけで、大きく印象を変えることができます。お店や会社の雰囲気と合わせたり、ブランドイメージに沿った地図を見せるとより統一感ありますよね。
地図の色味のカスタマイズはGoogle Maps APIのgoogle.maps.Mapのstylersを使用します。

stylersの項目hue(色相)、saturation(彩度)、lightness(明度)、gamma(ガンマ値)をそれぞれ設定しています。

styles: [{ 
    stylers: [  
    { hue: "#A9F5A9" }, { saturation: -50 }, 
    { lightness: 20 }, {gamma: 0.5 } 
    ] 
}]

スタイルの変更は、基本的にstylesの処理の中でカスタマイズする内容を記載していくことになります。
この例では地図全体の色味のみの変更ですが、道路や建物など細かくスタイルを変更したい場合は、stylesのfeatureTypeを使用します。
featureTypeの詳細はGoogle Maps APIの「スタイルリファレンス」を参照してください。

https://developers.google.com/maps/documentation/javascript/style-reference?hl=ja#style-features 別ウィンドウで開く

Googleマップにマーカーアイコンを表示させる

お店の場所や目印などにマーカーをつけておくと、地図を頼りに訪れる人にとって便利ですよね。
マーカーアイコンを追加するには、google.maps.Markerを使用し、マーカーアイコンの位置を指定します。

// 地図
var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 14,
  center: new google.maps.LatLng(35.6297781, 139.7944659),
  scrollwheel: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
var myMarker = new google.maps.Marker({
  // マーカーアイコン
  position: new google.maps.LatLng(35.6297781, 139.7944659),
  map: map
});

Googleマップに表示させるマーカーアイコンを変更する

Google標準のマーカーではなく、独自のマーカーアイコンを置くこともできます。マーカーアイコンを変更するにはgoogle.maps.MarkerImageを使用します。
Google.maps.MarkerImageは、google.maps.Markerの引数にiconの引数を追加し、アイコンで使用するファイル名とアイコンのサイズ、位置などの情報を指定します。
以下では、アイコンのファイル名に「icon.png」を指定し、アイコンのサイズを50,40、アイコンの座標位置を0,0で指定しています。

// 地図
var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 14,
  center: new google.maps.LatLng(35.6297781, 139.7944659),
  scrollwheel: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});	

// マーカーアイコン
var marker = new google.maps.Marker({
  icon: new google.maps.MarkerImage(
  'icon.png', //表示させるアイコンを指定する
  new google.maps.Size(50,40),
  new google.maps.Point(0,0)
),
position: new google.maps.LatLng(35.6297781, 139.7944659),
map: map,
title: '東京ビッグサイト'

地図に情報ウィンドウを表示する

アイコンをクリックした際に情報ウインドウを表示させるためには、アイコンをクリックしたときのイベントをaddListenerで追加し、情報ウィンドウを表示させるための処理をgoogle.maps.InfoWindowを使用して記述します。

// 地図
var map = new google.maps.Map(document.getElementById("map"), {
  zoom: 18,
  center: new google.maps.LatLng(35.6252572, 139.7421705),
  scrollwheel: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});
var myMarker = new google.maps.Marker({
  // マーカーアイコン
  position: new google.maps.LatLng(35.6252572, 139.7421705),
  map: map
});
var myInfoWindow = new google.maps.InfoWindow({
  // 吹き出しに出す文
  content: '株式会社ゼンリンデータコムです'
});
  // 吹き出しを開く
  myInfoWindow.open(map, myMarker);
  google.maps.event.addListener(myInfoWindow, "closeclick", function() {
    google.maps.event.addListenerOnce(myMarker, "click", function(event) {
      myInfoWindow.open(map, myMarker);
    });
  });

Googleマップのカスタマイズは無限大!

Google Maps APIを使用して、地図の色をカスタマイズしたり、マーカーの表示・変更などの方法についてご紹介しました。Googleマップではさまざまな地図のカスタマイズをすることが可能になります。

Googleマップについてより詳しく知りたい場合は是非、当社ゼンリンデータコムにおまかせください!

関連の法人向けサービス