GoogleMapSample6:コントロールの追加

16年前

地図を操作するコントロールを追加する。
追加できるコントロールは、拡大縮小、移動、地図タイプ、縮小地図、マウスホイール操作。

window.onload = function() {

if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map"));

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());

var point =new GPoint(-122.1419, 37.4419);
var marker = new GMarker(point);

map.centerAndZoom(point, 4);
map.addOverlay(marker);
GEvent.addListener(marker, 'click', function() {
var html = "<strong>Hello!</strong>";
marker.openInfoWindow(html);
});
}
}

<div id="map"><!--GoogleMap--></div>

Gmap2にする場合は以下のようになります。

window.onload = function() {

if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));

map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());

var point =new GLatLng(37.4419,-122.1419);
var marker = new GMarker(point);

map.setCenter(point, 4);
map.addOverlay(marker);
GEvent.addListener(marker, 'click', function() {
var html = "<strong>Hello!</strong>";
marker.openInfoWindow(html);
});
}
}

map.addControl()
コントロールを追加する。（）の中に追加したいコントロールを入れる。

GSmallMapControl　小さいコントローラ
GLargeMapControl 大きいコントローラ
GMapTypeControl　地図タイプ切り替え（３種）
GHierarchicalMapTypeControl　地図タイプ切り替え（2種）
GSmallZoomControl　小さいズーム
GScaleControl　スケール
GOverviewMapControl　右下の縮小地図
enableScrollWheelZoom　マウスホイールでの拡大縮小

シェア