Home/ Questions/Q 8825907
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T06:59:36+00:00

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

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0