【Google Maps API】サンプル【私設研究所】Neo-Tech-Lab.com

【はじめに】

■■■　2013年02月09日　記載　■■■
久しぶりにGoogle Mapsを触ったら、かなり前にVersion3.0に世代交代をしていた。
以前のバージョンが停止してしまう前に幾つかのソフトウェアを移植しなければならなくなった。
早速、APIリファレンスを《Google Maps JavaScript API v3》公式ページでチェックした。
読んだら簡単だったのだが、いざ自サイトで実行しようとすると、動作したり、しなかったりと不安定だ。
試行錯誤の結果、原因らしきものがわかったので、メモとして残こしておくことにした。

以前のバージョンではDeveloper Keyの取得が必要であったが、v3では必要ない。
おかげでローカルな環境で動作確認が行えるようになった。これはありがたい。
動作速度も格段に改善されたようだ。

以下に幾つかのサンプルを残す。

【標準的な地図表示のサンプル】

■■■　2013年02月09日　記載　■■■
【標準的な地図表示のサンプル】として、Sample1.htmを作成した。
地図のタイプ(mapTypeId)はROADMAP(道路地図), SATELLITE(衛星写真), HYBRID(道路地図＋衛星写真), TERRAIN(地形図)の４種類がある。地図の中心座標をLatLng(緯度,経度)形式で指定し、初期の倍率を指定しているだけのシンプルな地図だ。
注意すべき点は、
1) scriptタグにtypeを"text/javascript"と指定しないと動作しない場合がある。
2) 地図をはめ込むdivタグのstyleのtop, left, width, heightをピクセル単位(px)で指定しないと動作しない場合がある。

【サンプル１】

<!DOCTYPE html>
<html>
<head>
<title>【Google Maps APIで地図を表示するサンプル】</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
   var map;
   function initialize() {
      var position = new google.maps.LatLng(34.94475, 135.7638); //【地図の中心座標】緯度, 経度
      var mapOptions = { zoom: 11, center: position, mapTypeId: google.maps.MapTypeId.ROADMAP };
      map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
   }
</script>
</head>
<body onload="initialize();">
   <div id="map_canvas" style="position:absolute;top:50px;left:100px;width:600px;height:400px;"></div>
</body>
</html>

【デフォルト設定で表示されるコントロール】

デフォルト設定では、Pan(移動)、Street View(現地の風景閲覧)、Zoom(拡大・縮小)、Map Type(地図のタイプを変更)の４つのコントロールが表示される。

　　　

　　　【図１】サンプル１の実行結果

【HTML5を利用して現在地情報を取得し表示するサンプル】

■■■　2013年02月09日　記載　■■■
HTML5では閲覧者の同意が必要ではあるものの、従来のIPアドレス・データベースによる推定位置よりも精度の高い地理座標取得が可能になりました。
サンプル２の実行で、Google Map上に位置を示すことができます。

【サンプル２】

<!DOCTYPE html>
<html>
  <head>
    <title>【HTML5を利用して現在地情報を取得し表示するサンプル】</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
    <script type="text/javascript">
      var map; //【Mapオブジェクト】

      function initialize() {
        //【倍率】, ROADMAP:【道路地図】SATELLITE:【衛星写真】HYBRID:【道路地図+衛星写真】TERRAIN:【地形図】
        var mapOptions = { zoom: 8, mapTypeId: google.maps.MapTypeId.TERRAIN };
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        //【HTML5で地理座標取得を試みる】
        var Msg;
        var Pos = new google.maps.LatLng(34.94475, 135.7638); //【エラー発生時の地図の中心座標】緯度, 経度
        if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(
             function(position) { //【HTMLによるGeoLocation取得に成功した場合】
                Pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                Msg = 'HTMLで取得した地理座標'; //【指定地図の指定位置にInfoWindowを表示】
                showInfoWindow(Pos, Msg);
             },
             function() { //【HTMLによるGeoLocation取得に失敗した場合】
                Msg = 'エラー: GeoLocation取得に失敗した。';
                showInfoWindow(Pos, Msg);
             }
          );
        } else { //【ブラウザがGeoLocationに非対応の場合】
          Msg = 'エラー: ブラウザがGeoLocationに対応していません。';
          showInfoWindow(Pos, Msg);
        }
      }

      function showInfoWindow(position, content) { //【InfoWindowの表示と地図中心座標の設定】
        var options = { map: map, position: position , content: content };
        var infowindow = new google.maps.InfoWindow(options); //【InfoWindowを指定位置に表示】
        map.setCenter(options.position);                      //【地図の中心座標をセットする】
      }
    </script>
  </head>
  <body onload="initialize();">
    <div id="map_canvas" style="potion:absolute;top:50px;left:100px;width:600px;height:480px;"></div>
  </body>
</html>

　　　【図２】サンプル２の実行結果

【指定地理座標上にアイコンを表示するサンプル】

■■■　2013年02月09日　記載　■■■
サンプル３では、InfoWindowではなく、イメージ・アイコンで表示します。
アイコン本体のイメージ(18×18画素)とは別に影アイコン(22×22画素)も用意して少し立体的に見えるようにしています。
google.maps.MarkerImageの引数で、アイコンの中心が指定した座標になるようにoriginal座標を指定しています。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>【指定地理座標上にアイコンを表示するサンプル】</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript">
      function initialize() {
        var position = new google.maps.LatLng(34.5, 135.5);        //【地図の中心座標】
        var myLatLng = new google.maps.LatLng(34.94475, 135.7638); //【アイコンの地理座標】
        var icon   = new google.maps.MarkerImage('/GoogleMaps/icon/panoramio-YellowStar.png',
                     new google.maps.Size(18, 18), new google.maps.Point(0,0),new google.maps.Point(9, 9));
        var shadow = new google.maps.MarkerImage('/GoogleMaps/icon/panoramio-shadow.png',
                     new google.maps.Size(22, 22), new google.maps.Point(0,0),new google.maps.Point(9, 9));
        var mapOptions = { zoom: 8, center: position, mapTypeId: google.maps.MapTypeId.ROADMAP }
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        var Marker = new google.maps.Marker({ position: myLatLng, map: map, icon: icon, shadow: shadow });
      }
    </script>
  </head>
  <body onload="initialize()">
   <div id="map_canvas" style="position:absolute;top:100px;left:200px;width:600px;height:400px;"></div>
  </body>
</html>

　　　【図３】サンプル３の実行結果

【多数のアイコンを地図上に表示する例】

■■■　2013年02月09日　記載　■■■
サンプル４はJSON形式のリストに基づいて、多数のアイコンを地図上に表示するものです。
当サイトの『ムカデに刺されたら４３度以上のお湯で良く温め、シャンプー洗浄を...』のアクセス解析で得られた地理座標(2012年８月度, 22111個)を表示します。5000個を超えるとアイコンが表示されるまでに少しタイムラグがあります。しかし、v2までの速度に比べると10倍は高速化しているのではないかと思います。日本語のページなのですが、海外旅行中に刺された人もいるようで、幾つかのアイコンが確認できると思います。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>【多数のアイコンを地図上に表示する例】</title>
    <link href="GoogleMaps.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script type="text/javascript" src="Mukade201208_JSONdata.js"></script>
    <script type="text/javascript">
      function initialize() {
        var image  = new google.maps.MarkerImage('/GoogleMaps/icon/panoramio-YellowStar.png',
                     new google.maps.Size(18, 18), new google.maps.Point(0,0),new google.maps.Point(9, 9));
        var shadow = new google.maps.MarkerImage('/GoogleMaps/icon/panoramio-shadow.png',
                     new google.maps.Size(22, 22), new google.maps.Point(0,0),new google.maps.Point(9, 9));
        var NTL_Marker = new Array(PositionData.user.length);
        var NTL_LatLng = new google.maps.LatLng(34.5, 135.5);
        var mapOptions = { zoom: 8, center: NTL_LatLng, mapTypeId: google.maps.MapTypeId.ROADMAP };
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        for(var i=0; i<PositionData.user.length; i++) {
           NTL_LatLng = new google.maps.LatLng(PositionData.user[i].latitude, PositionData.user[i].longitude);
           NTL_Marker[i] = new google.maps.Marker({ position: NTL_LatLng, map: map, icon: image, shadow: shadow });
        }
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="Logo"       style="position:absolute;top:100px;left:290px;width:300px;height:40px; z-index:2;">
      <font face="Times New Roman" size="6"><b><i>
        <font color="red">Neo</font>-<font color="darkgreen">Tech</font>-<font color="blue">Lab</font>.<font color="violet">com</font>
      </i></b></font></div>
    <div id="Shadow"     style="position:absolute;top:102px;left:291px;width:300px;height:40px; z-index:1;">
      <font face="Times New Roman" size="6"><b><i><font color="black">Neo-Tech-Lab.com</font></i></b></font>
    </div>
    <div id="map_canvas" style="position:absolute;top:100px;left:200px;width:600px;height:400px;z-index:0;"></div>
  </body>
</html>

　　　【図４】サンプル４の実行結果

【】

■■■　2013年02月09日　記載　■■■

【Google Maps APIの使い方について】

【ブラウザはGoogle Chrome】

【お知らせ】