Google Maps API Ver.3:スケールコントローラ

ちょっと間が空きました(^^;

今回はスケールコントロールを表示し、表示位置を変更してみたいと思います。
表示に際して他のコントロールが邪魔になるかと思い表示抑制しました。


myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true, ← 全コントロール非表示
    scaleControl: true,
    scaleControlOptions : {
        position : google.maps.ControlPosition.BOTTOM_LEFT
},



1.まずはサンプルソース(下記)をエディタ(任意)にコピーしましょう。
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API3 Sample</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    var myOptions;

    function initialize() {
        var latlng = new google.maps.LatLng(37, 138, true);
        myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            scaleControl: true,
            scaleControlOptions : {
                position : google.maps.ControlPosition.BOTTOM_LEFT
            },
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function CtrlDisp2(ctrl) {
        switch( ctrl.selectedIndex) {
            case 0 :
                myOptions = {
                    scaleControlOptions : {
                       position : google.maps.ControlPosition.BOTTOM_LEFT
                    },
                };
                break;
            case 1 :
                myOptions = {
                    scaleControlOptions : {
                       position : google.maps.ControlPosition.LEFT
                    },
                };
                break;
            case 2 :
                myOptions = {
                    scaleControlOptions : {
                       position : google.maps.ControlPosition.TOP_LEFT
                    },
                };
                break;
            case 3 :
                myOptions = {
                    scaleControlOptions : {
                       position : google.maps.ControlPosition.TOP
                    },
                };
                break;
            case 4 :
                myOptions = {
                    scaleControlOptions : {
                        position : google.maps.ControlPosition.TOP_RIGHT
                    },
                };
                break;
            case 5 :
                myOptions = {
                    scaleControlOptions : {
                       position : google.maps.ControlPosition.RIGHT
                    },
                };
                break;
            case 6 :
                myOptions = {
                    scaleControlOptions : {
                       position : google.maps.ControlPosition.BOTTOM_RIGHT
                    },
                };
                break;
            case 7 :
                myOptions = {
                    scaleControlOptions : {
                       position : google.maps.ControlPosition.BOTTOM
                    },
                };
                break;
        }
        map.setOptions( myOptions);
    }
//]]>
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 600px"></div>
<form>
位置:<select onchange="CtrlDisp2(this)">
<option>左下</option>
<option>左</option>
<option>左上</option>
<option>上</option>
<option>右上</option>
<option>右</option>
<option>右下</option>
<option>下</option>
</select>
</form>
</body>
</html>




2.エディターで作成したサンプルソースはutf-8エンコードで保存し
 FTP(FFFTPなど)で『Google Maps API Ver.3:登録』時に入力した
『使用する Web サイトのURL』へサンプルソースをアップして下さい。

3.アップしたサンプルソースのURLをブラウザから指定したら地図が
 表示されるはずです。
 
 因みに私の実働するサンプルURLはここです。

4.表示はこんな感じです。
 ボタンを押下する事で地図のイメージが変わります。

sample14


パソコンサポート、パソコントラブルのことなら
札幌・北海道地域密着SK-Projectへ


メンタルヘルス ブログランキング へ にほんブログ村 メンタルヘルスブログ うつ病(鬱病)へ
プログを書く励みになります。
どうか、ポチっとしたいただければ嬉しいです。

テーマ : Google関連 - ジャンル : コンピュータ

Google Maps API Ver.3:コントローラの変更 その2

前々回『Google Maps API Ver.3::コントローラの変更 』でコントローラの形状を
変えましたが、あれから色々と調べると位置も変更が出来る事が判りました。

『Google Maps API Version3 日本語ドキュメント(非公式)』には掲載されていません
でしたが英語記述の『Google Maps API V3 Reference』にはプロパティとして
positionというのが存在していて設定するとコントローラの位置が変わります。

ただ不具合なのか、ルールなのか厳密な位置には設定されません。


myOptions = {
    navigationControl: true,
    navigationControlOptions : {
        style : google.maps.NavigationControlStyle.ZOOM_PAN,
        position : google.maps.ControlPosition.TOP_LEFT
};




1.まずはサンプルソース(下記)をエディタ(任意)にコピーしましょう。
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API3 Sample</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    var myOptions;

    function initialize() {
        var latlng = new google.maps.LatLng(37, 138, true);
        myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            navigationControlOptions : {
                style : google.maps.NavigationControlStyle.ZOOM_PAN,
                position : google.maps.ControlPosition.TOP_LEFT
            },
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function CtrlDisp( ctrl) {
         switch( ctrl.selectedIndex) {
            case 0 :
                myOptions = {
                    navigationControl: true,
                    navigationControlOptions : {
                        style : google.maps.NavigationControlStyle.ZOOM_PAN,
                        position : myOptions.navigationControlOptions.position
                    },
                };
                break;
            case 1 :
                myOptions = {
                    navigationControl: true,
                    navigationControlOptions : {
                        style : google.maps.NavigationControlStyle.SMALL,
                        position : myOptions.navigationControlOptions.position
                    },
                };
                break;
            case 2 :
                myOptions = {
                    navigationControl: true,
                    navigationControlOptions : {
                        style : google.maps.NavigationControlStyle.ANDROID,
                        position : myOptions.navigationControlOptions.position
                    },
                };
                break;
            case 3 :
                myOptions = {
                    navigationControl: false,
                    navigationControlOptions : {
                        style : myOptions.navigationControlOptions.style,
                        position : myOptions.navigationControlOptions.position
                    },
                };
                break;
        }
        map.setOptions( myOptions);
    }

    function CtrlDisp2(ctrl) {
        switch( ctrl.selectedIndex) {
            case 0 :
                myOptions = {
                    navigationControl: myOptions.navigationControl,
                    navigationControlOptions : {
                        style : myOptions.navigationControlOptions.style,
                        position : google.maps.ControlPosition.TOP_LEFT
                    },
                };
                break;
            case 1 :
                myOptions = {
                    navigationControl: myOptions.navigationControl,
                    navigationControlOptions : {
                       style : myOptions.navigationControlOptions.style,
                       position : google.maps.ControlPosition.TOP
                    },
                };
                break;
            case 2 :
                myOptions = {
                    navigationControl: myOptions.navigationControl,
                    navigationControlOptions : {
                       style : myOptions.navigationControlOptions.style,
                       position : google.maps.ControlPosition.TOP_RIGHT
                    },
                };
                break;
            case 3 :
                myOptions = {
                    navigationControl: myOptions.navigationControl,
                    navigationControlOptions : {
                       style : myOptions.navigationControlOptions.style,
                       position : google.maps.ControlPosition.RIGHT
                    },
                };
                break;
            case 4 :
                myOptions = {
                    navigationControl: myOptions.navigationControl,
                    navigationControlOptions : {
                       style : myOptions.navigationControlOptions.style,
                       position : google.maps.ControlPosition.BOTTOM_RIGHT
                    },
                };
                break;
            case 5 :
                myOptions = {
                    navigationControl: myOptions.navigationControl,
                    navigationControlOptions : {
                       style : myOptions.navigationControlOptions.style,
                       position : google.maps.ControlPosition.BOTTOM
                    },
                };
                break;
            case 6 :
                myOptions = {
                    navigationControl: myOptions.navigationControl,
                    navigationControlOptions : {
                       style : myOptions.navigationControlOptions.style,
                       position : google.maps.ControlPosition.BOTTOM_LEFT
                    },
                };
                break;
            case 7 :
                myOptions = {
                    navigationControl: myOptions.navigationControl,
                    navigationControlOptions : {
                       style : myOptions.navigationControlOptions.style,
                       position : google.maps.ControlPosition.LEFT
                    },
                };
                break;
        }
        map.setOptions( myOptions);
    }
//]]>
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 600px"></div>
<form>
コントロール:<select onchange="CtrlDisp(this)">
<option>大きなコントロール</option>
<option>小さなコントロール</option>
<option>ANDROIDコントロール</option>
<option>コントロールなし</option>
</select>
位置:<select onchange="CtrlDisp2(this)">
<option>左上</option>
<option>上</option>
<option>右上</option>
<option>右</option>
<option>右下</option>
<option>下</option>
<option>左下</option>
<option>左</option>
</select>
</form>
</body>
</html>



2.エディターで作成したサンプルソースはutf-8エンコードで保存し
 FTP(FFFTPなど)で『Google Maps API Ver.3:登録』時に入力した
『使用する Web サイトのURL』へサンプルソースをアップして下さい。

3.アップしたサンプルソースのURLをブラウザから指定したら地図が
 表示されるはずです。
 
 因みに私のサンプルURLはここです。

4.表示はこんな感じです。
 ボタンを押下する事で地図のイメージが変わります。

sample12-2

※地図の大きさを少し大きくしました。
パソコンサポート、パソコントラブルのことなら
札幌・北海道地域密着SK-Projectへ


メンタルヘルス ブログランキング へ にほんブログ村 メンタルヘルスブログ うつ病(鬱病)へ
プログを書く励みになります。
どうか、ポチっとしたいただければ嬉しいです。

テーマ : Google関連 - ジャンル : コンピュータ

Google Maps API Ver.3:マップ切り替えコントローラの変更

地図の種別(地図・航空写真・地図+写真・地形)を選択する形式、ボタン・
ドロップダウン・選択無しを切り替えてみました。


    function CtrlDisp(ctrl) {
        var myOptions;

        switch( ctrl.selectedIndex) {
            case 0 :
                myOptions = {
                    mapTypeControl: true,
                    mapTypeControlOptions : {
                        style : google.maps.MapTypeControlStyle .HORIZONTAL_BAR
                    },
                };
                break;
            case 1 :
                myOptions = {
                    mapTypeControl: true,
                    mapTypeControlOptions : {
                        style : google.maps.MapTypeControlStyle .DROPDOWN_MENU
                    },
                };
                break;
            case 2 :
                myOptions = {
                    mapTypeControl: false,
                };
                break;
        }
        map.setOptions( myOptions);
    }



1.まずはサンプルソース(下記)をエディタ(任意)にコピーしましょう。
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API3 Sample</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    function initialize() {
        var latlng = new google.maps.LatLng(37, 138, true);
        myOptions = {
           zoom: 8,
           center: latlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function CtrlDisp(ctrl) {
        var myOptions;

        switch( ctrl.selectedIndex) {
            case 0 :
                myOptions = {
                    mapTypeControl: true,
                    mapTypeControlOptions : {
                        style : google.maps.MapTypeControlStyle .HORIZONTAL_BAR
                    },
                };
                break;
            case 1 :
                myOptions = {
                    mapTypeControl: true,
                    mapTypeControlOptions : {
                        style : google.maps.MapTypeControlStyle .DROPDOWN_MENU
                    },
                };
                break;
            case 2 :
                myOptions = {
                    mapTypeControl: false,
                };
                break;
        }
        map.setOptions( myOptions);
    }
//]]>
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
<form>
<select onchange="CtrlDisp(this)">
<option>ボタン方式</option>
<option>ドロップダウン式</option>
<option>選択なし</option>
</select>
</form>
</body>
</html>



2.エディターで作成したサンプルソースはutf-8エンコードで保存し
 FTP(FFFTPなど)で『Google Maps API Ver.3:登録』時に入力した
『使用する Web サイトのURL』へサンプルソースをアップして下さい。

3.アップしたサンプルソースのURLをブラウザから指定したら地図が
 表示されるはずです。
 
 因みに私のサンプルURLはここです。

4.表示はこんな感じです。
 コントロールボックスを選択する事で地図のイメージが変わります。

 sample13

パソコンサポート、パソコントラブルのことなら
札幌・北海道地域密着SK-Projectへ


メンタルヘルス ブログランキング へ にほんブログ村 メンタルヘルスブログ うつ病(鬱病)へ
プログを書く励みになります。
どうか、ポチっとしたいただければ嬉しいです。

テーマ : Google関連 - ジャンル : コンピュータ

Google Maps API Ver.3:コントローラの変更

地図上に用事されるズームコントローラを大きなコントローラ、小さなコントローラ、
ANDROIDコントローラ、コントローラ無しで切り替えてみました。


    function CtrlDisp( ctrl) {
        var myOptions;

        switch( ctrl) {
            case 0 :
                myOptions = {
                    navigationControl: true,
                    navigationControlOptions : {
                        style : google.maps.NavigationControlStyle.ZOOM_PAN
                    },
                };
                break;
            case 1 :
                myOptions = {
                    navigationControl: true,
                    navigationControlOptions : {
                        style : google.maps.NavigationControlStyle.SMALL
                    },
                };
                break;
            case 2 :
                myOptions = {
                    navigationControl: true,
                    navigationControlOptions : {
                        style : google.maps.NavigationControlStyle.ANDROID
                    },
                };
                break;
            case -1 :
                myOptions = {
                    navigationControl: false,
                };
                break;
        }
        map.setOptions( myOptions);
    }



1.まずはサンプルソース(下記)をエディタ(任意)にコピーしましょう。
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API3 Sample</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

    var dragflg = true;

    function initialize() {
        var latlng = new google.maps.LatLng(37, 138, true);
        myOptions = {
           zoom: 8,
           center: latlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP,
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function CtrlDisp( ctrl) {
        var myOptions;

        switch( ctrl) {
            case 0 :
                myOptions = {
                    navigationControl: true,
                    navigationControlOptions : {
                        style : google.maps.NavigationControlStyle.ZOOM_PAN
                    },
                };
                break;
            case 1 :
                myOptions = {
                    navigationControl: true,
                    navigationControlOptions : {
                        style : google.maps.NavigationControlStyle.SMALL
                    },
                };
                break;
            case 2 :
                myOptions = {
                    navigationControl: true,
                    navigationControlOptions : {
                        style : google.maps.NavigationControlStyle.ANDROID
                    },
                };
                break;
            case -1 :
                myOptions = {
                    navigationControl: false,
                };
                break;
        }
        map.setOptions( myOptions);
    }
//]]>
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 400px"></div>
<form>
<input type="button" value="大きなコントロール" onclick="CtrlDisp(0)" />
<input type="button" value="小さなコントロール" onclick="CtrlDisp(1)" />
<input type="button" value="ANDROIDコントロール" onclick="CtrlDisp(2)" />
<input type="button" value="コントロールなし" onclick="CtrlDisp(-1)" />
</form>
</body>
</html>



2.エディターで作成したサンプルソースはutf-8エンコードで保存し
 FTP(FFFTPなど)で『Google Maps API Ver.3:登録』時に入力した
『使用する Web サイトのURL』へサンプルソースをアップして下さい。

3.アップしたサンプルソースのURLをブラウザから指定したら地図が
 表示されるはずです。
 
 因みに私のサンプルURLはここです。

4.表示はこんな感じです。
 ボタンを押下する事で地図のイメージが変わります。

sample12

パソコンサポート、パソコントラブルのことなら
札幌・北海道地域密着SK-Projectへ


メンタルヘルス ブログランキング へ にほんブログ村 メンタルヘルスブログ うつ病(鬱病)へ
プログを書く励みになります。
どうか、ポチっとしたいただければ嬉しいです。

テーマ : Google関連 - ジャンル : コンピュータ

Google Maps API Ver.3:透明度の調整

地図の透明度を変化させてみましょう。
Google Maps Ver.2では半透明のレイヤーを設定するという技術があったの
ですがGoogle Maps Ver.3になってから無くなってしまたのでCSSを利用して
透明度を調整してみました。


//IE用
document.getElementById('map_canvas').style.filter = "alpha(opacity=" + document.getElementById('scrn').value * 100 + ")";
//Firefox用
document.getElementById('map_canvas').style.MozOpacity = document.getElementById('scrn').value;
//Safati,GoogleChrome
document.getElementById('map_canvas').style.opacity = document.getElementById('scrn').value;



1.まずはサンプルソース(下記)をエディタ(任意)にコピーしましょう。
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API3 Sample</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
    var map;


    function initialize() {
        latlng = new google.maps.LatLng(37, 138);
        myOptions = {
           zoom: 8,
           center: latlng,
           mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }

    function ScrnCtrl() {
        //範囲チェック
        if ( ( document.getElementById('scrn').value < 0.0) || (document.getElementById('scrn').value > 1.0)) {
            alert( "透明度は0.0~1.0間で指定して下さい。");
            return;
        }

        //透明度を設定
        //IE用
        document.getElementById('map_canvas').style.filter = "alpha(opacity=" + document.getElementById('scrn').value * 100 + ")";
        //Firefox用
        document.getElementById('map_canvas').style.MozOpacity = document.getElementById('scrn').value;
        //Safati,GoogleChrome
        document.getElementById('map_canvas').style.opacity = document.getElementById('scrn').value;
    }

    function EnterChange(e){
        if (!e) var e = window.event;

        if(e.keyCode == 13) {
            ScrnCtrl();
            event.returnValue = false;
        }
    }

//]]>
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 400px;opacity:1.0;filter: alpha( opacity=100 );"></div>
<form>
透明度(0.0~1.0):<input type="text" id="scrn" value=1.0 onKeyPress="EnterChange(event);" />
<input type="button" value="透明度設定" onclick="ScrnCtrl()" />
</form>
</body>
</html>



2.エディターで作成したサンプルソースはutf-8エンコードで保存し
 FTP(FFFTPなど)で『Google Maps API Ver.3:登録』時に入力した
『使用する Web サイトのURL』へサンプルソースをアップして下さい。

3.アップしたサンプルソースのURLをブラウザから指定したら地図が
 表示されるはずです。
 
 因みに私のサンプルURLはここです。

4.表示はこんな感じです。
 ボタンを押下する事で地図のイメージが変わります。

sample11

パソコンサポート、パソコントラブルのことなら
札幌・北海道地域密着SK-Projectへ


メンタルヘルス ブログランキング へ にほんブログ村 メンタルヘルスブログ うつ病(鬱病)へ
プログを書く励みになります。
どうか、ポチっとしたいただければ嬉しいです。

テーマ : Google関連 - ジャンル : コンピュータ