V3 にバージョンアップした Google Maps JS API で旅行地図などを作成することをいろいろとトライしている。
当サイト内の
Studio YAMAKO のオーナーは、お住まいの横浜近郊はもちろんのこと、海外をも含めて様々なところを旅行され、それぞれの地点での綺麗な写真をブログにUPされている。
旅行先を一枚の地図で表示することは無理なので、海外旅行については、その都度旅行先の地図を作って表示させてもらっているが、国内旅行については、年度別に、一枚の日本地図にプロットしている。（例：
2011年旅行地図） だが、これでは地図が大まかすぎて、訪問先地点毎に、コントロールを使って、ズームインと地図の移動をする必要がある。
それで何か良いサンプルはないかと探ってみると、
Google Maps API links に、V2 で作成されたMike Williams' tutorial の
The Basics - Part 3: Loading the data from an XML file with added "Zoom To, Zoom In, Zoom Out links in infowindow を
V3 に書き換えたサンプルコードが見つかった。
2011年旅行地図では、
隠居のパソコン備忘録： Google Maps API JS V3 でXML ファイルを読み込むに記録したサンプルコードを使った。今回のコードは、そのコードに、Zoom in・out の機能を付け加えたものである。呼び込んでくる XML ファイルは、同じ形式である。サンプルコードには、XML ファイルに
zoom というタグが組み込まれていたが、なしでも機能するようである。
2012年の旅行地図では、このコードを使った。見た目は、2011年旅行地図と変わらないが、地点をクリックして出てくる吹きだし（infowindow）に、表示される
Zoom to [+] [-] をクリックすると、その地点が地図の中心となる。 さらに、[+] をクリックしていくと、Zoom が一段ずつUPする。2011年旅行地図に比べれば、少し改良された。
下は、そのコードである。
<!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: Loading the data from an XML</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://xxxxxxxxxx/JSlibrary/downloadxml.js"></script>
<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 = "";
// arrays to hold copies of the markers and html used by the side_bar
// because the function closure trick doesnt work there
var gmarkers = [];
// global "map" variable
var map = null;
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html, zoom) {
var contentString = html;
// add the zoom links
contentString += '<br><a href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom('+zoom+');">Zoom To</a>';
contentString += ' - <a href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())+1);">[+]</a>';
contentString += ' - <a href="javascript:map.setCenter(new google.maps.LatLng('+latlng.toUrlValue(6)+')); map.setZoom(parseInt(map.getZoom())-1);">[-]</a>';
var marker = new google.maps.Marker({
position: latlng,
map: map,
icon: new google.maps.MarkerImage('http://labs.google.com/ridefinder/images/mm_20_blue.png'),
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
marker.MyZoom = zoom;
// save the info we need to use later for the side_bar
gmarkers.push(marker);
// add a line to the side_bar html
side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}
// This function picks up the click and opens the corresponding info window
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
function initialize() {
// create the map
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(34.717876,137.851424),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Read the data from example.xml
downloadUrl("http://xxxxxxxx/xxxxxxxxx/xxxx/V3_yamako_2012.xml", function(doc) {
var xmlDoc = xmlParse(doc);
var markers = xmlDoc.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 html = markers[i].getAttribute("html");
var label = markers[i].getAttribute("label");
var zoom = markers[i].getAttribute("zoom");
if (!zoom) zoom = 15;
// create the marker
var marker = createMarker(point,label,html,zoom);
}
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
});
}
var infowindow = new google.maps.InfoWindow(
{
// size: new google.maps.Size(150,100),
maxWidth: 450
});
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
// from the v2 tutorial page at:
// http://econym.org.uk/gmap/basic3.htm
//]]>
</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 bgcolor="#FFFFCC" align="center" colspan="2"><font color="#000000"><strong><big>Yamako 国内旅行地図:2012年
</big></strong><br /></font></td></tr>
<tr>
<td>
<div id="map_canvas" style="width: 780px; height: 820px"></div>
</td>
<td width = 220 valign="top" bgcolor="#ffffe0" style="text-decoration: underline; color: #000000; font-size: small;" >
<div id="side_bar"></div>
</td>
</tr>
</table>
<noscript><p><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.</p>
</noscript>
</body>
</html>
をクリックすると、メニューボックスが表示される。
、ポップアップに表示する情報を「編集する」
、掲載する写真または動画をアップロードする「画像を追加する」
、今回は使っていないが、ルートを表示する
、そして掲載した写真や編集入力部分の削除する「対象物を削除」
である。
⇛⇛ 
をクリックすると表示される「マイプレイス」をクリックすると表示される画面で、さらに「マイマップ」をクリックすると枠の下の方に地図を作成という青い文字が現れる。
をクリックし、左ボックスの下に表示される交通手段が車になっていることを確認して、その下の枠に出発点から順次、マーカーを立てたい場所を入力する。すると、下のスクリーンショットのように、ルートが自動的にルートが表示される。
をクリックすると表示されるリストから、「KMLにエクスポート」を選択する。すると、下のようなボックスが表示されるので、セレクトボックスで＜XXX地点からXXX地点へのルート＞を選択し、＜KMLファイルにエクスポートします・・・＞にチェックを入れて、【ダウンロード】ボタンをクリックする。
ボタンでも調整できるが、左ボックスの上部の「プレビュー」をクリックすると下のように適切な大きさで表示してくれる。
をクリックするとカーソルが十字マークになるので、目的とする位置でクリックしてマーカーを設置する。
が出て来る。ここで<マーカーアイコンの色や形を選択できるようになっている。
