# How to create Polygon by joining outer points in Google Maps

I am trying to create multiple polygons for a restaurant based on their delivery charges out of data I have here https://jsoneditoronline.org/?id=7a7287f99c0964ffd6125b4bb48a2e50

Here is what I already have https://codepen.io/mani619cash/pen/mpaqQq?editors=1000

It creates something like this based on the input data as shown in the Textarea

What I want is something similar to below image, join the outer images to generate a polygon.

Currently I tried to sort data in each `polygon` by lat,lon but still polygons are messed up

Sort the coordinates by bearing from the center (only really works for simple polygons). From one of my answers to this question: OSM to Google Maps polygons

sort function:

``````function sortFunc(a, b) {
console.log(bearA + ":" + bearB);
return (bearA - bearB);
}
``````

code to sort the vertices:

``````var bounds = new google.maps.LatLngBounds();
for (direction in data_json[hotel]['polygon'][region]) {
var temp = new google.maps.LatLng(data_json[hotel]['polygon'][region][direction]['lat'], data_json[hotel]['polygon'][region][direction]['lon'])
triangleCoords.push(temp);
bounds.extend(temp);
}
// sort coordinates
centerPt = bounds.getCenter();
triangleCoords = triangleCoords.sort(sortFunc);

// Styling & Controls
paths: triangleCoords,
draggable: true, // turn off if it gets annoying
editable: true,
strokeColor: color_of_this,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: color_of_this,
fillOpacity: 0.35
});
``````

proof of concept fiddle

code snippet:

``````function initialize() {
var data_json = \$("#info").val();
data_json = JSON.parse(data_json);
var myLatLng = new google.maps.LatLng(data_json[0]['latitude'], data_json[0]['longitude']);
var mapOptions = {
zoom: 13,
center: myLatLng,
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
for (hotel in data_json) {
for (region in data_json[hotel]['polygon']) {
var triangleCoords = [];
var color_of_this = "#" + ((1 << 24) * Math.random() | 0).toString(16);
for (direction in data_json[hotel]['polygon'][region]) {
var temp = new google.maps.LatLng(data_json[hotel]['polygon'][region][direction]['lat'], data_json[hotel]['polygon'][region][direction]['lon'])
triangleCoords.push(temp);
bounds.extend(temp);
}
// sort coordinates
centerPt = bounds.getCenter();
triangleCoords = triangleCoords.sort(sortFunc);

// Styling & Controls
paths: triangleCoords,
draggable: true, // turn off if it gets annoying
editable: true,
strokeColor: color_of_this,
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: color_of_this,
fillOpacity: 0.35
});
myPolygon.setMap(map);
position: myLatLng,
map: map
});
}
map.fitBounds(bounds);
}
}

function sortFunc(a, b) {
return (bearA - bearB);
}
//Display Coordinates below map
function getPolygonCoords() {
var len = myPolygon.getPath().getLength();
var htmlStr = "";
for (var i = 0; i < len; i++) {
htmlStr += "new google.maps.LatLng(" + myPolygon.getPath().getAt(i).toUrlValue(5) + "), ";
}
}
``````html,
body,
#map-canvas {
height: 100%;
width: 100%;
margin: 0px;
}``````
``````<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map-canvas"></div>
<textarea id="info">[ { "latitude": "40.738057", "polygon": { "0": { "direction6": { "lat": 40.756056999999956, "delivery_estimate": 45, "lon": -74.034318, "delivery_fee": 200, "delivery_offered_to_diner_location": true }, "direction2": { "lat": 40.74755700000004, "delivery_estimate":
45, "lon": -74.02481799999995, "delivery_fee": 200, "delivery_offered_to_diner_location": true }, "direction7": { "lat": 40.74455700000003, "delivery_estimate": 45, "lon": -74.04081800000003, "delivery_fee": 200, "delivery_offered_to_diner_location":
true }, "direction3": { "lat": 40.738057, "delivery_estimate": 45, "lon": -74.02731799999997, "delivery_fee": 200, "delivery_offered_to_diner_location": true }, "direction4": { "lat": 40.738057, "delivery_estimate": 45, "lon": -74.04331800000004, "delivery_fee":
200, "delivery_offered_to_diner_location": true }, "direction5": { "lat": 40.736057, "delivery_estimate": 45, "lon": -74.034318, "delivery_fee": 200, "delivery_offered_to_diner_location": true }, "direction1": { "lat": 40.73605699999999, "delivery_estimate":
45, "lon": -74.03631800000001, "delivery_fee": 200, "delivery_offered_to_diner_location": true }, "direction8": { "lat": 40.735556999999986, "delivery_estimate": 45, "lon": -74.03181799999999, "delivery_fee": 200, "delivery_offered_to_diner_location":
true } }, "1": { "direction6": { "lat": 40.77505699999991, "delivery_estimate": 45, "lon": -74.034318, "delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction7": { "lat": 40.7590570000001, "delivery_estimate": 45, "lon": -74.0553180000001,
"delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction2": { "lat": 40.752057000000065, "delivery_estimate": 45, "lon": -74.02031799999993, "delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction3": { "lat":
40.738057, "delivery_estimate": 45, "lon": -74.02331799999995, "delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction4": { "lat": 40.738057, "delivery_estimate": 45, "lon": -74.06431800000014, "delivery_fee": 500, "delivery_offered_to_diner_location":
false }, "direction8": { "lat": 40.73155699999997, "delivery_estimate": 45, "lon": -74.02781799999997, "delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction1": { "lat": 40.71605699999989, "delivery_estimate": 45, "lon": -74.0563180000001,
"delivery_fee": 500, "delivery_offered_to_diner_location": false }, "direction5": { "lat": 40.714057000000054, "delivery_estimate": 45, "lon": -74.034318, "delivery_fee": 500, "delivery_offered_to_diner_location": false } } }, "id": "287478", "longitude":
"-74.034318", "name": "Tony Boloney's" } ]</textarea>``````