こんにちは！
最近、いろんなサイトを見ていると、ちょっとカッコいい「Googleマップ」を見かけるようになりました。
いずれカッコいい「Googleマップ」のカスタマイズをやってみたいと思っていたので、実際に実装し、その手順を備忘録として記事にしておきます。
念のため「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についてご説明します。
上記コードの数字の部分で、経度と緯度を指定します。
経度と緯度を指定するには、座標を調べたい場所を「Googleマップ」で開きます。例として「大阪城」の経度と緯度を取得したいと思います。
↓「Googleマップ」で「大阪城」を開き、調べたい場所の上で右クリックし、「この場所について」をクリックしてください。
↓画面左上に経度と緯度の情報が表示されます。こちらをコピーし先程のjsに貼り付けてください。これで「大阪城」のマップが表示されているはずです。
jsのコード説明に戻ります。
上記は「拡大比率」を設定する部分です。数字を大きくすればその分、地図も拡大します。今回は「15」にしておきます。
上記はマップの中心を指定できます。「latlng」で通常通り表示したい場所が中心になります。
上記は地図の表示タイプを設定できます。「google.maps.MapTypeId.」後に指定するタイプが4種類あります。「ROADMAP」が通常の「地図」を表示、「SATELLITE」が「航空写真」を表示、「HYBRID」が「航空写真＋地図」を表示、「TERRAIN」が「地形」を表示となります。
最後が地図を読み込む部分です。「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」に設定していきます。
対象物のタイプになります。タイプには以下のような種類があります。
「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」・・・地図上の「水域」が選択されます。「海」や「川」「プール」なども含みます。
対象物の要素を選択できます。タイプには「Geometry(線)」「Labels(テキスト)」があります。
上記で指定した対象物の見た目を変更することができます。色に関するオプションは以下の種類があります。
「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”)。
アイコンを追加！
↓オリジナルのアイコンをマップのマーカーとして設定してみます。まずはアイコンを用意してください。
コードの説明をします。
アイコンが格納されている場所を指定してください。
アイコンのサイズを指定してください(横×縦)。
アイコンの表示位置を指定してください。基本は(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)
最後に！
けっこう色々とカスタマイズが可能であることが分かって頂けたと思います。色の設定ぐらいなら簡単にカスタマイズが可能なので、ぜひお試しください。
以上「Googleマップをちょっとカッコよくカスタマイズ！」でした！
それではまた。
コメント