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);