Google Maps JavaScript API v2Google Maps APIの使い方 － 地図の状態を変更
Google Maps JavaScript APIバージョン2は廃止され、バージョン3に移行しました。
» Google Maps JavaScript API v3の解説はこちら!
地図の中心を指定された地点に変更
2008/5/5
GMap2.panTo(center)
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
GMap2.panTo(center)
地図の現在位置とズームレベルを保存／保存した地図情報を復元
2008/5/5
GMap2.savePosition()
GMap2.returnToSavePosition()
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(center[, zoom[, type]])
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(level)
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(distance)
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.zoomIn()
GMap2.zoomOut()
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, dy)
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>