google-maps - 同じページの異なる div に存在する 2 つのマップに同じポリゴンを表示する方法

Question

私はGoogleマップAPI V3を使用しています。このリンクの変数「triangleCoords」のように、polygonpoints 配列があります。

ボタンクリックを使用してマップを動的に生成しています..

すべてのマップに同じポリゴンを配置したい。

私が試みているように、ポリゴンは生成された最新のマップにのみ表示されます。

ポリゴンを画像リンクのようにしたい

Answer 1

google.maps.Polygon は 1 つの地図にのみ追加できます。複数のマップがある場合は、それぞれに 1 つ作成する必要があります。

function initialize() {
    var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
    var mapOptions = {
      zoom: 4,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var bermudaTriangle;

    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
    var map2 = new google.maps.Map(document.getElementById('map-canvas2'),
        mapOptions);
    var map3 = new google.maps.Map(document.getElementById('map-canvas3'),
        mapOptions);


    var triangleCoords = [
        new google.maps.LatLng(25.774252, -80.190262),
        new google.maps.LatLng(18.466465, -66.118292),
        new google.maps.LatLng(32.321384, -64.75737),
        new google.maps.LatLng(25.774252, -80.190262)
    ];

    // Construct the polygon
    var bermudaTriangle1 = new google.maps.Polygon({
      paths: triangleCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    var bermudaTriangle2 = new google.maps.Polygon({
      map: map2,
      paths: triangleCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });
    var bermudaTriangle3 = new google.maps.Polygon({
      map: map3,
      paths: triangleCoords,
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35
    });

    bermudaTriangle1.setMap(map);
  }

例