Search

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&amp;v=2&amp;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クラスのsavePosition()メソッドは、地図の現在位置とズームレベルを保存します。 GMap2クラスのreturnToSavedPosition()メソッドは、savePosition()メソッドで保存した情報から地図を復元します。 共に、戻り値はありません。

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;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&amp;v=2&amp;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&amp;v=2&amp;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&amp;v=2&amp;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クラスのzoomIn()メソッドは、地図にズームイン(ズームレベルを1つ上げる)します。 GMap2クラスのzoomOut()メソッドは、地図からズームアウト(ズームレベルを1つ下げる)します。 共に、戻り値はありません。

サンプルを見る
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;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&amp;v=2&amp;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>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop