Google Maps API Ver.3 | 三丁目の電脳

スポンサーサイト

一定期間更新がないため広告を表示しています

| 2013.06.24 Monday | | - | - | - |
Google Maps API Ver.3:マーカーの追加と削除4
JUGEMテーマ:インターネット


今回は前回作成した「Google Maps API Ver.3:マーカーの追加と削除2」が正常に動作しなかったので修正したものを再アップしました。

動作
マップの任意の位置を左クリックするとマーカーが表示され、マーカーの上にマウスカーソルを持っていくと経度・緯度が表示され、マーカーを右クリックすると削除される様にしました。

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 EventListener;
var marker_ary = new Array();
var infowindow_obj = new Array();
var map;
var rightclick = true;
var onmouse = true;
var click = true;


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

google.maps.event.addListener(map, "click", function(clickev) {
if ( click == false) return;

var x = clickev.latLng.lat();
var y = clickev.latLng.lng();

var marker_num = marker_ary.length;
var Markerlatlng = new google.maps.LatLng(x, y);

for (i = 0; i < marker_num ; i++) {
if (!!marker_ary[i]) {
if ( (Markerlatlng.lat() == marker_ary[i].position.lat()) && (Markerlatlng.lng() == marker_ary[i].position.lng())) {
return;
}
}
}


marker_ary[marker_num] = new google.maps.Marker({
position: Markerlatlng,
map: map,
clickable: true,
draggable:true
});

google.maps.event.addListener(marker_ary[marker_num], 'mouseover', function() {
var markertext;
var LatLng;

if ( onmouse == false) return;

LatLng = marker_ary[marker_num].getPosition();

markertext = "緯度:" + LatLng.lat() + "<br>" + "経度:" + LatLng.lng();
infowindow_obj[marker_num] = new google.maps.InfoWindow({content: markertext,position:LatLng});
infowindow_obj[marker_num].open(map, marker_ary[marker_num]);
//infowindow[marker_num] = true;

google.maps.event.addListener(infowindow_obj[marker_num], 'closeclick', function() {
//infowindow[marker_num] = false;
infowindow_obj[marker_num].close(map, marker_ary[marker_num]);
delete infowindow_obj[marker_num];
});
});

google.maps.event.addListener(marker_ary[marker_num], 'rightclick', function() {
if ( rightclick == false) return;

if ( infowindow_obj[marker_num]) {
infowindow_obj[marker_num].close(map, marker_ary[marker_num]);
}
marker_ary[marker_num].setMap();
delete marker_ary[marker_num];
});

google.maps.event.addListener(marker_ary[marker_num], 'mouseout', function() {
infowindow_obj[marker_num].close();
});
});

}


function DeleteLeftClick() {
click = click ^ true;
if ( click) {
form.click.value = "左クリック禁止";
} else {
form.click.value = "左クリック許可";
}
}


function DeleteRightClick() {
rightclick = rightclick ^ true;
if ( rightclick) {
form.rightclick.value = "右クリック禁止";
} else {
form.rightclick.value = "右クリック許可";
}
}

function DeleteOnMouse() {
onmouse = onmouse ^ true;
if ( onmouse) {
form.onmouse.value = "on MOUSE 非表示";
} else {
form.onmouse.value = "on MOUSE 表示";
}
}

//]]>
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 600px"></div>
<form name="form">
<input type="button" name="click" value="左クリック禁止" onclick="DeleteLeftClick()" />
<input type="button" name="rightclick" value="右クリック禁止" onclick="DeleteRightClick()" />
<input type="button" name="onmouse" value="on MOUSE 非表示" onclick="DeleteOnMouse()" />
</form>
</body>
</html>



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

3.アップしたサンプルソースのURLをブラウザから指定したら地図が
 表示されるはずです。
 
 因みに私の実働するサンプルURLはここです。
| 2010.10.29 Friday | 12:39 | Google Maps API Ver.3 | comments(0) | trackbacks(0) |
Google Maps API Ver.3:マーカーの追加と削除3
JUGEMテーマ:インターネット


今回は前回作成した「Google Maps API Ver.3:マーカーの追加と削除2」が正常に動作しなかったので修正したものを再アップしました。

動作
マップの任意の位置を左クリックするとマーカーが表示され、マーカーの上にマウスカーソルを持っていくと経度・緯度が表示され、マーカーを右クリックすると削除される様にしました。

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 EventListener;
var marker_ary = new Array();
var infowindow_obj = new Array();


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

google.maps.event.addListener(map, "click", function(clickev) {
var x = clickev.latLng.lat();
var y = clickev.latLng.lng();

var marker_num = marker_ary.length;
var Markerlatlng = new google.maps.LatLng(x, y);

//二重表示チェック
for (i = 0; i < marker_num ; i++) {
if (!!marker_ary[i]) {
if ( (Markerlatlng.lat() == marker_ary[i].position.lat()) && (Markerlatlng.lng() == marker_ary[i].position.lng())) {
return;
}
}
}


marker_ary[marker_num] = new google.maps.Marker({
position: Markerlatlng,
map: map,
clickable: true,
draggable:true
});

google.maps.event.addListener(marker_ary[marker_num], 'mouseover', function() {
var markertext;
var LatLng;


//二重表示チェック
if ( !!infowindow_obj[marker_num]) {
return;
}

LatLng = marker_ary[marker_num].getPosition();

markertext = "緯度:" + LatLng.lat() + "<br>" + "経度:" + LatLng.lng();
infowindow_obj[marker_num] = new google.maps.InfoWindow({content: markertext,position:LatLng});
infowindow_obj[marker_num].open(map, marker_ary[marker_num]);
//infowindow[marker_num] = true;

google.maps.event.addListener(infowindow_obj[marker_num], 'closeclick', function() {
//infowindow[marker_num] = false;
infowindow_obj[marker_num].close(map, marker_ary[marker_num]);
delete infowindow_obj[marker_num];
});
});

google.maps.event.addListener(marker_ary[marker_num], 'rightclick', function() {
//表示チェック
if ( infowindow_obj[marker_num]) {
infowindow_obj[marker_num].close(map, marker_ary[marker_num]);
}
marker_ary[marker_num].setMap();
delete marker_ary[marker_num];
});

google.maps.event.addListener(marker_ary[marker_num], 'position_changed', function() {
var markertext;
var LatLng;

LatLng = marker_ary[marker_num].getPosition();
markertext = "緯度:" + LatLng.lat() + "<br>" + "経度:" + LatLng.lng();
infowindow_obj[marker_num].setContent( markertext);
});
});

}

//]]>
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 600px"></div>
</body>
</html>



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

3.アップしたサンプルソースのURLをブラウザから指定したら地図が
 表示されるはずです。
 
 因みに私の実働するサンプルURLはここです。
| 2010.09.28 Tuesday | 13:02 | Google Maps API Ver.3 | comments(0) | trackbacks(1) |
Google Maps API Ver.3:マーカーの追加と削除2
JUGEMテーマ:インターネット


今回はマップの任意の位置を左クリックするとマーカーが表示され、マーカーの上にマウスカーソルを持っていくと経度・緯度が表示され、マーカーを右クリックすると削除される様にしました。

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 EventListener;

    marker_ary = new Array();





    function initialize() {

        var latlng = new google.maps.LatLng(37, 138, true);

        myOptions = {

            zoom: 8,

            center: latlng,

            mapTypeId: google.maps.MapTypeId.ROADMAP,

            disableDoubleClickZoom: true,

        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);



        google.maps.event.addListener(map, "click", function(clickev) {

            var x = clickev.latLng.lat();

            var y = clickev.latLng.lng();



            var marker_num = marker_ary.length;

            var Markerlatlng = new google.maps.LatLng(x, y);



            var markertext = "緯度:" + x + "¥n" + "経度:" + y;

            marker_ary[marker_num] = new google.maps.Marker({

                position: Markerlatlng,

                map: map,

                clickable: true,

                title: markertext

            });



            google.maps.event.addListener(marker_ary[marker_num], 'rightclick', function() {

                marker_ary[marker_num].setMap();

            });

        });



    }



//]]>

</script>

</head>

<body onload="initialize()">

<div id="map_canvas" style="width: 800px; height: 600px"></div>

</body>

</html>




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

3.アップしたサンプルソースのURLをブラウザから指定したら地図が
 表示されるはずです。
 
 因みに私の実働するサンプルURLはここです。
| 2010.05.26 Wednesday | 11:37 | Google Maps API Ver.3 | comments(0) | trackbacks(0) |
Google Maps API Ver.3:マーカーの追加と削除
JUGEMテーマ:インターネット


ちょっと前回から間が空いてしまいましたが今回は画鋲みたいな
マーカーの追加(経度・緯度指定)とマーカーの削除(全部)を
やってみました。

任意に経度・緯度を入力して『マーカー追加』ボタンをクリックして下さい。
あまりに離れた経度・緯度を入力するとマップ外になるので御注意を。
小数点以下を変化させると良いかもしれないです。

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 EventListener;
    marker_ary = new Array();


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

        AddMarker();
    }

    //マーカー追加
    function AddMarker() {
        var Markerlatlng;

        var marker_num = marker_ary.length;
        Markerlatlng = new google.maps.LatLng(document.getElementById("Lat").value,document.getElementById("Lng").value,true)

        marker_ary[marker_num] = new google.maps.Marker({
            position: Markerlatlng,
            map: map
        });
    }

    function MarkerClear() {
        //マーカー削除
        for (i = 0; i <  marker_ary.length; i++) {
            marker_ary[i].setMap();
        }

        //配列削除
        for (i = 0; i <=  marker_ary.length; i++) {
            marker_ary.shift();
        }
    }

//]]>
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 600px"></div>
緯度:<input type="text" id="Lat" value="37"/><br />
経度:<input type="text" id="Lng" value="138"/><br />
<input type="button" value="マーカー追加" onclick="AddMarker()" />
<input type="button" value="マーカークリア" onclick="MarkerClear()" />
</body>
</html>


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

3.アップしたサンプルソースのURLをブラウザから指定したら地図が
 表示されるはずです。
 
 因みに私の実働するサンプルURLはここです。
| 2010.05.24 Monday | 11:22 | Google Maps API Ver.3 | comments(0) | trackbacks(0) |
Google Maps API Ver.3:イベント
JUGEMテーマ:インターネット


今回はイベントの削除とイベントの発生してみたいと思います。

イベントをセレクターから選ぶとイベントが登録されます。
地図内でそのイベントにあった動きをするとメッセージボックスが表示されます。
イベントによってはマウスクリックでメッセージボックスを消す事が出来ない
イベントもあるのでその時はEnterキーでメッセージボックスを消して下さい。


全イベント削除
EventListener.remove();

clickイベント登録
EventListener = google.maps.event.addListener(map, "click", function() {
alert( "clickイベント");
});



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 EventListener;


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

        EventListener = google.maps.event.addListener(map, "click", function() {
            alert( "clickイベント");
        });
    }

    function EventCtrlDisp(ctrl) {
        EventListener.remove();

        switch( ctrl.selectedIndex) {
            case 0 :
                EventListener = google.maps.event.addListener(map, "click", function() {
                    alert( "clickイベント");
                });
                break;
            case 1 :
                EventListener = google.maps.event.addListener(map, "center_changed", function() {
                    alert( "center_changedイベント");
                });
                break;
            case 2 :
                EventListener = google.maps.event.addListener(map, "mouseover", function() {
                    alert( "mouseoverイベント");
                });
                break;
            case 3 :
                EventListener = google.maps.event.addListener(map, "mouseout", function() {
                    alert( "mouseoutイベント");
                });
                break;
            case 4 :
                EventListener = google.maps.event.addListener(map, "rightclick", function() {
                    alert( "rightclickイベント");
                });
                break;
            case 5 :
                EventListener = google.maps.event.addListener(map, "dblclick", function() {
                    alert( "dblclickイベント");
                });
                break;
            case 6 :
                EventListener = google.maps.event.addListener(map, "dragstart", function() {
                    alert( "dragstartイベント");
                });
                break;
            case 7 :
                EventListener = google.maps.event.addListener(map, "dragend", function() {
                    alert( "dragendイベント");
                });
                break;
            case 8 :
                EventListener = google.maps.event.addListener(map, "idle", function() {
                    alert( "idleイベント");
                });
                break;
            case 9 :
                EventListener = google.maps.event.addListener(map, "zoom_changed", function() {
                    alert( "zoom_changedイベント");
                });
                break;
            case 10 :
                EventListener = google.maps.event.addListener(map, "maptypeid_changed", function() {
                    alert( "maptypeid_changedイベント");
                });
                break;
        }
        map.setOptions( myOptions);
    }


//]]>
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 600px"></div>
イベント:<select onchange="EventCtrlDisp(this)">
<option>click</option>
<option>center_changed</option>
<option>mouseover</option>
<option>mouseout</option>
<option>rightclick</option>
<option>dblclick</option>
<option>dragstart</option>
<option>dragend</option>
<option>idle</option>
<option>zoom_changed</option>
<option>maptypeid_changed</option>
</select>
</body>
</html>




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

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

4.表示はこんな感じです。
 セレクターを選択する事イベントが変わるので地図内で操作をしてください。

sample15

| 2010.04.09 Friday | 16:50 | Google Maps API Ver.3 | comments(0) | trackbacks(0) |
Google Maps API Ver.3:スケールコントローラ
JUGEMテーマ:インターネット


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

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


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

| 2010.04.01 Thursday | 17:24 | Google Maps API Ver.3 | comments(0) | trackbacks(0) |
Google Maps API Ver.3:コントローラの変更 その2
JUGEMテーマ:インターネット


前々回『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: 500px; height: 400px"></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
| 2010.03.12 Friday | 10:38 | Google Maps API Ver.3 | comments(0) | trackbacks(0) |
Google Maps API Ver.3:マップ切り替えコントローラの変更
JUGEMテーマ:インターネット


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


    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
| 2010.03.05 Friday | 09:47 | Google Maps API Ver.3 | comments(0) | trackbacks(0) |
Google Maps API Ver.3:コントローラの変更
JUGEMテーマ:インターネット


地図上に用事されるズームコントローラを大きなコントローラ、小さなコントローラ、
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
| 2010.03.04 Thursday | 10:02 | Google Maps API Ver.3 | comments(0) | trackbacks(0) |
Google Maps API Ver.3:透明度の調整
JUGEMテーマ:インターネット


地図の透明度を変化させてみましょう。
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;
    var Overlay;


    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
| 2010.03.03 Wednesday | 10:45 | Google Maps API Ver.3 | comments(0) | trackbacks(0) |
| 1/3PAGES | >>