Google Maps JavaScript API v2Google Maps APIの使い方 - 地図の状態を変更
Google Maps JavaScript APIバージョン2は廃止され、バージョン3に移行しました。
» Google Maps JavaScript API v3の解説はこちら!
地図の中心を指定された地点に変更
2008/5/5
GMap2クラスのpanTo()メソッドは、地図の中心を指定した地点に変更します。 戻り値はありません。 指定した地点が既に地図内に表示されている場合は、滑らかに指定した地点を中心地点に移動します。

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* 中心地点 */ map.setCenter(new GLatLng(35.670284,139.702685), 14); /* コントロール追加 */ map.addControl(new GLargeMapControl()); /* マーカー追加 */ map.addOverlay(new GMarker(new GLatLng(35.658517,139.701333))); map.addOverlay(new GMarker(new GLatLng(35.6468,139.710109))); map.addOverlay(new GMarker(new GLatLng(35.630154,139.74044))); } } function fPanTo(x, y) { map.panTo(new GLatLng(x, y)); } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"></div><br> <form action="#"> <input type="button" value="渋谷駅" onclick="fPanTo(35.658517,139.701333)" /> <input type="button" value="恵比寿駅" onclick="fPanTo(35.6468,139.710109)" /> <input type="button" value="品川駅" onclick="fPanTo(35.630154,139.74044)" /> </form>
指定した地点から地点へ地図をアニメーション移動
2008/5/5
地図の現在位置とズームレベルを保存/保存した地図情報を復元
2008/5/5
GMap2.returnToSavePosition()
GMap2クラスのsavePosition()メソッドは、地図の現在位置とズームレベルを保存します。 GMap2クラスのreturnToSavedPosition()メソッドは、savePosition()メソッドで保存した情報から地図を復元します。 共に、戻り値はありません。

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* 中心地点 */ map.setCenter(new GLatLng(35.665246,139.712319), 14); /* コントロール追加 */ map.addControl(new GLargeMapControl()); } } function fSavePosition() { /* 現在の地図情報を保存 */ map.savePosition(); } function fReturnToSavedPosition(){ /* 保存した地図情報を復元 */ map.returnToSavedPosition() } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"></div><br> <form action="#"> <input type="button" value="現在の地図情報を保存" onclick="fSavePosition()" /> <input type="button" value="保存した位置に戻る" onclick="fReturnToSavedPosition()" /> </form>
地図を指定した座標を中心に表示
2008/5/5
GMap2クラスのsetCenter()メソッドは、指定した座標を中心地点として地図を表示します。 戻り値はありません。 オプション第2引数zoomにはズームレベル(倍率)、オプション第3引数typeには地図タイプを指定可能です。

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ var map=new GMap2(document.getElementById("map")); /* 中心地点 */ map.setCenter(new GLatLng(35.665246,139.712319), 14, G_HYBRID_TYPE); /* マーカー追加 */ var marker=new GMarker(map.getCenter()); map.addOverlay(marker); } } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div><br>
地図のズームレベルを指定
2008/5/5
GMap2クラスのsetZoom()プロパティは、地図を指定したズームレベル(倍率)で表示します。
戻り値はありません。
第1引数levelに指定可能な値は、0(最小)~17(最大)までの整数値です。

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* 中心地点 */ map.setCenter(new GLatLng(35.665246,139.712319), 14); } } function fSetZoom(z) { /* 地図のズームレベル(倍率)を設定 */ map.setZoom(z); } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"></div><br> <form action="#"> ズームレベル: <select id="zm" onchange="fSetZoom(this.options.selectedIndex)"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14" selected="selected">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> </select> </form>
現在位置から指定したピクセル単位の距離だけ移動
2008/5/5
GMap2クラスのpanBy()メソッドは、現在位置から指定したピクセル単位の距離だけ移動します。 戻り値はありません。

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* 中心地点 */ map.setCenter(new GLatLng(35.665246,139.712319), 14); /* コントロール追加 */ map.addControl(new GLargeMapControl()); } } function fPanBy(x, y) { map.panBy(new GSize(x, y)); } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"></div><br> <form action="#"> <input type="button" value="x=5, y=10" onclick="fPanBy(50,100)" /> <input type="button" value="x=-5, y=-10" onclick="fPanBy(-50,-100)" /> </form>
ズームイン/ズームアウト
2008/5/5
GMap2.zoomOut()
GMap2クラスのzoomIn()メソッドは、地図にズームイン(ズームレベルを1つ上げる)します。 GMap2クラスのzoomOut()メソッドは、地図からズームアウト(ズームレベルを1つ下げる)します。 共に、戻り値はありません。

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* 中心地点 */ map.setCenter(new GLatLng(35.665246,139.712319), 14); /* コントロール追加 */ map.addControl(new GLargeMapControl()); /* マーカー追加 */ var marker=new GMarker(map.getCenter()); map.addOverlay(marker); } } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"></div><br> <form action="#"> <input type="button" value="ズームイン" onclick="map.zoomIn()" /> <input type="button" value="ズームアウト" onclick="map.zoomOut()" /> </form>
指定した方向に地図の幅半分だけ現在位置から移動
2008/5/5
GMap2クラスのpanDirection()メソッドは、指定した方向に地図の幅半分だけ現在位置から移動します。 戻り値はありません。
引数dxに+1すると左に、-1すると右に移動します。
引数dyに+1すると上に、-1すると下に移動します。

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAvABrzCnRluKK0Cj97fTMThTNR7aHVSEFb0WbViWwc6F-_w9PjBSogZu_7UgOTbx25ka46X-fnGmyvw" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ var map; function load() { if(GBrowserIsCompatible()){ /* 地図インスタンス生成 */ map=new GMap2(document.getElementById("map")); /* 中心地点 */ map.setCenter(new GLatLng(35.665246,139.712319), 14); /* コントロール追加 */ map.addControl(new GLargeMapControl()); } } function fPanDirection(dx, dy) { map.panDirection(dx, dy); } window.onload=load; window.unload=GUnload; //]]> </script> <div id="map" style="width:425px;height:300px"></div><br> <form action="#"> <button type="button" onclick="fPanDirection(1,1)">左上に移動<br>(1,1)</button> <button type="button" onclick="fPanDirection(1,-1)">左下に移動<br>(1,-1)</button> <button type="button" onclick="fPanDirection(-1,1)">右上に移動<br>(-1,1)</button> <button type="button" onclick="fPanDirection(-1,-1)">右下に移動<br>(-1,-1)</button> </form>