Google Maps API Ver.3:マーカーの追加と削除4

今回は前回作成した「Google Maps API Ver.3:マーカーの追加と削除3」からイベントを操作出来る様に変更しました。

マップの任意の位置を左クリックするとマーカーが表示され、マーカーの上にマウスカーソルを持っていくと経度・緯度が表示され、マーカーを右クリックすると削除される様にしました。
ボタンをクリックするたびに左クリック、右クリック、onMouseが反転制御出来ます。

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はここです。

にほんブログ村 メンタルヘルスブログ うつ病(鬱病)へ



目指せ15位以内励みになります。
どうか、両方ともポチっとしたいただければ嬉しいです。
パソコンサポート、パソコントラブルのことなら
札幌・北海道地域密着SK-Projectへ


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

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

Google Maps API Ver.3:マーカーの追加と削除3

今回は前回作成した「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はここです。

にほんブログ村 メンタルヘルスブログ うつ病(鬱病)へ



目指せ15位以内励みになります。
どうか、両方ともポチっとしたいただければ嬉しいです。
パソコンサポート、パソコントラブルのことなら
札幌・北海道地域密着SK-Projectへ


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

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

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;

    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はここです。

にほんブログ村 メンタルヘルスブログ うつ病(鬱病)へ



目指せ15位以内励みになります。
どうか、両方ともポチっとしたいただければ嬉しいです。
パソコンサポート、パソコントラブルのことなら
札幌・北海道地域密着SK-Projectへ


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

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

Google Maps API Ver.3:マーカーの追加と削除

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

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

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はここです。

4.表示はこんな感じです。
sample17

にほんブログ村 メンタルヘルスブログ うつ病(鬱病)へ



目指せ15位以内励みになります。
どうか、両方ともポチっとしたいただければ嬉しいです。

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


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

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

Google Maps API Ver.3:イベント

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

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

にほんブログ村 メンタルヘルスブログ うつ病(鬱病)へ



目指せ15位以内励みになります。
どうか、両方ともポチっとしたいただければ嬉しいです。

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


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

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