GoogleMapSample6:コントロールの追加

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

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 地図タイプ切り替え(3種)
  • GHierarchicalMapTypeControl 地図タイプ切り替え(2種)
  • GSmallZoomControl 小さいズーム
  • GScaleControl スケール
  • GOverviewMapControl 右下の縮小地図
  • enableScrollWheelZoom マウスホイールでの拡大縮小

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください