Grouping polygons

Question

i have some project using polygon, i want to make some polygon with different fill color, but also i want to make it all in one group, i mean when i drag any polygon, the other one within same group get drag together, how i make that possible?

This is my code:

var marker;
var map;
var elevator;
var listenerHandle;

function initialize()
{
var mapOpt = {
  center:new google.maps.LatLng(-8.664523972355582,115.2165412902832),
  maxZoom:30,
  zoom:14,
  panControl:false,
  zoomControl:false,
  mapTypeControl:true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        position: google.maps.ControlPosition.BOTTOM_LEFT
    },
  scaleControl:true,
  streetViewControl:false,
  overviewMapControl:false,
  rotateControl:false,    
  mapTypeId:google.maps.MapTypeId.HYBRID
  };
map=new google.maps.Map(document.getElementById("map_pan"),mapOpt);

elevator = new google.maps.ElevationService();

var infoWindow = new google.maps.InfoWindow;
downloadUrl("addons/view/xml.php", function(data) {
    var xml = data.responseXML;
    var paths = xml.documentElement.getElementsByTagName("path");
    for (var i = 0; i < paths.length; i++) {
        var sitename = paths[i].getAttribute("sitename");
        var koordinat = paths[i].getAttribute("koordinat");
        var koor = koordinat.split(";");
        var koorbts = paths[i].getAttribute("koorbts");
        var warna = paths[i].getAttribute("color");
        var latlng = [];
        var polygon ="";
        var html = sitename;
        for (var j = 0; j<koor.length; j++){
            var kordi = koor[j].split(",");
            var lat = kordi[0];
            var lng = kordi[1];
            latlng[j] =  new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
        }
        polygon = new google.maps.Polygon({
            map: map,
            paths: latlng,
            strokeColor: warna,
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: warna,
            fillOpacity: 0.8,
            draggable: true,
            geodesic: true
        });
        bindInfoWindow(polygon, koorbts, map, infoWindow, html);
    }
});

}

function bindInfoWindow(polygon, koorbts, map, infoWindow, html) {
  google.maps.event.addListener(polygon, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map);
    var kor = koorbts.split(",");
    var lat = kor[0];
    var lng = kor[1];
    latlng =  new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
    infoWindow.setPosition(latlng);
    document.getElementById('x_lat').value = lat;
    document.getElementById('y_lng').value = lng;

  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
}

function doNothing() {}

function mapclick(){
    google.maps.event.removeListener(listenerHandle);
    listenerHandle = google.maps.event.addListener(map,'click',function(event){
        if (!marker) {
        marker = new google.maps.Marker({
        position: event.latLng,
        map: map,
        draggable:true
        });

    }
    else { marker.setPosition(event.latLng); }
        updateMarkerPosition(marker.getPosition());
        google.maps.event.addListener(marker, 'drag', function() {
        updateMarkerPosition(marker.getPosition());});
      });
}

function updateMarkerPosition(latLng) {
    var floatlat = parseFloat(latLng.lat());
    var floatLng = parseFloat(latLng.lng());
    var latx = floatlat.toFixed(6);
    var lngy = floatLng.toFixed(6);
    $("#x_lat").val(latx);
    $("#y_lng").val(lngy);
}

function deleteOverlays() {
    google.maps.event.removeListener(listenerHandle);
    marker.setMap(null);
    marker="";
}



google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

So what you're needing to do is to create a complex polygon. A "simple" polygon is basically your normal multi-sided closed shape. A "complex" polygon is interpreted by Google Maps as a 'single' shape, denoted as an array of simple polygons.

I am working on something similar where I allow the user to draw out multiple areas, but belong together as a simple entity. I know this is late, but to accomplish this, when you're creating your polygons, for each one, you can make use of the Polygon.setPaths() function which you should set up each Array as a simple closed polygon, so that the Polygon shape is comprised of multiple sets of simple paths.

Then, you can store and set that Polygon so that when you drag/color one of those simple polygons, all the rest in the same shape will be affected too.

Apologies for the late and abstract answer.