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"
//      });

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

マーカーを落とす位置の 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);
});

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

参考:

マーカーの作成 - マーカー - Google Maps API入門基本
情報ウィンドウ｜Google Maps JavaScript API v3｜Ajax｜PHP & JavaScript Room よくあるポップアップウィンドウの作り方
Googleマップで緯度・経度を求める（拡張版）マーカーの位置を求めるのに使おうと思ったが、画像を入れ替えられないから、使えないねｗ click イベントとかで表示させるしかない。
Google Maps API 3: Get Coordinates from Right-Click - Stack Overflow まさにこれで取得が楽！

表示範囲を限定する

今は手軽に、黒い余白をつけて全体を２倍くらいの大きさの画像にしたうえで、下のようなコードをつけて制限している。(-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 Maps Range Limiting v2 で作られているが綺麗に動作する
Heartache Reborn: 地図の中央に常に十字マークを表示する - Google Maps API v3 v3 では move イベントが無くなっている。代わりは drag ?
地図がドラッグされたら、地図の中心座標を取得する - Google Maps 活用講座いや、bounds_changed イベントを取った方がイイ。
scroll - Google Maps v3 ImageMapType Prevent Wrapping - Stack Overflow マーカーも含めての nowrap はここの２つめの回答のJSFiddle にある。１つめの回答は「そういうのに使うべきじゃないしそもそも」だけどｗ
Using Google Maps to zoom photos でも限定している。似たような手法を使っているけど、もっと丁寧なので余白なく制限が可能。