今回はGoogle Maps JavaScript APIで表示されるマップに備わっている、「ユーザがマップを操作する上で必要となるUI要素」について解説したいと思います。
この「ユーザがマップを操作する上で必要となるUI要素」のことを「コントロール」と呼びます。
コントロールには、デフォルトで表示されているものと明示的に指定しないと表示されないものがありますので、まずはその種類をみていきましょう。
それでは次に、コントロールの表示と非表示を切り替えたり、詳細を設定するソースをみていきましょう。
それでは、それぞれにtrueまたはfalseの値を設定し、どのような表示になるかを試してみましょう。
以下サンプルでは、ズームコントロール、マップタイプコントロールを非表示とし、スケールコントロールとストリービューコントロール、全画面表示コントロールを表示としました。
サンプルページはこちら このサンプルでは、デフォルトの UI の動作に修正を加えています。
デフォルトの UI を全て無効にしたい場合は、次の通り設定しましょう。
このように設定することで、Google Maps JavaScript API が自動で設定した UI 動作を全て無効にすることができます。
コントロールを変更するには、MapOptionsの該当するコントロールのoptions フィールドを修正します。
以下サンプルは、マップタイプコントロールの横並びバーをドロップダウンメニューのスタイルで表示させるオプションを追加し、それぞれのコントロールの表示位置を指定しています。
コントロールの配置は、マップ内で、他のマップ要素や他のコントロールの位置を考慮して、API によってうまく配置されます。
配置を指定すると画面上のどの場所に表示されるのかを確認してみましょう。
サンプルページはこちら
マップのコントロールの解説は以上となります。
任意のコントロールを非表示とさせたり、配置を指定することで、さらに地図をカスタマイズすることが可能となります。
自分のサイトにあった地図や、自分のイメージする地図システムを作っていきましょう。
この「ユーザがマップを操作する上で必要となるUI要素」のことを「コントロール」と呼びます。
コントロールには、デフォルトで表示されているものと明示的に指定しないと表示されないものがありますので、まずはその種類をみていきましょう。
コントロールの種類
マップで使用できるコントロールの種類は以下の通りです。| コントロール名 | プロパティ名 | 位置 | 詳細（位置はデフォルトの表示位置を示しています） |
| ズーム コントロール | zoomControl | 右下 | +と-のボタンで表示します。マップのズームレベルを変更します。 |
| マップタイプ コントロール | mapTypeControl | 左上 | ドロップダウン メニューまたは横並びのボタンバーで表示します。マップタイプを選択します。 |
| ストリートビュー コントロール | streetViewControl | 右下 | ペグマン アイコンで表示します。このアイコンをマップにドラッグしてストリビューを表示します。 |
| 回転コントロール | RotateControl | 右下 | 傾斜のある画像を含むマップの傾きと回転を組み合わせて制御します。 |
| スケールコントロール | scaleControll | - | 地図の縮尺を表示します。デフォルトは表示されません。 | 全画面表示コントロール | fullscreenControl | - | マップを全画面モードで表示します。モバイル端末ではデフォルトで有効になっていますが、PC ではデフォルトで無効になっています。 |
それでは次に、コントロールの表示と非表示を切り替えたり、詳細を設定するソースをみていきましょう。
コントロールの追加
コントロールの表示と非表示を切り替えたり、外観を変更したりする場合は、 以下の MapOptions オブジェクトのフィールドを使います。
//booleanの値をtrueにすると、各コントロールが追加され、falseにすると非表示となります。
{
zoomControl: boolean,
mapTypeControl: boolean,
scaleControl: boolean,
streetViewControl: boolean,
rotateControl: boolean,
fullscreenControl: boolean
}
それでは、それぞれにtrueまたはfalseの値を設定し、どのような表示になるかを試してみましょう。
以下サンプルでは、ズームコントロール、マップタイプコントロールを非表示とし、スケールコントロールとストリービューコントロール、全画面表示コントロールを表示としました。
<script>
var map;
function initMap() {
//インスタンスを作成
map = new google.maps.Map(document.getElementById('map'), {
//地図のオプション
//初期のズームレベル
zoom: 12,
//地図の中心点
center: {
lat: 35.681167,
lng: 139.767052
},
//trueにすると、各コントロールが追加され、falseにすると非表示となります
zoomControl: false, //非表示
mapTypeControl: false, //非表示
scaleControl: true, //表示
streetViewControl: true, //表示
rotateControl: true, //表示
fullscreenControl: true //表示
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
サンプルページはこちら このサンプルでは、デフォルトの UI の動作に修正を加えています。
デフォルトの UI を全て無効にしたい場合は、次の通り設定しましょう。
デフォルト UI を無効にする
デフォルト UI を無効にするには、マップのMapOptions オブジェクト内のdisableDefaultUI プロパティを true に設定します。このように設定することで、Google Maps JavaScript API が自動で設定した UI 動作を全て無効にすることができます。
<script>
var map;
function initMap() {
//インスタンスを作成
map = new google.maps.Map(document.getElementById('map'), {
//地図のオプション
//初期のズームレベル
zoom: 12,
//地図の中心点
center: {
lat: 35.681167,
lng: 139.767052
},
//デフォルトのUIを全て無効にする
disableDefaultUI: true
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
では次に、コントローラの中でも、それぞれの設定を変更して動作や外観を変更できる「オプション」についてみていきましょう。
コントロールのオプション
コントロールの中には、動作や外観、配置を変更できるものがあります。コントロールを変更するには、MapOptionsの該当するコントロールのoptions フィールドを修正します。
以下サンプルは、マップタイプコントロールの横並びバーをドロップダウンメニューのスタイルで表示させるオプションを追加し、それぞれのコントロールの表示位置を指定しています。
コントロールの配置は、マップ内で、他のマップ要素や他のコントロールの位置を考慮して、API によってうまく配置されます。
配置を指定すると画面上のどの場所に表示されるのかを確認してみましょう。
< script >
var map;
function initMap() {
//インスタンスを作成
map = new google.maps.Map(document.getElementById('map'), {
//地図のオプション
//初期のズームレベル
zoom: 12,
//地図の中心点
center: {
lat: 35.681167,
lng: 139.767052
},
//trueにすると、各コントロールが追加され、falseにすると非表示となります
//スームコントロール
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
//マップタイプコントロール
mapTypeControl: true,
mapTypeControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER,
//マップタイプコントロールの表示スタイルを指定
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: ['roadmap', 'terrain']
},
//スケールコントロール
scaleControl: true,
//ストリートビューコントロール
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_BOTTOM
},
//回転コントロール
rotateControl: true,
rotateControllOptions: {
position: google.maps.ControlPosition.RIGHT_CENTER
},
//全画面表示コントロール
fullscreenControl: true
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
サンプルページはこちら
マップのコントロールの解説は以上となります。
任意のコントロールを非表示とさせたり、配置を指定することで、さらに地図をカスタマイズすることが可能となります。
自分のサイトにあった地図や、自分のイメージする地図システムを作っていきましょう。
ご質問などございましたら、お気軽に下記コメント欄にお寄せください。
※当サイトで使用しているコンテンツについて
Googleマップの地図画面については、自作コンテンツを使用しています。
地図画像の使用については地図の共有、埋め込み方法についてをご確認ください。
また、手順説明に使用してるGoogleのホームページ、プロダクトページなどのキャプチャ画像についてはガイドラインに従った形で掲載しています。
詳しくはGoogle ブランド使用許諾 ブランド利用規約の概要、よくある質問の内容をご確認ください。
（※上記説明内では、「必ず一切加工せずに使用してください。」と記載がありますが。当サイトで使用する場合、個人情報等保護のため、一部モザイク処理をしています。）
万が一、当サイトに規約違反となる画像等を発見した場合は、直ちにご報告ください。
尚、当サイトに掲載されている文章、画像等の著作権は、当社または文章、画像等の提供者にあります。これらの著作物は、「私的利用のための複製」や「引用」などの著作権法上認められた場合を除き、無断で転用・引用することはできません。ご利用になりたいものがありましたら、Google＋よりお問い合わせください。
Googleマップの地図画面については、自作コンテンツを使用しています。
地図画像の使用については地図の共有、埋め込み方法についてをご確認ください。
また、手順説明に使用してるGoogleのホームページ、プロダクトページなどのキャプチャ画像についてはガイドラインに従った形で掲載しています。
詳しくはGoogle ブランド使用許諾 ブランド利用規約の概要、よくある質問の内容をご確認ください。
（※上記説明内では、「必ず一切加工せずに使用してください。」と記載がありますが。当サイトで使用する場合、個人情報等保護のため、一部モザイク処理をしています。）
万が一、当サイトに規約違反となる画像等を発見した場合は、直ちにご報告ください。
尚、当サイトに掲載されている文章、画像等の著作権は、当社または文章、画像等の提供者にあります。これらの著作物は、「私的利用のための複製」や「引用」などの著作権法上認められた場合を除き、無断で転用・引用することはできません。ご利用になりたいものがありましたら、Google＋よりお問い合わせください。
コメント
コメントを投稿