従来、右フレームの【晩秋の宍道湖私的観光地図】は、
Google Maps API のV2版で作成したものを置いていた。
V2 でかいた地図はまだ動くが、2010年5月に廃止されており、V3 へ移行することが奬められている。
この地図では、必要性はあまりないが、マーカーに番号を表示させていた。新しく V3 で作りなおすときにも、学習も兼ねて番号を表示させたかった。
ところが、番号入りマーカーを表示するサンプルコードが見つからない。V2 で作成したコードを V3 に置き換えることも試みたが、悲しいかな十分な知識がないし、一から勉強する意欲もないので、うまく行きそうにない。
今までに成功した V3 のコードを眺めていると【
Google Maps API JS V3 で、カテゴリー別に色違いマーカーを表示する】 で使ったコードを、わかる範囲でいじってみれば、なんとかなるのではないかと思われた。色違いのマーカーを、番号付きマーカーに置き換えるのである。この地図では、category 別に赤・青・黄色・緑などのマーカーにしているが、これを番号つきのマーカーに置き換えるのである。また、また、一つずつのマークを、一つのカテゴリーと考えるのである。
このコードでは、マーカーを立てる地点の経度・緯度や吹きだしに表示するHTMLなどは、XML ファイルを読み込んでくることになっている。V2 で作成した地図では、HTMLの中に直接入力されていた。
とりあえずうまく表示できるようなので、自分用の備忘録として、XML ファイルおよびHTML コードを記録しておきたい。よくわかった人から見れば、へんてこなコードとなっていると思うが、古希を超えるとほとんど羞恥心はなくなっている。
使用したXML ファイル。項目 category は num01, num02・・・のようになっている。
<?xml version="1.0" encoding="utf-8" ?>
- <markers>
<marker name="１：宍道湖温泉" address=" <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4820-1.JPG" title="宍道湖の夕焼け" rel="lightbox[sinjiko]">宍道湖の夕焼け</a><br/> <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4831.JPG" title="宍道湖の朝" rel="lightbox[sinjiko]">宍道湖の朝</a>" lng="133.053875" lat="35.469199" category="num01" />
<marker name="２：米子水鳥公園" address=" <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01539.JPG" title="コハクチョウ" rel="lightbox[sinjiko]" >コハクチョウ</a><br/> <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01510.JPG" title="オナガガモ：♀を追いかける♂たち" rel="lightbox[sinjiko]" >オナガガモ</a><br/> <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01529.JPG" title="マガンの群れ：沖の州" rel="lightbox[sinjiko]" >マガンの群れ</a><br/> <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01591.JPG" title="キンクロハジロ？" rel="lightbox[sinjiko]" >キンクロハジロ</a>" lng="133.284674" lat="35.44333" category="num02" />
<marker name="３：宍道湖グリーンパーク" address=" <a href="http://n-shuhei.net/atelier/video/digisco_1.wmv" target="_blank">コハクチョウ(video)</a><br/> <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01620.JPG" title="セグロセキレイ" rel="lightbox[sinjiko]" >セグロセキレイ</a><br/> <a href="http://n-shuhei.net/atelier/photo_digisco/DSC01632.JPG" title="トビ？" rel="lightbox[sinjiko]" >トビ</a><br/> <a href="http://n-shuhei.net/atelier/photo_birds/0911211.jpg" title="ジョウビダキ？" rel="lightbox[sinjiko]" >ジョウビダキ</a><br/> <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4872.JPG" title="ゴビウスにある水槽" rel="lightbox[sinjiko]">ゴビウスにある水槽</a>" lng="132.866077" lat="35.444729" category="num03" />
<marker name="４：出雲大社" address=" <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4886.JPG" title="出雲大社にて" rel="lightbox[sinjiko]">出雲大社にて</a>" lng="132.685919" lat="35.401434" category="num04" />
<marker name="５：足立美術館" address=" <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4908.JPG" title="足立美術館の紅葉" rel="lightbox[drive]">足立美術館の紅葉</a><br/> <a href="http://n-shuhei.net/atelier/photo_drive/Stitched_003.JPG" title="枯山水の庭：３枚の合成写真" rel="lightbox[drive]">枯山水の庭</a><br/> <a href="http://n-shuhei.net/atelier/DSC_4932.JPG" title="足立美術館：絵画を観ているように" rel="lightbox[drive]">仏間から庭を望む</a>" lng="133.198242" lat="35.377854" category="num05" />
<marker name="６：米子自動車道大山PA" address=" <a href="http://n-shuhei.net/atelier/photo_drive/DSC_4720-1.JPG" title="雪化粧した大山：大山PAより" rel="lightbox[sinjiko]">大山の紅葉</a>" lng="133.419342" lat="35.386531" category="num06" />
</markers>
作成した地図作成の稚拙なHTMLコード（Google Maps API V3 のJavaScript を含む）は、右フレームに掲載している【
晩秋の宍道湖私的観光地図】のソース・コードを見ていただければ、わかると思うが、参考までに下に記載し、少しのコメントを加えたいと思う。
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps Javascript API v3 Example: Marker Categories</title>
<!-- jQuery lightbox2.51 -->
<script type="text/javascript" src="http://n-shuhei.net/atelier/Jquery2.51/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://n-shuhei.net/atelier/Jquery2.51/js/lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="http://n-shuhei.net/atelier/Jquery2.51/css/lightbox.css" media="screen" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://n-shuhei.net/atelier/maps/V3test/downloadxml.js"></script>
<title>Google Maps</title>
<style type="text/css">
html, body { height: 100%; }
</style>
<script type="text/javascript">
//<![CDATA[
// this variable will collect the html which will eventually be placed in the side_bar
var side_bar_html = "";
var gmarkers = [];
var gicons = [];
var map = null;
var infowindow = new google.maps.InfoWindow(
{
size: new google.maps.Size(150,50)
});
gicons["01"] = new google.maps.MarkerImage("http://n-shuhei.net/Googlemaps/Markers/marker_01.png",
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 9,34.
new google.maps.Point(9, 34));
// Marker sizes are expressed as a Size of X,Y
// where the origin of the image (0,0) is located
// in the top left of the image.
// Origins, anchor positions and coordinates of the marker
// increase in the X direction to the right and in
// the Y direction down.
var iconImage = new google.maps.MarkerImage('http://n-shuhei.net/Googlemaps/Markers/marker_01.png',
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 9,34.
new google.maps.Point(9, 34));
var iconShadow = new google.maps.MarkerImage('http://n-shuhei.net/atelier/maps/V3test/msmarker.shadow.png',
// The shadow image is larger in the horizontal dimension
// while the position and offset are the same as for the main image.
new google.maps.Size(37, 34),
new google.maps.Point(0,0),
new google.maps.Point(9, 34));
function getMarkerImage(iconNum) {
if ((typeof(iconNum)=="undefined") || (iconNum==null)) {
iconNum = "01";
}
if (!gicons[iconNum]) {
gicons[iconNum] = new google.maps.MarkerImage("http://n-shuhei.net/Googlemaps/Markers/marker_"+ iconNum +".png",
// This marker is 20 pixels wide by 34 pixels tall.
new google.maps.Size(20, 34),
// The origin for this image is 0,0.
new google.maps.Point(0,0),
// The anchor for this image is at 6,20.
new google.maps.Point(9, 34));
}
return gicons[iconNum];
}
function category2num(category) {
var num = "01";
switch(category) {
case "num01": num = "01";
break;
case "num02": num = "02";
break;
case "num03": num = "03";
break;
case "num04": num = "04";
break;
case "num05": num = "05";
break;
case "num06": num = "06";
break;
default: num = "01";
break;
}
return num;
}
gicons["num01"] = getMarkerImage(category2num("num01"));
gicons["num02"] = getMarkerImage(category2num("num02"));
gicons["num03"] = getMarkerImage(category2num("num03"));
gicons["num04"] = getMarkerImage(category2num("num04"));
gicons["num05"] = getMarkerImage(category2num("num05"));
gicons["num06"] = getMarkerImage(category2num("num06"));
// A function to create the marker and set up the event window
function createMarker(latlng,name,html,category) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
icon: gicons[category],
shadow: iconShadow,
map: map,
title: name,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
// === Store the category and name info as a marker properties ===
marker.mycategory = category;
marker.myname = name;
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
}
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(category+"box").checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById(category+"box").checked = false;
// == close the info window, in case its open on a marker that we just hid
infowindow.close();
}
// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
// == rebuild the side bar
makeSidebar();
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i],"click");
}
// == rebuilds the sidebar to match the markers currently displayed ==
function makeSidebar() {
var html = "";
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].getVisible()) {
html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<＼/a>' + ' ' ;
}
}
document.getElementById("side_bar").innerHTML = html;
}
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(35.430603,133.012136), //松江
mapTypeId: google.maps.MapTypeId.HYBRID
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data
downloadUrl("http://n-shuhei.net/atelier/maps/V3_sinnjiko_num.xml", function(doc) {
var xml = xmlParse(doc);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var address = markers[i].getAttribute("address");
var name = markers[i].getAttribute("name");
var html = "<b>"+name+"<＼/b><p>"+address;
var category = markers[i].getAttribute("category");
// create the marker
var marker = createMarker(point,name,html,category);
}
// == create the initial sidebar ==
makeSidebar();
});
}
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<!-- you can use tables or divs for the overall layout -->
<table border=1 >
<tr><td align="center"style="width:1000px; background-color: #ffffe0;" ><br /><h2>晩秋の宍道湖私的観光地図</h2></td></tr>
<tr><td>
<div id="map" style="width: 1000px; height: 500px"></div>
</td></tr><tr>
<td valign="top" style="width:1000px; background-color: #ffffe0; font-size: small;">
上の地図は、Google Mapsの機能を持っています。拡大・縮小・移動ができます。下の該当番号をクリックすると該当番号マーカーに吹きだしが出てきます。その吹き出しにある青文字をクリックすると写真（一部 動画）がでてきます。</td></tr><tr>
<td valign="top" style="width:1000px; background-color: #ffffe0; font-size: small;">
<div id="side_bar"></div>
</td>
</tr>
</table>
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>
<br /><br />
<!-- Google AdSense -->
<script type="text/javascript"><!--
google_ad_client = "pub-8556873278052332";
/* AdSense foot ad */
google_ad_slot = "1589991765";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</body>
</html>
- 番号付きマーカーは、ｄLINKｂRING というサイトからダウンロードできる
- 表示する地図を、ラベル付き航空写真とするには、mapTypeId: google.maps.MapTypeId.HYBRID とすればよい。通常は、HYBRID の部分が、ROADMAP となっている。
- マーカーをクリックしてでる吹きだしの中に表示される写真リンクをクリックして出てくる写真を、同一画面の中央に表示するJavaScript ソフト lightbox は機能する。 jQuerylightbox2.51 を使った。
（大抵の場合、インジケータに隠れている）を右くりっくする。表示されるポップアップ画面の＜ファイルの受信＞をクリックして、スマホ側で送信先機器（この場合、PC:1CBM4W1)をタップすると送信が始まる。
?
?
をタップすると「持ち出し番組」として表示される。当然のことながら、ムーブした番組の再生のほうが早く始まる。この画面の右上アイコン
をタップするとブルーレイレコーダー に残っている録画すべてが表示される。
?
?
?
?
当然ではあるが、このアプリでも、録画をブルーレイレコーダーからスマホにダウンロードできる。
をタップすると転送するか？と聞いてくるので、OKをタップすればよい。（転送したファイルは、スマホの内部ストレージにあるようだが、どのフォルダーにあるかの解説はない。）
?
?
最近のスマホ画面は、すこし大きくなり繊細になってきているので、ベッドに寝転んで個人で視聴するようなときには、十分である。
? 
? 
をクリックすると出てくるボックス下の「WebとWindowsを検索」の枠に、「netplwiz」と入力し、検索結果上部に出てきた「netplwiz」を選択する。
を右クリックすると出てくるポップアップから「コントロールパネル」を選択する。（このポップアップ画面には、今まで実行した操作の履歴も出てくるようだ。例えば、ここでは「プログラムと機能」「電源オプション」）
順位が上がっているのは、どうやら撤退している broadcaster が増えているせいらしい。
今までは、Spain, Germany, UK, Italy などからのアクセスはほぼゼロであった。
から、自作の 
に変更しただけである。
をつけている。クリックしてみてください。さえずりが聞こえてくるはずだ。ただし、MP3 ファイルを再生できる環境が必要です。
をクリック⇒ブックマーク⇒ブックマークバーを表示 で画面に表示される。ここに、表示されているものが、Google Chrome ブックマークと思われる。
というアプリ、 Google Bookmarks との同期には GBookmark
というアプリをインストールした。どちらも基本的に無料でであるが、ChromeMarks にはCM がはいらない￥169 の有料版がある。私は、有料版を購入した。購入するときに、spモードメール契約時のPWが求められれる。ただ、Google Bookmarks は、使い方がもうひとつよく分からないので、 ChromeMarks の使い方についてのみ記録しておきたい。
e-Tax の作業は、
事前準備を確認すると、次に【利用者識別番号】とパスワードが確認される。記録しておいた番号とパスワードを入力し、【情報検索】をクリックすると昨年申告書作成時に入力した住所・氏名・電話番号・生年月日などが表示される。国税庁のデーターベースに格納されているのだろう。
が表示される。ここで集めた写真は、GPS ユニットを使っていなかったときの写真も含まれるので、マーカーが表示されていない写真もある。
をクリックするとおなじみの Google Map の地図が出てくるので、Google Map の機能を使って拡大・縮小や移動を行い、写真を撮った地点が特定できる区域地図を表示させる。
ページ右下の「次へ」ボタンをクリックすると音の波形画面が現れる。右上のズームイン・アイコン
をクリックすると波形の横幅が広がる。
がはいる場合がある。トラック・セパレータの位置が間違っている場合は、削除したい部分を反転させて、左上にある「トラック・セパレータの削除」ボタン
クリックすればよい。
注：キャプチャーした時点が異なるので、上の表示とコピペしたものの内容は異なる。
