Google Maps Platform
【基礎】Googleマップのカスタマイズ方法 その1
最近ではさまざまなWebサイトに、Googleマップの地図を表示させているサイトが多くなってきています。Googleマップは通常の表示方法以外にも地図の色を変更したり、マーカーを表示・変更、情報ウィンドウの表示など、カスタマイズ次第で地図を見栄え良く見せることが可能です。
今回はGoogle Maps APIを使用して、Googleマップをカスタマイズする基本的な方法をご紹介します。
今回はGoogle Maps APIを使用して、Googleマップをカスタマイズする基本的な方法をご紹介します。
Googleマップをカスタマイズしてより便利に使おう
Googleマップをお店や会社の所在地を表示させるために使うことも多いと思いますが、単純に表示させただけでは分かりにくい場合もありますよね。Googleマップは方法さえ分かれば簡単にカスタマイズが出来るのも大きな魅力。
Googleマップをカスタマイズするには、「Google Maps API」を使用することで可能になります。基本的なカスタマイズ方法を紹介します。
Googleマップをカスタマイズするには、「Google Maps API」を使用することで可能になります。基本的なカスタマイズ方法を紹介します。
Googleマップの色味を変更するだけで、大きく印象を変えることができます。お店や会社の雰囲気と合わせたり、ブランドイメージに沿った地図を見せるとより統一感ありますよね。
地図の色味のカスタマイズはGoogle Maps APIのgoogle.maps.Mapのstylersを使用します。
stylersの項目hue（色相）、saturation（彩度）、lightness（明度）、gamma（ガンマ値）をそれぞれ設定しています。
地図の色味のカスタマイズはGoogle Maps APIのgoogle.maps.Mapのstylersを使用します。
stylersの項目hue（色相）、saturation（彩度）、lightness（明度）、gamma（ガンマ値）をそれぞれ設定しています。
styles: [{
stylers: [
{ hue: "#A9F5A9" }, { saturation: -50 },
{ lightness: 20 }, {gamma: 0.5 }
]
}]
stylers: [
{ hue: "#A9F5A9" }, { saturation: -50 },
{ lightness: 20 }, {gamma: 0.5 }
]
}]
スタイルの変更は、基本的にstylesの処理の中でカスタマイズする内容を記載していくことになります。
この例では地図全体の色味のみの変更ですが、道路や建物など細かくスタイルを変更したい場合は、stylesのfeatureTypeを使用します。
featureTypeの詳細はGoogle Maps APIの「スタイルリファレンス」を参照してください。
この例では地図全体の色味のみの変更ですが、道路や建物など細かくスタイルを変更したい場合は、stylesのfeatureTypeを使用します。
featureTypeの詳細はGoogle Maps APIの「スタイルリファレンス」を参照してください。
Googleマップの色味を変更するだけで、大きく印象を変えることができます。お店や会社の雰囲気と合わせたり、ブランドイメージに沿った地図を見せるとより統一感ありますよね。
地図の色味のカスタマイズはGoogle Maps APIのgoogle.maps.Mapのstylersを使用します。
stylersの項目hue（色相）、saturation（彩度）、lightness（明度）、gamma（ガンマ値）をそれぞれ設定しています。
地図の色味のカスタマイズはGoogle Maps APIのgoogle.maps.Mapのstylersを使用します。
stylersの項目hue（色相）、saturation（彩度）、lightness（明度）、gamma（ガンマ値）をそれぞれ設定しています。
// 地図
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
});
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.maps.MarkerImageを使用します。
Google.maps.MarkerImageは、google.maps.Markerの引数にiconの引数を追加し、アイコンで使用するファイル名とアイコンのサイズ、位置などの情報を指定します。
以下では、アイコンのファイル名に「icon.png」を指定し、アイコンのサイズを50,40、アイコンの座標位置を0,0で指定しています。
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: '東京ビッグサイト'
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);
});
});
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 Maps APIを使用して、地図の色をカスタマイズしたり、マーカーの表示・変更などの方法についてご紹介しました。Googleマップではさまざまな地図のカスタマイズをすることが可能になります。
Googleマップについてより詳しく知りたい場合は是非、当社ゼンリンデータコムにおまかせください！
Googleマップについてより詳しく知りたい場合は是非、当社ゼンリンデータコムにおまかせください！
関連記事
サービス詳細、導入についてお気軽にお問い合わせください。
＼ 導入効果がわかる ／
＼ ご相談はこちらから／