I want to draw multiple polygons with lats and longs on one map page this is how i am currently doing
drawingWithcoordinates() {
var polygons = [];
var map;
var bounds = new google.maps.LatLngBounds();
map = new google.maps.Map(
document.getElementById("map"), {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
this.firestore.collection('locations').doc('3').get().subscribe(data => {
if (data.exists) {
this.variable = data;
console.log(this.variable);
console.log(this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue);
var custom = [
new google.maps.LatLng(
this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue,
this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lat.doubleValue,
this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lat.doubleValue,
this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lng.doubleValue
),
];
polygons.push(new google.maps.Polygon({
path: custom,
geodesic: false,
strokeColor: this.variable.Df.sn.proto.mapValue.fields.color.stringValue,
strokeOpacity: 1.0,
strokeWeight: 1,
map: map
}));
map.fitBounds(bounds);
}
else {
console.log('data dont exists');
}
})
this.firestore.collection('locations').doc('8').get().subscribe(data => {
if (data.exists) {
this.vareight = data;
console.log(this.vareight);
console.log(this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue);
var customeight = [
new google.maps.LatLng(
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue,
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lat.doubleValue,
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lat.doubleValue,
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[3].mapValue.fields.lat.doubleValue,
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[3].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[4].mapValue.fields.lat.doubleValue,
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[4].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[5].mapValue.fields.lat.doubleValue,
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[5].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[6].mapValue.fields.lat.doubleValue,
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[6].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[7].mapValue.fields.lat.doubleValue,
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[7].mapValue.fields.lng.doubleValue
),
];
polygons.push(new google.maps.Polygon({
path: customeight,
geodesic: false,
strokeOpacity: 1.0,
strokeWeight: 1,
map: map
}));
map.fitBounds(bounds);
}
else {
console.log('no data for 8 length');
}
google.maps.event.addDomListener(window, "load", this.drawingWithcoordinates);
});
}drawingWithcoordinates() {
var polygons = [];
var map;
var bounds = new google.maps.LatLngBounds();
map = new google.maps.Map(
document.getElementById("map"), {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
this.firestore.collection('locations').doc('3').get().subscribe(data => {
if (data.exists) {
this.variable = data;
console.log(this.variable);
console.log(this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue);
var custom = [
new google.maps.LatLng(
this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue,
this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lat.doubleValue,
this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lat.doubleValue,
this.variable.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lng.doubleValue
),
];
polygons.push(new google.maps.Polygon({
path: custom,
geodesic: false,
strokeColor: this.variable.Df.sn.proto.mapValue.fields.color.stringValue,
strokeOpacity: 1.0,
strokeWeight: 1,
map: map
}));
map.fitBounds(bounds);
}
else {
console.log('data dont exists');
}
})
this.firestore.collection('locations').doc('8').get().subscribe(data => {
if (data.exists) {
this.vareight = data;
console.log(this.vareight);
console.log(this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue);
var customeight = [
new google.maps.LatLng(
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lat.doubleValue,
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[0].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lat.doubleValue,
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[1].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lat.doubleValue,
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[2].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[3].mapValue.fields.lat.doubleValue,
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[3].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[4].mapValue.fields.lat.doubleValue,
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[4].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[5].mapValue.fields.lat.doubleValue,
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[5].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[6].mapValue.fields.lat.doubleValue,
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[6].mapValue.fields.lng.doubleValue
),
new google.maps.LatLng(
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[7].mapValue.fields.lat.doubleValue,
this.vareight.Df.sn.proto.mapValue.fields.loc.arrayValue.values[7].mapValue.fields.lng.doubleValue
),
];
polygons.push(new google.maps.Polygon({
path: customeight,
geodesic: false,
strokeOpacity: 1.0,
strokeWeight: 1,
map: map
}));
map.fitBounds(bounds);
}
else {
console.log('no data for 8 length');
}
google.maps.event.addDomListener(window, "load", this.drawingWithcoordinates);
});
}1 post - 1 participant