Google Maps API Ver.3:マーカーの追加と削除4
今回は前回作成した「Google Maps API Ver.3:マーカーの追加と削除3」からイベントを操作出来る様に変更しました。
マップの任意の位置を左クリックするとマーカーが表示され、マーカーの上にマウスカーソルを持っていくと経度・緯度が表示され、マーカーを右クリックすると削除される様にしました。
ボタンをクリックするたびに左クリック、右クリック、onMouseが反転制御出来ます。
1.まずはサンプルソース(下記)をエディタ(任意)にコピーしましょう。
2.エディターで作成したサンプルソースはutf-8エンコードで保存し
FTP(FFFTPなど)で『Google Maps API Ver.3:登録』時に入力した
『使用する Web サイトのURL』へサンプルソースをアップして下さい。
3.アップしたサンプルソースのURLをブラウザから指定したら地図が
表示されるはずです。
因みに私の実働するサンプルURLはここです。


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


プログを書く励みになります。
どうか、ポチっとしたいただければ嬉しいです。
マップの任意の位置を左クリックするとマーカーが表示され、マーカーの上にマウスカーソルを持っていくと経度・緯度が表示され、マーカーを右クリックすると削除される様にしました。
ボタンをクリックするたびに左クリック、右クリック、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位以内励みになります。
どうか、両方ともポチっとしたいただければ嬉しいです。



プログを書く励みになります。
どうか、ポチっとしたいただければ嬉しいです。
Google Maps API Ver.3:マーカーの追加と削除3
今回は前回作成した「Google Maps API Ver.3:マーカーの追加と削除2」が正常に動作しなかったので修正したものを再アップしました。
動作
マップの任意の位置を左クリックするとマーカーが表示され、マーカーの上にマウスカーソルを持っていくと経度・緯度が表示され、マーカーを右クリックすると削除される様にしました。
1.まずはサンプルソース(下記)をエディタ(任意)にコピーしましょう。
2.エディターで作成したサンプルソースはutf-8エンコードで保存し
FTP(FFFTPなど)で『Google Maps API Ver.3:登録』時に入力した
『使用する Web サイトのURL』へサンプルソースをアップして下さい。
3.アップしたサンプルソースのURLをブラウザから指定したら地図が
表示されるはずです。
因みに私の実働するサンプルURLはここです。


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


プログを書く励みになります。
どうか、ポチっとしたいただければ嬉しいです。
動作
マップの任意の位置を左クリックするとマーカーが表示され、マーカーの上にマウスカーソルを持っていくと経度・緯度が表示され、マーカーを右クリックすると削除される様にしました。
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位以内励みになります。
どうか、両方ともポチっとしたいただければ嬉しいです。



プログを書く励みになります。
どうか、ポチっとしたいただければ嬉しいです。
Google Maps API Ver.3:マーカーの追加と削除2
今回はマップの任意の位置を左クリックするとマーカーが表示され、マーカーの上にマウスカーソルを持っていくと経度・緯度が表示され、マーカーを右クリックすると削除される様にしました。
1.まずはサンプルソース(下記)をエディタ(任意)にコピーしましょう。
2.エディターで作成したサンプルソースはutf-8エンコードで保存し
FTP(FFFTPなど)で『Google Maps API Ver.3:登録』時に入力した
『使用する Web サイトのURL』へサンプルソースをアップして下さい。
3.アップしたサンプルソースのURLをブラウザから指定したら地図が
表示されるはずです。
因みに私の実働するサンプルURLはここです。


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


プログを書く励みになります。
どうか、ポチっとしたいただければ嬉しいです。
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位以内励みになります。
どうか、両方ともポチっとしたいただければ嬉しいです。



プログを書く励みになります。
どうか、ポチっとしたいただければ嬉しいです。
Google Maps API Ver.3:マーカーの追加と削除
ちょっと前回から間が空いてしまいましたが今回は画鋲みたいな
マーカーの追加(経度・緯度指定)とマーカーの削除(全部)を
やってみました。
任意に経度・緯度を入力して『マーカー追加』ボタンをクリックして下さい。
あまりに離れた経度・緯度を入力するとマップ外になるので御注意を。
小数点以下を変化させると良いかもしれないです。
1.まずはサンプルソース(下記)をエディタ(任意)にコピーしましょう。
2.エディターで作成したサンプルソースはutf-8エンコードで保存し
FTP(FFFTPなど)で『Google Maps API Ver.3:登録』時に入力した
『使用する Web サイトのURL』へサンプルソースをアップして下さい。
3.アップしたサンプルソースのURLをブラウザから指定したら地図が
表示されるはずです。
因みに私の実働するサンプルURLはここです。
4.表示はこんな感じです。



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


プログを書く励みになります。
どうか、ポチっとしたいただければ嬉しいです。
マーカーの追加(経度・緯度指定)とマーカーの削除(全部)を
やってみました。
任意に経度・緯度を入力して『マーカー追加』ボタンをクリックして下さい。
あまりに離れた経度・緯度を入力するとマップ外になるので御注意を。
小数点以下を変化させると良いかもしれないです。
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.表示はこんな感じです。



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



プログを書く励みになります。
どうか、ポチっとしたいただければ嬉しいです。
Google Maps API Ver.3:イベント
今回はイベントの削除とイベントの発生してみたいと思います。
イベントをセレクターから選ぶとイベントが登録されます。
地図内でそのイベントにあった動きをするとメッセージボックスが表示されます。
イベントによってはマウスクリックでメッセージボックスを消す事が出来ない
イベントもあるのでその時はEnterキーでメッセージボックスを消して下さい。
1.まずはサンプルソース(下記)をエディタ(任意)にコピーしましょう。
2.エディターで作成したサンプルソースはutf-8エンコードで保存し
FTP(FFFTPなど)で『Google Maps API Ver.3:登録』時に入力した
『使用する Web サイトのURL』へサンプルソースをアップして下さい。
3.アップしたサンプルソースのURLをブラウザから指定したら地図が
表示されるはずです。
因みに私の実働するサンプルURLはここです。
4.表示はこんな感じです。
セレクターを選択する事イベントが変わるので地図内で操作をしてください。



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


プログを書く励みになります。
どうか、ポチっとしたいただければ嬉しいです。
イベントをセレクターから選ぶとイベントが登録されます。
地図内でそのイベントにあった動きをするとメッセージボックスが表示されます。
イベントによってはマウスクリックでメッセージボックスを消す事が出来ない
イベントもあるのでその時は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.表示はこんな感じです。
セレクターを選択する事イベントが変わるので地図内で操作をしてください。



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



プログを書く励みになります。
どうか、ポチっとしたいただければ嬉しいです。
ポチ。GENKI:No title赤ちゃん、その後…こんばんはkaionさん、こんばんは。
まずはおめでとうございます!
赤ちゃん、早く良くなりますように…
今しばらくの辛抱ですが、退院された暁には
いっぱいいっぱい可愛がってあげて@wacky_k:こんばんは赤ちゃん、その後…こんにちは(^o^)Kaionさん、こんにちは。
赤ちゃんが早く良くなって退院できること願っています。
Kaionさんのハッピーエブリデーを応援しています。
これからもよろしくお願いいたしますありぴ:こんにちは(^o^)赤ちゃん、その後…こんにちわ!赤ちゃん、少しはよくなってきたようですね。
このまま何も大事に至らなければ、退院ですね。
早く元気になりますように。CLIMB_AGAIN:こんにちわ!赤ちゃん、その後…No title心配ですね・・・早くよくなりますように。GENKI:No title赤ちゃん、その後…こんばんは。赤ちゃんの今日の様子はいかがですか?
早く良くなって退院出来ますよう
お祈りしています。
kaion さん、残暑厳しいので
くれぐれもお身体お大事に…mikoto:こんばんは。あかちゃんピンチです!!No titleおはようございます。
生まれたての赤ちゃんの体調が気になりますね。
気になって眠れませんね。
早く元気になるように祈っています。
お大事に。
我が家では、授乳中の娘ピーちゃんこ:No titleあかちゃんピンチです!!心配です。こんばんは。
とても心配です。
大事に至らなければよいのですが。
kaionさんも気が気ではないでしょうが、落ち着いてくださいね。
私も、回復を祈っています。いりぴ~:心配です。