隠居のパソコン備忘録： Google Maps API V3 で Polyline を描く
自作地図を作成するのに便利していた Google Maps API のバージョンが、 V2 から V3 に大幅に変更され、来年５月には V2 で作成した地図が動かなくなりそうだということは、隠居のパソコン備忘録：Google Maps API V3 で旅行地図を作成するで、記録した。
Studio YAMAKO のオーナーが、この2?3年に海外旅行した時の地図には、旅程を表す Polyline を表示している。これも、V3 になると書き換えなければならない。V2 では、XML ファイルに訪れた地点の経度・緯度を書き込んでおくと Polyline を描いてくれる sample code があったが、V3 では、そのような sample code は、ヒットしなかった。
【Google Maps JavaScript API V3の使い方】というサイトに、【ポリラインの表示】というぺーじがあり、polyline を描くための訪問地点の経度・緯度を Javascript に直接記入する方法が紹介されていた。このサンプル・コードを参考に、先日記録した【Google Maps API JS V3 でXML ファイルを読み込む】の Javascript コードに追加してみると上手く動くことが分かった。老人の備忘録として、「トルコ周遊8日間の旅」の地図のコードを記録としておきたい。下のコードの青字部分が Polyline 表示のために追加した部分である。
訪問地点の経度・緯度は、V2 のときに使っていた XML ファイルの中からコピーしてきた。記述する部分は少ないので、XML ファイルにする必要性はあまりない。
<!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://n-shuhei.net/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) {
var contentString = html;
var marker = new google.maps.Marker({
position: latlng,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(contentString);
infowindow.open(map,marker);
});
// 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: 6,
center: new google.maps.LatLng(39.436193,29.86908),
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 hachi.xml
downloadUrl("V3_maps_Turkey.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");
// create the marker
var marker = createMarker(point,label,html);
}
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;
// Polyline 表示の追加 ここから
var drivePlan = [
new google.maps.LatLng(40.010787, 26.279297),
new google.maps.LatLng(39.317035, 26.703644),
new google.maps.LatLng(37.947176, 27.342567),
new google.maps.LatLng(37.914409, 29.120979),
new google.maps.LatLng(37.882441, 32.485199),
new google.maps.LatLng(38.376115, 34.002686),
new google.maps.LatLng(38.533127, 34.433899),
new google.maps.LatLng(38.627063, 34.720917),
new google.maps.LatLng(38.772019, 35.490303),
new google.maps.LatLng(41.013066, 28.975067),
new google.maps.LatLng(40.010787, 26.279297)
];
var drivePath = new google.maps.Polyline({
path: drivePlan,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
drivePath.setMap(map);
// ここまで
});
}
var infowindow = new google.maps.InfoWindow(
{
// size: new google.maps.Size(200,50)
});
//]]>
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<table border="1"> <tr>
<td bgcolor="#FFFFCC" align="center" colspan="2"><font color="#000000"><strong><big>「洞窟ホテルに泊まる！トルコハイライト周遊8日間」の旅</big></strong></font></td></tr>
<tr><td>
<div id="map_canvas" style="width: 800px; height: 600px"></div>
</td>
<td width = 200 valign="top" bgcolor="#ffffcc" >
左の地図は、Google Mapsの機能を持っています。拡大・縮小・移動ができます。下の地名をクリックすると該当位置に吹き出しが出ます。吹き出しの中のリンクをクリックすると詳細地図あるいは関連投稿に飛びます。<br /><br />
<div id="side_bar"style="text-decoration: underline; color: #000000; font-size: small;"></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>