2010年12月11日 17:07

Adobe Creative Suite 出力対応店一覧をGoogle Mapsで表示させる(21)

スポンサードリンク

アドビのCS5対応プリントショップのリストのページから、Google Mapsに表示させるやつの21回目。

前回は、Google Maps API V3を使って、Webブラウザ上に特定地点の地図を表示させることをやってみました。

今回は、地図上に、マーカーを表示させてみたいと思います。

前回から、JavaScriptでもきゅもきゅ書き始めましたが、JavaScriptの書き方の面でちょっと工夫してみたいと思います。

前回、こんなコードを書きました。

    function initialize() {
      var latlng = new google.maps.LatLng(35.000, 135.000);
      var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
    $(function(){
      initialize();
    });

この、function initialize() { ... } の部分は、initialize = function() { ... } と書き換えることができるんです。書き換えたのが次のコード。

    initialize = function () {
      var latlng = new google.maps.LatLng(35.000, 135.000);
      var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
    $(function(){
      initialize();
    });

これでも大丈夫です。更に、こう書き換えてもOKです。

    var Maps = {};
    Maps.initialize = function () {
      var latlng = new google.maps.LatLng(35.000, 135.000);
      var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
    $(function(){
      Maps.initialize();
    });

今後はなるべくこちらの書き方でやっていきたいと思います。なんでそんな書き方をするかっていうと、HTMLでは、さまざまなJavaScriptが使われますので、initializeの様な単語がかぶってしまいますので、Mapsという変数ひとつに地図表示に使うプログラムをまとめてしまい、他のJavaScriptとのバッティングを避けることができる、ということになります。

あと、もうひとつ、現在のままだと、ブラウザの表示領域全面を使わなくて、縁が出てしまいます。これは、DTP屋さんは苦手なCSSの話なのですが、いまどきのブラウザでは、body要素に、デフォルトでmarginが付いていることが多いのでそう表示されています。なので、CSSで、body要素のmarginを0pxにしてしまえばOKです。

     <style type="text/css">
       html { height: 100% }
       body { height: 100%; margin: 0px; padding: 0px }
       #map_canvas { height: 100% }
     </style>

ちょっとした準備が終わったので、今回やることとして、(35.000, 135.000)の地点に存在する日本へそ公園のあたりにマーカーを立ててみます。

前回と同じ、

http://code.google.com/intl/ja/apis/maps/documentation/javascript/examples/map-rtl.html

あたりのソースを参考に書きなおしてみます。

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    // <![CDATA[
    var Maps = {};
    Maps.initialize = function() {
      var latlng = new google.maps.LatLng(35.000, 135.000);
      var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      var marker = new google.maps.Marker({ map: map, position: latlng });
    }
    $(function(){
      Maps.initialize();
    });
    // ]]>
    </script>
  </head>
  <body>
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

mapという変数はこの関数内だけではなくて、あちこちで使いまわしますので、var self = this; self.map = ～という形にして、Mapsに保持させてしまいたいと思います（Maps.mapに保存される）。

Filename: test25.html

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
    // <![CDATA[
    var Maps = {};
    Maps.initialize = function() {
      
      var latlng = new google.maps.LatLng(35.000, 135.000);
      var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      self.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
      var marker = new google.maps.Marker({ map: self.map, position: latlng });
    }
    $(function(){
      Maps.initialize();
    });
    // ]]>
    </script>
  </head>
  <body>
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

http://labo.dtpwiki.jp/printshop/test25.html

とりあえずマーカーが表示されました。だけれども、マーカーをクリックしても何にもなりません。これじゃあ面白くないですよね……

次回は、マーカーをクリックしたら、吹き出し（InfoWindow）を表示させることをやってみます。

2010.12.11 17:07 投稿　大野義貴 [GoogleMaps] | 固定リンク |