Google マップ コントロール セット
Google マップ ウィジェット セット
Google マップ - デフォルトのウィジェット セット設定:
Google マップ - デフォルトのウィジェット セット設定:
標準の Google マップを使用する場合、デフォルト設定は次のとおりです。
.Zoom - 地図のズーム レベルを制御するスライダーを表示します。
.PPan - 地図上の 4 隅をクリックすると、平らな底のボウルのようなコントロールが表示されます。地図をパンします
.MapType - ユーザーが地図の種類 (道路地図と衛星写真) を切り替えることができます
.StreetView - ペグマン アイコンとして表示され、地図上の特定の点にドラッグしてストリート ビューを開くことができます
Google マップ - その他のコントロール セット
上記のデフォルトのコントロール セットに加えて、Google には以下もあります:
.Scale - 地図の縮尺を表示します
.Rotate - 小さな円形のアイコンを表示マップを回転します
.review Map - 広域の視点からマップを見下ろします
マップを作成するとき、オプションを設定して表示するコントロール セットを指定したり、呼び出してマップの設定オプションを変更したりできますsetOptions()。
Google マップ - デフォルトのコントロール セットをオフにする
デフォルトのコントロール セットをオフにできるようにしたい場合があります。
デフォルトのコントロールセットをオフにするには、マップの disableDefaultUI プロパティを true に設定します:
インスタンス
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
disableDefaultUI:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
Google マップ - すべてのウィジェット セットを開く
一部のウィジェット セットはデフォルトで地図上に表示されますが、その他のウィジェット セットは設定しないと表示されません。
表示するにはコントロールを true に設定し、非表示にするにはコントロールを false に設定します。
次のインスタンスでは、すべてのコントロールが有効になります:
インスタンス
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>インスタンスを実行»
オンラインインスタンスを表示するには、[インスタンスを実行]ボタンをクリックしてください
Googleマップ - コントロールセットを変更します
一部のマップ コントロールは構成可能です。コントロール オプション フィールドを指定して、コントロールのセットを変更します。
F たとえば、Zoom コントロールを変更するためのオプションは、zoomControlOptions で指定されます。 zoomControlOptions には次の 3 つのオプションが含まれます:
.google.maps.ZoomControlStyle.SMALL - 最小化されたズーム コントロールを表示します
.google.maps.ZoomControlStyle.LARGE - 標準のズーム スライディング コントロールを表示します
.google .maps.ZoomControlStyle.DEFAULT - デバイスとマップのサイズに基づいて最適なコントロールを選択します
インスタンス
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>インスタンスの実行»
オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
注: コントロールを変更する必要がある場合は、まずコントロールを有効にします (true に設定します)。
もう 1 つのコントロールは MapType コントロールです。
MapType コントロールは、次のスタイル オプションの 1 つとして表示できます:
google.maps.MapTypeControlStyle.HORIZONTAL_BAR。Google マップのように、水平バーに一連のコントロールをボタンとして表示するために使用されます。
google.maps.MapTypeControlStyle.DROPDOWN_MENU、ドロップダウン メニューからマップ タイプを選択できる単一のボタン コントロールを表示するために使用されます。
google.maps.MapTypeControlStyle.DEFAULT、「デフォルト」の動作を表示するために使用されます。これは画面サイズに依存し、API の将来のバージョンで変更される可能性があります。
インスタンス
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
同様に、ControlPosition プロパティを使用してコントロールの位置を指定できます:
インスタンス
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>インスタンスの実行»
[インスタンスの実行] ボタンをクリックしてオンライン インスタンスを表示します
Google マップ - カスタム コントロール セット
クリック イベント用の Return to London カスタム コントロールを作成します。 (マップがドラッグされている場合):
インスタンス
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var map;
var london = new google.maps.LatLng(51.508742,-0.120850);
// Add a Home control that returns the user to London
function HomeControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText);
// Setup click-event listener: simply set the map to London
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(london)
});
}
function initialize() {
var mapDiv = document.getElementById('googleMap');
var myOptions = {
zoom: 12,
center: london,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
// Create a DIV to hold the control and call HomeControl()
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
// homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>インスタンスを実行»
「インスタンスを実行」ボタンをクリックしてオンラインインスタンスを表示します
Google マップ - コントロール セット リファレンス マニュアル
Google Maps API リファレンス マニュアル
