Show a polygon and polyline on map with multiple lat long accurately - angularjs

Question

I have added multiple cities with two types of lat long in database.
Type 1. Area
Type 2. Road
Type 1 data use in polygon, and Type 2 data use in polylines. But the polygon and polyline are not show clearly like in image a blue area make through polygon and black line make through using polylines. please let me know how can i draw accurate area(need low opacity but properly fill color area) and a line(only single line)
My code is :
.controller('AllDistrictLayer', function ($scope, $state, $ionicLoading, $stateParams, $localStorage) {
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: true
});
var map = null;
var mapDefaults = {
zoom: 8,
center: null,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapPosition = new google.maps.LatLng(30.722727472053084, 76.6519546508789);
mapDefaults.center = mapPosition;
map = new google.maps.Map(document.getElementById("map"), mapDefaults);
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var polyline;
var marker;
var array_data = [];
var array_path = [];
var i = 0;
var j = 0;
$(function () {
setTimeout(loadajax, 10000);
});
function loadajax() {
$.ajax({
url: "http://webapi.nuavnu.ca/api/route",
type: 'GET',
data: { type: 1 },
success: function (data) {
$ionicLoading.hide();
console.log(data);
var dbMapPoints = JSON.parse(data.AllrouteofMC);
mapdata(dbMapPoints);
}
});
$.ajax({
url: "http://webapi.nuavnu.ca/api/route",
type: 'GET',
data: { type: 2 },
success: function (data) {
$ionicLoading.hide();
initialize(JSON.parse(data.AllrouteofMC));
}
});
}
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// ** For Type 1 Area**
function mapdata(dbMapPoints) {
$.each(dbMapPoints, function (key, index) {
var latlng = [];
var mycolor = getRandomColor();
$.when($.each($.grep(dbMapPoints, function (n, i) { return (n.MCId === index.MCId); }), function () {
latlng.push(new google.maps.LatLng(this.GPS_Lat, this.GPS_Long));
mapPoly = new google.maps.Polygon({
paths: latlng,
strokeColor: "#FF8800",
strokeOpacity: 0.00,
strokeWeight: 3,
fillColor: "blue",
fillOpacity: 0.2
});
mapPoly.setMap(map);
})).done(function () {
});
});
}
});
// ** For Type 2 Roads**
function initialize(Mapdata) {
$(function () {
$.each(Mapdata, function (key, index) {
var latlng = [];
$.when($.each($.grep(Mapdata, function (n, i) { return (n.MCId === index.MCId); }), function () {
latlng.push(new google.maps.LatLng(this.GPS_Lat, this.GPS_Long));
var flightPath = new google.maps.Polyline({
path: latlng,
geodesic: true,
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map);
})).done(function () {
});
})
});
}
});

Answer 1

As Harold mentioned, please share jsFiddle for your code. As far as opacity and color fill of your lines and areas is concerned, it is correctly implemented in your map. From the looks of it, you are drawing multiple intersecting polygons which are adding to layers and reducing the opacity of fillColor. You need to pass all the LatLngs in a single array and plot them together in order to get an accurate area. You can do so by also passing them as an array of unique LatLng co-ordinates as shown here.
But can't comment on the rest without the code. For a small sample, look here: