読者です 読者をやめる 読者になる 読者になる

Drafts

@cm3 の草稿置場 / 少々Wikiっぽく使っているので中身は適宜追記修正されます。

巨大画像を Google Map API を使って表示する

テクニック自体は ハウツー:Google Map Image Cutterを使って大きな画像を公開する | OSDN Magazine のように2007年頃には話題になっていて、近世日本山岳関係データベース という 2011年に作られたデータベースはそれを使っていて 信大「近世日本山岳関係データベース」のビューワーが一覧性高い - ささくれ という2015年の記事でもまだ話題になっている*1ので、転用技術の割には息の長い技術だなと思って、プレゼン用に試してみた。

サンプル

GMap Image Cutter

GMap Image Cutter からダウンロード。

生成された HTML をいじる

Readme には API キー設定しろって書いてあるけれど、それは v2 の場合なので、v3 を使っている限り API キーは不要(参考:ASCII.jp:手軽になった!Google Maps API V3)。

minZoom を設定。Zoom = 0 は小さすぎるので 1 か 2 くらいを minZoom に設定しておいた方がイイ。

            minZoom: 2,
            maxZoom: 5,

マーカー

//Add any markers here e.g.
//      var marker = new google.maps.Marker({
//          map:map,
//          position: new google.maps.LatLng(x,y),
//          title: "My Marker"
//      });

って元からソースコードに書いてくれているので、そこに書き込めばOK。実際は値の定義を分離するように少し工夫しているので、気になる人はソースを覗いてどうぞ。

マーカーを落とす位置の latlng を取得するには、

google.maps.event.addListener(map, "rightclick", function(event) {
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();
    // populate yor box/field with lat, lng
    alert("Lat=" + lat + "; Lng=" + lng);
});

のようなスクリプトを埋め込んでおくと右クリックで得られるので便利。

参考:

表示範囲を限定する

今は手軽に、黒い余白をつけて全体を2倍くらいの大きさの画像にしたうえで、下のようなコードをつけて制限している。(-41,-63)、(41,63)あたりは調節のこと。余白とか付けずにもっときちんと対応したければ、 Using Google Maps to zoom photosのソースを参考にすればできるが、

f:id:cm3ak:20150805131516p:plain

マーカー併用している場合はこのようにはみ出すこともあるので余白アプローチがいいと思う。

      // Add a move listener to restrict the bounds range
      google.maps.event.addListener(map, "bounds_changed", function() {
        checkBounds();
      });
      
      // The allowed region which the whole map must be within
      var allowedBounds = new google.maps.LatLngBounds(new google.maps.LatLng(-41,-63), new google.maps.LatLng(41,63));
      
      // If the map position is out of range, move it back
      function checkBounds() {
        // Perform the check and return if OK
        if (allowedBounds.contains(map.getCenter())) {
          return;
        }
        // It's not OK, so find the nearest allowed point and move there
        var C = map.getCenter();
        var X = C.lng();
        var Y = C.lat();

        var AmaxX = allowedBounds.getNorthEast().lng();
        var AmaxY = allowedBounds.getNorthEast().lat();
        var AminX = allowedBounds.getSouthWest().lng();
        var AminY = allowedBounds.getSouthWest().lat();

        if (X < AminX) {X = AminX;}
        if (X > AmaxX) {X = AmaxX;}
        if (Y < AminY) {Y = AminY;}
        if (Y > AmaxY) {Y = AmaxY;}

        map.setCenter(new google.maps.LatLng(Y,X));
      }

参考:

Google Map の利用制限関係

この使い方の場合はアクセス数だけが問題になるかしら。

参考:

TODO

  • ソフトの使い方追記
  • Google Analytic 設置(まあ大丈夫だと思うけどw)

*1:単に Google Map をそう活用したというのではなく、近世日本山岳関係データベースが一覧性の面で工夫して提供していることに着目している。そして同じことをしようとすると…一晩でできるようなものではなく、かなり大変なことがわかった。