Atelierで“zoom”タグの付いているブログ記事

2012年8月26日

隠居のパソコン備忘録: 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>