地図を操作するコントロールを追加する。
追加できるコントロールは、拡大縮小、移動、地図タイプ、縮小地図、マウスホイール操作。
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 マウスホイールでの拡大縮小