スポンサーサイト
この広告は60日以上更新がないブログに表示されております。
新しい記事を書くことで広告を消すことができます。
新しい記事を書くことで広告を消すことができます。
| 2011.10.05 Wednesday | | - | - | - |
三丁目の電脳
コンピュータに関するハードウェアからソフトウェアに関係する話題や自己啓発の為の忘備録も兼ねたいと思います。
また判らない事があれば質問して下さい。
回答出来るか否かは別として一緒に悩みましょう（笑）
また判らない事があれば質問して下さい。
回答出来るか否かは別として一緒に悩みましょう（笑）
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はここです。
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はここです。
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はここです。
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はここです。
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.表示はこんな感じです。
セレクターを選択する事イベントが変わるので地図内で操作をしてください。
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.表示はこんな感じです。
ボタンを押下する事で地図のイメージが変わります。
Google Maps API Ver.3：コントローラの変更 その２
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.表示はこんな感じです。
ボタンを押下する事で地図のイメージが変わります。
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.表示はこんな感じです。
コントロールボックスを選択する事で地図のイメージが変わります。
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.表示はこんな感じです。
ボタンを押下する事で地図のイメージが変わります。
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.表示はこんな感じです。
ボタンを押下する事で地図のイメージが変わります。
| 1/21PAGES | >>
CALENDAR
ARCHIVES
- October 2010 (1)
- September 2010 (1)
- May 2010 (2)
- April 2010 (2)
- March 2010 (4)
- February 2010 (5)
- January 2010 (11)
- July 2009 (1)
- May 2009 (5)
- April 2009 (11)
- March 2009 (9)
- February 2009 (4)
- January 2009 (23)
- April 2007 (3)
- February 2006 (35)
- January 2006 (29)
- December 2005 (63)
CATEGORIES
SEARCH THIS SITE.
SELECTED ENTRIES
- Google Maps API Ver.3：マーカーの追加と削除4 (10/29)
- Google Maps API Ver.3：マーカーの追加と削除3 (09/28)
- Google Maps API Ver.3：マーカーの追加と削除2 (05/26)
- Google Maps API Ver.3：マーカーの追加と削除 (05/24)
- Google Maps API Ver.3：イベント (04/09)
- Google Maps API Ver.3：スケールコントローラ (04/01)
- Google Maps API Ver.3：コントローラの変更 その２ (03/12)
- Google Maps API Ver.3：マップ切り替えコントローラの変更 (03/05)
- Google Maps API Ver.3：コントローラの変更 (03/04)
- Google Maps API Ver.3：透明度の調整 (03/03)
RECENT COMMENT
- Google Maps API Ver.3：マーカーの追加と削除4
⇒ AtoZ (08/27) - Google Maps API Ver.3：マーカーの追加と削除4
⇒ タランチュラ (06/12) - ブラウザ、オープンソース強し
⇒ たくや (03/27) - Google Maps API Ver.3：マーカーの追加と削除3
⇒ ＸＲＲ (03/25) - 買っちゃいました（2009/03/09）
⇒ kaion (03/16) - 買っちゃいました（2009/03/09）
⇒ 白鳩 (03/15) - 0.85インチHDD採用の4GバイトのUSBストレージ
⇒ せんぱい (08/28) - 0.85インチHDD採用の4GバイトのUSBストレージ
⇒ せんぱい (05/13) - 0.85インチHDD採用の4GバイトのUSBストレージ
⇒ BlogPetのころ (03/28) - 0.85インチHDD採用の4GバイトのUSBストレージ
⇒ せんぱい (03/26)
RECENT TRACKBACK
- Google Maps API Ver.3：マップの種類の変更
⇒ Branberyheag Lab (01/28)
PROFILE
OTHERS
