headerタグ
＜script src="http://maps.google.com/maps/api/js?sensor=true"＞
＜/script＞
HTMLにはonlodと表示させるためのタグを用意します。
HTML
＜body onload="initialize();"＞
＜div id="map_canvas" style="width:100%;height:500px;"＞＜/div＞
これで配置は完了です。
株式会社LIG
https://liginc.co.jp/web/service/other-service/62242
株式会社LIG
https://liginc.co.jp/web/service/other-service/62242
スタイル リファレンス
スタイル オプションを使用すると、道路、公園、企業や店舗、その他の有名スポットなどの地物の視覚表示を変更して、
標準の Google マップの表現スタイルをカスタマイズできます。
こうした地物のスタイル変更に加え、地物を完全に非表示にすることも可能です。
これにより、マップの特定のコンポーネントを強調したり、マップをページのスタイルに合わせたりすることができます。
例
次の JSON スタイル宣言では、すべてのマップ地物を灰色にして、幹線道路の形状を青色にし、風景のラベルを完全に非表示にしています。
[
{
"featureType": "all",
"stylers": [
{ "color": "#C0C0C0" }
]
},{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [
{ "color": "#CCFFFF" }
]
},{
"featureType": "landscape",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
}
]
google.com
https://developers.google.com/maps/documentation/javascript/style-reference?hl=ja#stylers
stylers
スタイラーは、マップの地物と要素に適用できる表示形式オプションです。
次の JSON スニペットは、RGB 値を使用して地物を明るい緑色で表示します。
"stylers": [
{ "color": "#99FF33" }
]
次のスニペットは、開始色に関係なく、地物の色から完全に彩度を取り除きます。その結果、グレースケールの地物がレンダリングされます。
"stylers": [
{ "saturation": -100 }
]
次のスニペットは、地物を完全に非表示にします。
"stylers": [
{ "visibility": "off" }
]
次のスタイル オプションがサポートされています。
hue（#RRGGBB 形式で RGB 値を示す 16 進文字列）: 基本色を示します。
注: このオプションは、Google のデフォルト スタイル（またはマップ上で定義したその他のスタイル オプション）で指定されている彩度と明度を維持したまま色相を設定します。設定された色は、ベースマップのスタイルに相関しています。Google がベースマップのスタイルに変更を加えた場合、その変更は、hue でスタイルが設定されたマップの地物に影響を及ぼします。可能であれば、絶対的な color スタイラーを使用することをお勧めします。
lightness（-100 以上 100 以下の浮動小数値）: 要素の明度の変化率です。負の値を指定すると暗くなり（-100 は黒を示す）、正の値を指定すると明るくなります（+100 は白を示す）。
注: このオプションは、Google のデフォルト スタイル（またはマップ上で定義したその他のスタイル オプション）で指定されている彩度と色相を維持したまま明度を設定します。設定された色は、ベースマップのスタイルに相関しています。Google がベースマップのスタイルに変更を加えた場合、その変更は、lightness でスタイルが設定されたマップの地物に影響を及ぼします。可能であれば、絶対的な color スタイラーを使用することをお勧めします。
saturation（-100 以上 100 以下の浮動小数値）: 要素に適用する基本色の彩度の変化率です。
注: このオプションは、Google のデフォルト スタイル（またはマップ上で定義したその他のスタイル オプション）で指定されている色相と明度を維持したまま彩度を設定します。設定された色は、ベースマップのスタイルに相関しています。Google がベースマップのスタイルに変更を加えた場合、その変更は、saturation でスタイルが設定されたマップの地物に影響を及ぼします。可能であれば、絶対的な color スタイラーを使用することをお勧めします。
gamma（0.01 以上 10.0 以下の浮動小数値で、1.0 は無補正）: 対象の要素に適用するガンマ補正の量です。ガンマ補正は色の明度を非線形的に変更し、白や黒の値には影響を及ぼしません。通常、ガンマは複数の要素のコントラストを変更する際に使用します。たとえば、要素の縁と内部のコントラストの強弱を調整するためにガンマ補正を行うことができます。
注: このオプションは、ガンマカーブを使用して、Google のデフォルト スタイルに相関する明度を調整します。Google がベースマップのスタイルに変更を加えた場合、その変更は、gamma でスタイルが設定されたマップの地物に影響を及ぼします。可能であれば、絶対的な color スタイラーを使用することをお勧めします。
invert_lightness（true の場合）は既存の明度を反転します。これは、たとえば暗い地図と白いテキストに素早く切り替える場合に便利です。
注: このオプションは単に Google のデフォルト スタイルを反転します。Google がベースマップのスタイルに変更を加えた場合、その変更は、invert_lightness でスタイルが設定されたマップの地物に影響を及ぼします。可能であれば、絶対的な color スタイラーを使用することをお勧めします。
visibility（on、off、simplified のいずれか）: マップ上での要素の表示有無、あるいは表示方法を指定します。visibility が simplified の場合、影響を受ける地物から一部のスタイル機能が削除されます。たとえば、道路はアウトラインがない細い線に簡素化され、公園はラベルテキストが失われラベルアイコンが保持されます。
color（#RRGGBB 形式で RGB 値を示す 16 進文字列）: 地物の色を設定します。
weight（ゼロ以上の整数値）: 地物の厚みをピクセル単位で設定します。weight を大きな値に設定すると、タイルの境界付近でクリップする場合があります。
スタイルのルールは、指定した順序で適用されます。複数の処理は、単一のスタイル処理に統合せずに、各処理をスタイル配列の個別のエントリとして定義してください。
注: 順番が変わると結果が異なる処理もあるため、順番は重要になります。スタイル処理によって変更される地物や要素には、（通常は）既存のスタイルが適用されています。既存のスタイルが存在する場合、処理はそのスタイルに対して実行されます。
色相、彩度、明度モデル
注: 色相、彩度、明度、ガンマ設定の効果は、ベースマップのスタイルに相関しています。Google がベースマップのスタイルに変更を加えた場合、その変更は、それらのオプションでスタイルが設定されたマップの地物に影響を及ぼします。
可能であれば、絶対的な color スタイラーを使用することをお勧めします。
スタイル化されたマップでは、スタイラー処理での色の指定に色相、彩度、明度（HSL）モデルが使用されます。
色相は基本色を、彩度はその色の強度を、明度は構成色の中の白や黒の相対的な量を示しています。
ガンマ補正は、色空間に対して明度を変更する操作で、通常はコントラストを強めたり弱めたりするために行われます。
さらに、HSL モデルは、座標空間内で色を定義しています。
hue は色相環内の回転方向を、saturation と lightness はそれぞれ異なる軸の大きさを示します。
hue は、ある RGB 色空間（白と黒の色調がないことを除けば、ほとんどの RGB 色空間と同じです）で計測されます。
色相、彩度、明度モデル
hue は HTML の 16 進数で色の値を示しますが、この値は彩度や明度ではなく基本色（色相環の回転方向）を決めるためだけに使用されます。
彩度や明度は、変化率という形で別に指定します。
たとえば、純粋な緑色の色相を hue:0x00ff00 または hue:0x000100 として定義できます。両方の色相は同一です。どちらの値も、HSL 色モデルでは純粋な緑色を指します。
RGB 色相環
赤、緑、青の値が等しい RGB の hue 値には、色相がありません。
このような値はいずれも HSL 座標空間での回転方向を示さないためです。
たとえば、"#000000"（黒）や "#FFFFFF"（白）、純粋な灰色の色調などが該当します。
黒、白、灰色を表示するには、saturation をすべて取り除いて（値を -100 に設定）、lightness を調整する必要があります。
また、すでにカラースキームが設定されている既存の地物を変更する場合は、hue などの値を変更しても既存の saturation や lightness には影響しません
google.com
https://developers.google.com/maps/documentation/javascript/style-reference?hl=ja#stylers
JSON オブジェクト
JSON スタイル宣言は、次の要素で構成されます。
featureType（オプション）: スタイルを変更する地物。地物とは、道路、公園、水域など、マップ上の地理的特性のことです。
地物を指定しない場合、すべての地物が選択されます。
elementType（オプション）: 特定の地物のプロパティ。
要素とは、ラベルやジオメトリなど、地物のサブパーツのことです。
要素を指定しない場合、地物のすべての要素が選択されます。
stylers: 選択した地物および要素に適用されるルール。
スタイラーは、地物の色、可視性、厚みを表します。
1 つまたは複数のスタイラーを地物に適用できます。
スタイルを指定するには、featureType および elementType セレクターのセットと stylers をスタイル配列に統合する必要があります。
1 つの配列に含まれる任意の地物の組み合わせを対象にすることができます。
ただし、一度に適用できるスタイルの数には制限があります。
スタイル配列が最大文字数を超過した場合、スタイルは一切適用されません。
このページの以降の部分では、地物、要素、スタイラーの詳細について説明します。
featureType
次の JSON スニペットは、マップ上のすべての道路を選択します。
{
"featureType": "road"
}
地物または地物のタイプとは、道路、公園、水域、企業や店舗など、マップ上の地理的特性のことです。
地物は、all をルートとするツリー構造で分類されます。地物を指定しない場合、すべての地物が選択されます。
地物を all として指定した場合も、すべての地物が選択されます。
一部の地物には、ドット表記で指定した子地物が含まれます。
たとえば、landscape.natural や road.local です。
road などの親地物のみを指定した場合、親地物に指定したスタイルは、road.local や road.highway などのすべての子地物に適用されます。
親地物に含まれる要素は、その子地物すべてに含まれない場合があることに注意してください。
利用できる機能は次のとおりです。
all（デフォルト）: すべての地物を選択します。
administrative: すべての行政区画を選択します。スタイルは行政区画のラベルのみに適用され、地理的境界や形状の塗りつぶしには適用されません。
administrative.country: 国を選択します。
administrative.land_parcel: 区画を選択します。
administrative.locality: 地区 / 市区を選択します。
administrative.neighborhood: 周辺地域を選択します。
administrative.province: 州 / 県を選択します。
landscape: すべての風景を選択します。
landscape.man_made: 人造物を選択します。
landscape.natural: 自然物を選択します。
landscape.natural.landcover: 土地被覆物を選択します。
landscape.natural.terrain: 自然地形を選択します。
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.highway.controlled_access: 出入り口が制限されている高速道路を選択します。
road.local: 地方道を選択します。
transit: 交通機関のすべての駅と路線を選択します。
transit.line: 交通機関の路線を選択します。
transit.station: 交通機関のすべての駅を選択します。
transit.station.airport: 空港を選択します。
transit.station.bus: バス停留所を選択します。
transit.station.rail: 鉄道駅を選択します。
water: 水域を選択します。
google.co
https://developers.google.com/maps/documentation/javascript/style-reference?hl=ja#stylers
elementType
次の JSON スニペットは、すべての地方道のラベルを選択します。
{
"featureType": "road.local",
"elementType": "labels"
}
要素は地物の下位区分です。
たとえば道路は、地図上のグラフィカルな線（幾何学図形）と、道路の名称を示すテキスト（ラベル）で構成されます。
次の要素が利用可能ですが、地物によっては、一部またはすべての要素に対応する場合や、すべての要素に非対応の場合があります。
all（デフォルト）: 指定した地物のすべての要素を選択します。
geometry: 指定した地物の形状を示す要素を選択します。
geometry.fill: 地物の形状の塗りつぶしのみを選択します。
geometry.stroke: 地物の形状のストロークのみを選択します。
labels: 指定した地物に関連付けられているテキストのラベルを選択します。
labels.icon: 地物のラベル内に表示されるアイコンのみを選択します。
labels.text: ラベルのテキストのみを選択します。
labels.text.fill: ラベルの塗りつぶしのみを選択します。通常、ラベルの塗りつぶしは、ラベルテキストを囲む色付きのアウトラインとしてレンダリングされます。
labels.text.stroke: ラベルのテキストのストロークのみを選択します。
google.com
https://developers.google.com/maps/documentation/javascript/style-reference?hl=ja#stylers
2015.08.13
GoogleMapの埋め込みと、デザインやアイコンの変更などをカスタマイズする方法
はやち
（編集部注＊2013年12月18日に公開された記事を再編集したものです。）
どうもです、はやちです(◞‸◟)
いきなりですがみなさん、せっかくデザインされたWebサイトの中にデフォルトのGoogleマップがあるとなんだかもったいなく感じますせんか？(◞‸◟)
どーにかこれをうまくデザインできないだろうか(◞‸◟)
ということで、今回は簡単にGoogleマップのデザインをカスタマイズできる方法をご紹介したいと思います٩( ᐛ )و
Googleマップを表示させよう
まずはじめに基本から。Googleマップを設置しましょう( ˘ω˘)☝
Googleマップの設置
headerタグAPIを取得するスクリプトをつけます。
HTMLにはonlodと表示させるためのタグを用意します。
これで配置は完了です。
マップの詳細を設定しよう
次にmapstyle.jsを用意して、マップの詳細を設定します。
JSを書く前にまずはマップを（緯度、経度）の数値に変換しましょう( ˘ω˘)☝
緯度、経度を取得するためにまずはGoogleマップで住所を入れます。
eyecatch
次に、右クリックでこの場所についてを選択しましょう。
これで緯度経度が取得されました( ˘ω˘)☝
取得された緯度経度を記述しましょう( ˘ω˘)☟
function initialize() {
var latlng = new google.maps.LatLng(35.710333,139.777148);
var myOptions = {
zoom: 18, /*拡大比率*/
center: latlng, /*表示枠内の中心点*/
mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
これで表示の仕方は完了です、このJSが基本の形になります。( ˘ω˘ )☝
Googleマップのデザインを変えよう
こちらのツールでデザインを変えちゃいましょう( ˘ω˘)☟
Styled Map Wizard ：
http://www.dwzone-it.com/StyledMapWizard/StyledMapWizard.asp
Styled Map Wizardの使い方はLIGで詳しく紹介されている記事がありますので、あわせてご覧ください。
参照ページ：Googleマップのお手軽カスタマイズ！Styled Maps Wizardの使い方
http://liginc.co.jp/web/tool/browser/63680
彩度・明度・ガンマ調整など細かく調整できます。路線やマークの色味も別で調整することも可能です( ˘ω˘ )☝
右にあるバーでスタイルを追加して重ねて調整することができます( ˘ω˘ )☝
調整が完了しましたらボタンを押してコードを取得します。
調整が完了しましたらボタンを押してコードを取得します。
取得されたコードはこの用にはっつけましょう( ˘ω˘ )☟
function initialize() {
var latlng = new google.maps.LatLng(35.710333,139.777148);
var myOptions = {
zoom: 18,/*拡大比率*/
center: latlng,/*表示枠内の中心点*/
mapTypeControlOptions: { mapTypeIds: ['sample', google.maps.MapTypeId.ROADMAP] }/*表示タイプの指定*/
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
/*取得スタイルの貼り付け*/
var styleOptions = [
{
"stylers": [
{ "saturation": -100 },
{ "visibility": "simplified" },
{ "lightness": 22 }
]
}
];
var styledMapOptions = { name: '株式会社Lig' }
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('sample', sampleType);
map.setMapTypeId('sample');
}
できたかな？
これでマップのカスタマイズは完了になります( ˘ω˘)☝
アイコンも配置してみよう
せっかくなのでアイコンも配置してみましょう( ˘ω˘)☝
こちら今回用意したアイコン ico こちらの画像を配置します( ˘ω˘)
書き足したJSがこちらになります( ˘ω˘ )☟
new google.maps.Sizeで画像のサイズ
new google.maps.Pointで場所を指定します。
function initialize() {
var latlng = new google.maps.LatLng(35.710333,139.777148);
var myOptions = {
zoom: 18,/*拡大比率*/
center: latlng,/*表示枠内の中心点*/
mapTypeControlOptions: { mapTypeIds: ['sample', google.maps.MapTypeId.ROADMAP] }/*表示タイプの指定*/
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
/*アイコン設定▼*/
var icon = new google.maps.MarkerImage('ico.png',
new google.maps.Size(55,72),/*アイコンサイズ設定*/
new google.maps.Point(0,0)/*アイコン位置設定*/
);
var markerOptions = {
position: latlng,
map: map,
icon: icon,
title: '株式会社Lig'
};
var marker = new google.maps.Marker(markerOptions);
/*アイコン設定ここまで▲*/
/*取得スタイルの貼り付け*/
var styleOptions = [
{
"stylers": [
{ "saturation": -100 },
{ "visibility": "simplified" },
{ "lightness": 22 }
]
}
];
var styledMapOptions = { name: '株式会社Lig' }
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('sample', sampleType);
map.setMapTypeId('sample');
}
google.maps.event.addDomListener(window, 'load', initialize);
これで完成です( ˘ω˘)☝
出来上がったものはこちらになります( ˘ω˘)☟
demoページ
まとめ
JSが苦手な私でも、割とすんなり実装することができました✌(´ʘ‿ʘ｀)✌＜やったお
サイトのテイストに合わせてGoogleマップもデザインすることでぐっと他のサイトと差が出ますね( ˘ω˘)
調整がうまくいかない方はサンプルコードを配布しているサイトもあるのでそちらも参考にするのもおすすめです( ˘ω˘)
先程もご紹介した下記参照ページでもご紹介しています。
参照ページ：Googleマップのお手軽カスタマイズ！Styled Maps Wizardの使い方
http://liginc.co.jp/web/tool/browser/63680
それでは。
株式会社LIG
https://liginc.co.jp/web/service/other-service/62242
function initialize() {
var latlng = new google.maps.LatLng(35.710333,139.777148);
var myOptions = {
zoom: 18,/*拡大比率*/
center: latlng,/*表示枠内の中心点*/
mapTypeControlOptions: { mapTypeIds: ['sample', google.maps.MapTypeId.ROADMAP] }/*表示タイプの指定*/
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
/*アイコン設定*/
var icon = new google.maps.MarkerImage('ico.png',
new google.maps.Size(55,72),/*アイコンサイズ設定*/
new google.maps.Point(0,0)/*アイコン位置設定*/
);
var markerOptions = {
position: latlng,
map: map,
icon: icon,
title: '株式会社Lig'
};
var marker = new google.maps.Marker(markerOptions);
/*取得スタイルの貼り付け*/
var styleOptions = [
{
"stylers": [
{ "saturation": -100 },
{ "visibility": "simplified" },
{ "lightness": 22 }
]
}
];
var styledMapOptions = { name: '株式会社Lig' }
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('sample', sampleType);
map.setMapTypeId('sample');
}
google.maps.event.addDomListener(window, 'load', initialize);
//function initialize() {
//var latlng = new google.maps.LatLng(35.710333, 139.777131);
//var myOptions = {
//zoom: 18, /*拡大比率*/
//center: latlng, /*表示枠内の中心点*/
//mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
/*};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}*/
株式会社LIG
https://liginc.co.jp/web/service/other-service/62242
function initialize() {
var latlng = new google.maps.LatLng(35.710333,139.777148);
var myOptions = {
zoom: 18,/*拡大比率*/
center: latlng,/*表示枠内の中心点*/
mapTypeControlOptions: { mapTypeIds: ['sample', google.maps.MapTypeId.ROADMAP] }/*表示タイプの指定*/
};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
/*アイコン設定*/
var icon = new google.maps.MarkerImage('ico.png',
new google.maps.Size(55,72),/*アイコンサイズ設定*/
new google.maps.Point(0,0)/*アイコン位置設定*/
);
var markerOptions = {
position: latlng,
map: map,
icon: icon,
title: '株式会社Lig'
};
var marker = new google.maps.Marker(markerOptions);
/*取得スタイルの貼り付け*/
var styleOptions = [
{
"stylers": [
{ "saturation": -100 },
{ "visibility": "simplified" },
{ "lightness": 22 }
]
}
];
var styledMapOptions = { name: '株式会社Lig' }
var sampleType = new google.maps.StyledMapType(styleOptions, styledMapOptions);
map.mapTypes.set('sample', sampleType);
map.setMapTypeId('sample');
}
google.maps.event.addDomListener(window, 'load', initialize);
//function initialize() {
//var latlng = new google.maps.LatLng(35.710333, 139.777131);
//var myOptions = {
//zoom: 18, /*拡大比率*/
//center: latlng, /*表示枠内の中心点*/
//mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
/*};
var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}*/
株式会社LIG
https://liginc.co.jp/web/service/other-service/62242
function initialize() {
var latlng = new google.maps.LatLng(35.710333,139.777148);
var myOptions = {
zoom: 18, /*拡大比率*/
center: latlng, /*表示枠内の中心点*/
mapTypeId: google.maps.MapTypeId.ROADMAP/*表示タイプの指定*/
};
var map = new google.maps.Map(document.getElementById('databear2257map221'), myOptions);
}
Google Maps のパラメータ
グーグルマップのパラメータ指定の仕方を説明します。
他にもありますが、分かっている範囲です。
API版ではありません。URL版？です。
PC版URL例）
http://maps.google.co.jp/maps?f=q&hl=ja&geocode=&q=%E6%96%B0%E5%AE%BF&ie=UTF8&ll=35.68923,139.693995&spn=0.029488,0.083942&z=14
PC版パラメータ説明
パラメータ 説明 属性例
・f
左枠について、
q:通常（デフォルト）
d:乗換案内。現在地と目的地を記入するダイアログが表示される。
・hl
言語。
ja:日本。
en:英語
※ デフォルトではユーザーの環境に合わせる。＞日本だとja
・q
マーカー、吹き出しがつく。
地名か、緯度経度（カンマ区切り）で指定。
日本語の場合はURLエンコードで入力。 %E6%96%B0%E5%AE%BF（新宿）
・ie
入力文字コード。
UTF8（デフォルト）
Shift-JIS、EUC-JP、など利用可能。
・oe
出力文字コード。
UTF8（デフォルト）
Shift-JIS、EUC-JP、など利用可能。
・ll
地図の中心の緯度経度。
世界測地系、十進、カンマ区切り。
ex.) 35.68923,139.693995
・spn
表示範囲をDegree単位で指定。
zパラメータが無いときに有効。
カンマ区切り
ex.) 0.029488,0.083942
・z
ズーム。
0～20くらい（20以上が見れる地域もあるし、18以降は見れない地域もある。）
0が縮小、20が拡大
ex.) 14
・t
m:マップ（デフォルト）
k:サテライト
h:デュアル
p:地形
・om
地図右下に表示されるオーバービュー。
0:なし（デフォルト）
1:あり
・layer
ストリートビューなどの指示
t:トラフィックビュー（デフォルト）
c:ストリートビュー
・cbll
ストリートビューで、ポイントの緯度経度。
世界測地系、十進、カンマ区切り。 35.689186,139.693836
・cbp
ストリートビューで、各種表示の指定。
カンマ区切りで、
1つめ: 1:小さい画面 2:全画面
2つめ: ローテーションアングルをDegreeで
3つめ: チルトアングル。-90（真上）～90（真下）←？意味不明
4つめ: ズーム。0～2
5つめ: ピッチ。-90（真上）～90（真下） 2,123.388587
didit.jp
http://imakoko.didit.jp/imakoko_html/memo/parameters_google.html
0 件のコメント:
コメントを投稿