2010年12月12日 17:53

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

スポンサードリンク

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

前回は、Google Maps API V3で、表示させた地図に、マーカーを表示させました。

今回は、表示させたマーカーに、クリックイベントを付加し、情報ウィンドウを表示させたいと思います。

とはいっても、コードは簡単で、やっぱり、

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

を参考にします。

Filename: test26.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 self = this;
      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 });
      var infowindow = new google.maps.InfoWindow();
      infowindow.setContent('<strong>日本へそ公園</strong><br>35.000, 135.000');
      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(self.map, marker);
      });
    }
    $(function(){
      Maps.initialize();
    });
    // ]]>
    </script>
  </head>
  <body>
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

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

マーカーをクリックすると、情報ウィンドウが表示されます。表示内容は、HTMLで指定できますし、CSSで装飾もできますよ。

次回は、地図上に複数個所プロットすることをやってみたいと思います。

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