隠居のパソコン備忘録： Google Maps API JS V3 での地図でマーカー地点をズームイン・アウトする
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>
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)