隠居のパソコン備忘録：Google Maps API V3 で旅行地図を作成する

　Google が提供する自分好みの地図を作成できるサービス Maps JavaScript API のバージョンUP(V2 ⇒ V3)が2009年5月に発表されている。最近になって、V2 は廃止され、V3 がリコメンドされていることを知った。プロ向けと思われる【Google Deveopers】というサイトにある【Google Maps JavaScript API V3】のページには、次のような記載がある。

注: このページに記載されている Google Maps JavaScript API バージョン 3 は、正式な JavaScript API となりました。JavaScript API バージョン 2 は、Google の廃止ポリシーにより正式に廃止されました。アップデート、拡張された新しいバージョンに、コードを移行することをおすすめします。

さらに、Deprecated（非推奨という意味か？）と記されている V2 のページには、次の記載がある。

Note: The Google Maps JavaScript API Version 2 has been officially deprecated as of May 19, 2010. The V2 API will continue to work until May 19, 2013. We encourage you to migrate your code to version 3 of the Maps JavaScript API.

なんと来年5月には、動かなくなりそうだ。私のサイトには、V2 作成した地図を数多く掲載している。慌てて、V3 の学習を始めた。V2 に比べると大幅に変更になっている。サンプルコードをパクリして、作成してきた地図を、基本的な知識が乏しい老人が、今までのコードをバージョンアップするのは至難の技に思われる。それで、今までのコードのバージョンアップは諦めて、ネットで紹介してくれているV3 版のサンプルコードを頼りに、新しく書いて見ることにした。

　ようやくたどり着いたのが、7月10日に収載した【加賀地方旅行地図】である。この地図を例として、作成方法を備忘録として記録しておきたい。

　やりたいことは、

旅行した地域をカバーする地図を表示する。
観光した地点にマーカーを立てる。
マーカーをクリックすると吹きだし（infowindow) がでる。
infowindow には、撮った写真の表示や観光地点のURL へリンクを表示できるようにする。
地図の枠外に訪問地点名を表示し、クリックすると地図上の該当マーカに、infowindow が表示するようにする。
できあがった地図は、私のブログ（Movable Type 4)で、エントリーとして機能するようにする。

　このような地図は、Google Maps API V2 では、できていたのであるが、V3 では初めての試みである。
　ささやかな JavaScript の知識か持たない私の技術では、これを一から作成することは困難である。Sample コードをネットで探し回したところ、【Using the Google Maps API v3】　というページに、要望にあったコード（Mike Williams' tutorial The Basics - Part 2: Adding a clickable sidebar translated to v3）を見つけることができた。Mike Williams' tutorial は、V2 の地図を作成するときにほとんど丸写しに近く参照させていただいたサイトである。残念ながら、このサイトでの V3 によるサンプルコードはない。このV2 でのコードをどなたかが、V3 に translate されたコードである。

　このサンプルコードをもとに、作成した旅行地図のコードは、以下のとおりである。

 
<!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: Adding a clickable sidebar</title><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<style type="text/css">
  html, body { height: 100%; } 
</style>

<script type="text/javascript"> 

//<![CDATA[

    var side_bar_html = ""; 
    var gmarkers = []; 
    var map = null;

function initialize() {
    var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(36.338359,136.446075),
    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();
   });

  var point = new google.maps.LatLng(36.056871,136.355095);
  var marker = createMarker(point,"永平寺","<a href='./travel-eiheiji.html' target='_blank'>永平寺　写真サムネイル画像</a>")

  var point = new google.maps.LatLng(36.237628,136.125712);
  var marker = createMarker(point,"東尋坊","<a href='./travel-tojinbo.html' target='_blank'>東尋坊　　写真サムネイル画像</a>")

  var point = new google.maps.LatLng(36.228506,136.175559);
  var marker = createMarker(point," そば処あおき","<a href='http://fukui-shop.net/soba/208449/' target='_blank'>URL:　そば処あおき</a>")

  var point = new google.maps.LatLng(36.243996,136.374664);
  var marker = createMarker(point," 山中温泉","<a href='./travel-yamanaka.html' target='_blank'>山中温泉　写真サムネイル画像</a><br /><a href='http://yoshinoyairokuen.jp/viewpoint/map_aki_fuyu.pdf' target='_blank'>PDF:　山中温泉案内図</a><br /><a href='http://www.daiwaresort.co.jp/kajikasou/' target='_blank'>URL:　河鹿荘ロイヤルホテル</a>")

  var point = new google.maps.LatLng(36.322871,136.294327);
  var marker = createMarker(point," 鴨池観察館","<a href='./travel-kamoike.html' target='_blank'>鴨池観察館　写真サムネイル画像</a><br /><a href='http://park15.wakwak.com/~kamoike/' target='_blank'>URL:　鴨池観察館</a>")

  var point = new google.maps.LatLng(36.56098,136.658249);
  var marker = createMarker(point," 金沢21世紀美術館","<a href='./travel-21seiki.html' target='_blank'>金沢21世紀美術館　写真サムネイル画像</a><br /><a href='http://ja.wikipedia.org/wiki/%E9%87%91%E6%B2%A221%E4%B8%96%E7%B4%80%E7%BE%8E%E8%A1%93%E9%A4%A8' target='_blank'>URL:　金沢21世紀美術館</a>")

  document.getElementById("side_bar").innerHTML = side_bar_html;
}
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });

function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

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);
        });

    gmarkers.push(marker);

   side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a>　　';
}
 
//]]>

</script> 

</head> 

<body style="margin:0px; padding:0px;" onload="initialize()"> 
     <table border="1"> 
      <tr> 
        <td> 
           <div id="map_canvas" style="width: 720px; height: 650px"></div> 
        </td>
      </tr><tr>   
        <td valign="top" style="width:720px; font-size:small; color: #4444ff;"><strong>観光場所:クリックすると該当場所に吹きだしがでます。</strong><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> 

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> 
 </body> 
</html>

　このコードについて、若干補足して記録しておきたい。

マーカーを立てる経度・緯度の数値は、「Google マップ　地図検索」で検索した地点に出てくるマーカを右クリックすると出てくるポップアップにある「この場所について」をクリックすると検索文字を入れるボックスに表示される。
infowindow の中に表示するURLや写真ページヘのリンクは、HTMLコードを書く要領で書けば良い。
side-bar はサンプルコードでは地図の右枠外であるが、HTMLコードでテーブルを作成する要領で（</tr><tr> ）行を変えれば、地図の下枠外に表示できる。

　なお、写真の表示に、ブログで使ってきた lightbox （当ブログで使っている写真表示手法）のコードを書いても、Google Maps API というJavaScript の中で、lighｔbox というJavaScript を使うことになり、うまく表示されない。もう少し勉強すればできるのかもしれないが、次善の策として、ワンクッションおいてサムネイル画像を表示することにした。なお、lightbox については、今回の学習中に、ｊQuery.js という JavaScript のライブラリーを使ったバージョンが出ていることが分かった。（従来は、prototype.js を使っていた）
ｊQuery 版lightbox については、稿を改めて記録したい。

　作成した地図を、MT4 のブログにエントリーするには、<iframe>をつかって次のようにブログの中に取り込めば良い。

<iframe src="http://n-shuhei.net/atelier/maps/travel-kaga.html" width="740" height="700" scrolling="NO" frameborder="0"></iframe>

　なお、ブログの右フレームに載せている地図は、Google Maps API V2 で作成しているが、ここでは、xml　ファイルを使っている地図が多い。V3 でのXML との連携についても学習しなければならない。おかげで、当分痴呆にはならないだろうが。

隠居のパソコン備忘録：Google Maps API V3 で旅行地図を作成する

タグ:

トラックバック

コメントする