2010年12月 9日 21:26

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

スポンサードリンク

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

前回は、Webブラウザ上で動くGoogle Mapsの表示に必要な、ジオコーディングした結果が入っているJSONを生成するCGIスクリプトを用意しました。

今回は、いったんジオコーディングから離れて、Google Maps API V3における地図の表示、をやってみたいと思います。

さて、今回からは使う言語がJavaScriptになりますので、JavaScriptが動くブラウザが必要です。また、Google Mapsが表示できるブラウザでもある必要があります。というわけで、Firefox 3.6あたりを使っていきます。

それで、Google Maps API V3の使い方は、Googleに用意してありますので、その通りに入力していけばたいてい目的のことができます。

Google Map JavaScript API V3 チュートリアル - Google Maps JavaScript API V3 - Google Code [code.google.com]

の最初のコードをぱくって、日本の中心地点っぽい、北緯35度、東経135度を表示してみます。

Filename: test23.html

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/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);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

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

Googleのサンプルコードから、sensor=falseと、緯度経度を書き換えました。

これでもいいのですが、いまどきbody要素にonloadで実行させるのはどうかと思うとか言われそうなので、jQueryを使って書き直します。

Filename: test24.html

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <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[
    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();
    });
    // ]]>
    </script>
  </head>
  <body>
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

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

こんな風に表示されると思います。

なんか表示されました。拡大してみると……

日本へそ公園がありました。すげえな！

緯度と経度を書き換えれば、任意の場所が表示できますので、やってみてください。

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

2010.12.09 21:26 投稿　大野義貴 [GoogleMaps] | 固定リンク |