Can Google Maps v3 API be used to split a polygon

Question

Using Google Maps v3 API is there a way to split polygons under the same name

For example I have a bunch of coordinated for the UK postcodes down to XXX X level

Say I have CR0 1 and CR0 2 I would like one polygon named CR0 but split on the map

this is what I had

var triangleCoords = [
new google.maps.LatLng(51.3552780000, -0.1162350000),
new google.maps.LatLng(51.3557810000, -0.1179340000),
new google.maps.LatLng(51.3572930000, -0.1171320000),
new google.maps.LatLng(51.3573480000, -0.1155220000),
new google.maps.LatLng(51.3573380000, -0.1154850000),
new google.maps.LatLng(51.3572730000, -0.1153750000),
new google.maps.LatLng(51.3557800000, -0.1149820000),
new google.maps.LatLng(51.3552780000, -0.1162350000)
];

and

var triangleCoords = [
new google.maps.LatLng(51.3749120000,-0.0897770000),
new google.maps.LatLng(51.3747190000, -0.0888120000), 
new google.maps.LatLng(51.3746020000, -0.0887410000), 
new google.maps.LatLng(51.3742810000, -0.0890390000), 
new google.maps.LatLng(51.3742740000, -0.0903670000), 
new google.maps.LatLng(51.3746260000, -0.0904120000), 
new google.maps.LatLng(51.3749120000, -0.0897770000) ];

I tried putting the coordinates into one path but I get a strange line between them

var triangleCoords = [ 
new google.maps.LatLng(51.3552780000, -0.1162350000), 
new google.maps.LatLng(51.3557810000, -0.1179340000), 
new google.maps.LatLng(51.3572930000, -0.1171320000), 
new google.maps.LatLng(51.3573480000, -0.1155220000), 
new google.maps.LatLng(51.3573380000, -0.1154850000), 
new google.maps.LatLng(51.3572730000, -0.1153750000), 
new google.maps.LatLng(51.3557800000, -0.1149820000), 
new google.maps.LatLng(51.3552780000, -0.1162350000), 
new google.maps.LatLng(51.3749120000, -0.0897770000), 
new google.maps.LatLng(51.3747190000, -0.0888120000), 
new google.maps.LatLng(51.3746020000, -0.0887410000), 
new google.maps.LatLng(51.3742810000, -0.0890390000), 
new google.maps.LatLng(51.3742740000, -0.0903670000), 
new google.maps.LatLng(51.3746260000, -0.0904120000), 
new google.maps.LatLng(51.3749120000, -0.0897770000) ]

  CR0_3 = new google.maps.Polygon({
      paths: triangleCoords,
      strokeColor: '#545fa4',
      strokeOpacity: 0.8,
      strokeWeight: 0.7,
      fillColor: '#545fa4',
      fillOpacity: 0.7
    });

This can be achieved in a KML by using multi geometry - but I havnt worked out how to do it with google maps api

Does this request make sense?

Answer 1

Since the two parts of CR0 are not contiguous, they need to be separate paths (a polygon has an array of paths, if you make them separate they won't be drawn with a continuous line):

 var triangleCoords1 = [
 new google.maps.LatLng(51.3552780000, -0.1162350000),
 new google.maps.LatLng(51.3557810000, -0.1179340000),
 new google.maps.LatLng(51.3572930000, -0.1171320000),
 new google.maps.LatLng(51.3573480000, -0.1155220000),
 new google.maps.LatLng(51.3573380000, -0.1154850000),
 new google.maps.LatLng(51.3572730000, -0.1153750000),
 new google.maps.LatLng(51.3557800000, -0.1149820000),
 new google.maps.LatLng(51.3552780000, -0.1162350000)
 ];


 var triangleCoords2 = [
 new google.maps.LatLng(51.3749120000,-0.0897770000),
 new google.maps.LatLng(51.3747190000, -0.0888120000), 
 new google.maps.LatLng(51.3746020000, -0.0887410000), 
 new google.maps.LatLng(51.3742810000, -0.0890390000), 
 new google.maps.LatLng(51.3742740000, -0.0903670000), 
 new google.maps.LatLng(51.3746260000, -0.0904120000), 
 new google.maps.LatLng(51.3749120000, -0.0897770000) ];

 var CR0_3 = new google.maps.Polygon({
    map: map,
    paths: [triangleCoords1, triangleCoords2], 
    strokeColor: '#545fa4',
    strokeOpacity: 0.8,
    strokeWeight: 0.7,
    fillColor: '#545fa4',
    fillOpacity: 0.7
  });

Working example