User1520731567 posted
Hi N.Alazzabi,
I was searching for the last two days for how can i save a Polygon Points Attitude and Latitude to sqlserver and display that polygon at anytime from the values saved before from google maps
The count of coordinates of a polygon is variable.
For example:
The triangle has three coordinates, the quad has four coordinates..and so on...
This requires you to do database design (how to store coordinate data in database).
And then you should also get your google maps api key,you could refer to:
https://developers.google.com/maps/documentation/javascript/get-api-key
I make a simple demo about how to display polygon by data from database,you could refer to:
Controller:
public class polygon //Note that: I created a ViewModel with fields lat and lng.
{
public int Id { get; set; }
public string lat { get; set; }
public string lng { get; set; }
}
public ActionResult GoogleMaps()
{
List<polygon> model = new List<polygon>();//Assume that the data comes from the database
model.Add(new polygon { Id = 0, lat = "25.774", lng = "-80.190" });
model.Add(new polygon { Id = 1, lat = "18.466", lng = "-66.118" });
model.Add(new polygon { Id = 2, lat = "32.321", lng = "-64.757" });
return View(model);
}
View:
@model List<TestApplication1.Controllers.Home2Controller.polygon>
@{
ViewBag.Title = "GoogleMaps";
Layout = null;
}
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Polygon</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
// This example creates a simple polygon representing the Bermuda Triangle.
function initMap() {
var myArray = [];
@foreach(var d in Model)
{
@:myArray.push({lat: @d.lat,lng: @d.lng});
}
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: { lat: 24.886, lng: -70.268 },
mapTypeId: 'terrain'
});
// Construct the polygon.
var bermudaTriangle = new google.maps.Polygon({
paths: myArray,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
More detail,you could refer to:
https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
https://stackoverflow.com/questions/45154737/filling-google-maps-polygon-from-array-of-latlng-points
Best Regards.
Yuki Tao
