Search

Google Maps JavaScript APIバージョン2は廃止され、バージョン3に移行しました。
» Google Maps JavaScript API v3の解説はこちら!

ブラウザサイズに合わせて地図をリサイズ

2008/5/5

サンプルを見る
<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;
var obj;
function load() {
    if(GBrowserIsCompatible()){
        obj=document.getElementById("map");
        fResize();
        /* 地図インスタンス生成 */
        map=new GMap2(obj);
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
        map.addControl(new GScaleControl()); /* スケールコントロール */
        map.addControl(new GMapTypeControl()); /* 地図タイプコントロール */
        map.addControl(new GOverviewMapControl()); /* 折りたたみ可能な概観地図 */
    }
}
function fResize(){
    /* ウィンドウの幅と高さを取得 */
    var width, height;
    if(window.innerWidth){
        width=window.innerWidth;
        height=window.innerHeight;
    }else if(document.documentElement && document.documentElement.clientWidth){
        width=document.documentElement.clientWidth;
        height=document.documentElement.clientHeight;
    }else if(document.body && document.body.clientWidth){
        width=document.body.clientWidth;
        height=document.body.clientHeight;
    }
    /* 地図のサイズをウィンドウの幅と高さにリサイズ */
    obj.style.width=width+"px";
    obj.style.height=height+"px";
}
window.onload=load;
window.unload=GUnload;
window.onresize=fResize;
//]]>
</script>
<style type="text/css">
    body { margin:0; padding:0; }
</style>
<div id="map"><!-- 地図描画領域 --></div>

地図生成時に「サイズ」「地図タイプ」「カーソル」を設定

2008/5/5

GMapOptionsクラスは、地図のサイズ、カーソル、地図タイプなどの地図のオプション設定をする場合に、GMap2コンストラクタの第2引数として指定します。

GMapOptionsクラスのプロパティ
プロパティタイプ説明
sizeGSize地図の縦横サイズをピクセル単位で指定します。デフォルトは、地図描画領域(div要素など)のサイズが適用されます。
mapTypes地図タイプの配列

地図で使用する地図タイプの配列を指定します。デフォルトは、「G_DEFAULT_MAP_TYPES」が適用されます。

定数説明
G_NORMAL_MAP通常の地図タイプ
G_SATELLITE_MAPGoogle Eartd の航空写真
G_HYBRID_MAPGoogle Eartd の航空写真上の透明な通りの地図
G_DEFAULT_MAP_TYPES上記の3つすべてを定義した地図タイプの配列(デフォルト)
draggableCursorString地図がドラッグ可能な場合に表示されるカーソル。
draggingCursorString地図のドラッグ中に表示されるカーソル。
サンプルを見る
<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 opts={
            /* サイズ */
            size:new GSize(400,200),
            /* 地図タイプ */
            mapTypes:[G_HYBRID_MAP],
            /* カーソル */
            draggableCursor:"crosshair",
            draggingCursor:"move"
        };
        /* 地図インスタンス生成 */
        var map=new GMap2(document.getElementById("map"),opts);
        /* 中心地点 */
        map.setCenter(new GLatLng(35.665246,139.712319), 14);
        /* コントロール追加 */
        map.addControl(new GSmallMapControl());
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

地図インスタンス生成

2008/5/5

new GMap2(container[, opts])

地図を表示するには、GMap2クラスを使用します。
GMap2コンストラクタは、GMap2クラスのインスタンスを生成します。

第1引数containerには、地図を描画するHTMLコンテナ(div要素など)を指定します。

オプション引数opts.mapTypesには、地図タイプを指定します。 省略した場合は、デフォルトのG_DEFAULT_MAP_TYPESが適用されます。

オプション引数opts.sizeには、地図のサイズを指定します。
省略した場合は、HTMLコンテナ(地図を表示するdiv要素)に定義されているサイズが適用されます。

サンプルを見る
<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);
        /* コントロール追加 */
        map.addControl(new GLargeMapControl()); /* コントロール大 */
    }
}
window.onload=load;
window.unload=GUnload;
//]]>
</script>
<div id="map" style="width:425px;height:300px"><!-- 地図描画領域 --></div>

関連コンテンツ

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

投票する 投票結果を見る

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

pagetop

polarized women