google-maps - Googleマップで単一の国が複数出現

Question

Google マップのジオコンプリートプラグインを使用して、マップを読み込みます。「United States」のマップを読み込むと、マップに複数回表示されます。おそらく地図キャンバスのサイズに関係していると思います。どうすれば解決できますか？gmap3 でも同じ問題があり、Google マップ API を直接使用しています。

Answer 1

次の 2 つの方法で、繰り返し領域を「非表示」にすることができます。

ズームの変更に合わせて div のサイズを変更することをお勧めします。欠点は、マップを中央に保つと (見栄えが良くなると思います)、マップ コントロールが移動し、固定サイズのマップのようにズームが予測できないことです。

ここにデモがあります: http://jsbin.com/eyehaz/3/edit#preview

  var map;
  var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP };
  var widths = ["256px", "512px", "1024px", "100%"];

  function initialize() {
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    google.maps.event.addListener(map, 'zoom_changed', function() {
      zoom = map.getZoom();
      if (zoom < 4) {
        document.getElementById("map_canvas").style.width = widths[zoom];
      }
      else {
        document.getElementById("map_canvas").style.width = widths[3]; 
      }
      google.maps.event.trigger(map, "resize");
    });
  }

2 番目のオプションは、非表示の div を適切な場所に配置し、ズーム レベルが低いときに表示を有効にします。欠点は、マップを中央に保つために、マップ コントロールが完全に覆われていることです。

  #leftcover { position: absolute; height: 100%; background-color: #e5e3df; left: 0px; width: 128px; z-index: 2; display: none }
  #rightcover { position: absolute; height: 100%; background-color: #e5e3df; left: 384px; width: 128px; z-index: 2; display: none }

    google.maps.event.addListener(map, 'zoom_changed', function() {
      if(map.getZoom() == 0) {
        document.getElementById("leftcover").style.display = "inline";
        document.getElementById("rightcover").style.display = "inline";
      }
      else {
        document.getElementById("leftcover").style.display = "none";
        document.getElementById("rightcover").style.display = "none";
      }
    });

Answer 2

この動作は仕様です。API バージョン 3 では、マップの水平方向の繰り返しを制限する方法がないようです。

マップのサイズが関係していることは間違いありません。サイズとズーム レベルによってマップの複数のインスタンスが許可されるため、複数のインスタンスが表示されます。各コピーはマーカーを取得します。