Google mapsをブラウザ幅にあわせて伸縮させる方法

Google codeにあるGoogle mapsのサンプルそのままでは、地図をブラウザ幅にあわせて伸縮させた際にJavaScriptの解析エラーが出てしまう。今回はその対処方法を紹介する。

サンプルのコードは以下。

?

1 2 3 4 5

if (GBrowserIsCompatible()) {  var map = new GMap2(document.getElementById("map_canvas"));  map.setCenter(new GLatLng(37.4419, -122.1419), 13);  map.setUIToDefault(); }

ちなみにエラーの理由はsetUIToDefault()にあるようなので、それをのけて下記のように手動で設定すればよい。

?

1 2 3 4 5 6 7 8 9

if (GBrowserIsCompatible()) {  var  map = new GMap2(document.getElementById("map_canvas"));  map.enableContinuousZoom();  var ui = new GMapUIOptions();  ui.maptypes = { normal: true, physical: true, satellite: true, hybrid: true };  ui.zoom = { doubleclick: true, scrollwheel: true };  ui.controls = { largemapcontrol3d: false, smallzoomcontrol3d: true, scalecontrol : true, maptypecontrol: false, menumaptypecontrol : true };  map.setUI(ui); }

ここでは、ダブルクリックでのズームアニメーションの有効化（enableContinuousZoom()）、表示するマップ種類の設定（maptypes）、UI操作での地図ズーミングの設定（zoom）、地図上に表示するUIコントロールの設定（controls）などを行っているので参考にして欲しい。もちろん言うまでも無いことだが詳細情報はAPI Referenceを参照してほしい。