locked
Google Maps Polygon RRS feed

  • Question

  • User-1584746113 posted

    Hi Everyone ,,,

    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 ...

    Wednesday, November 7, 2018 11:53 PM

All replies

  • User61956409 posted

    Hi N.Alazzabi,

    Welcome to ASP.NET forums.

    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

    You can try to store the LatLng coordinates for the polygon's path in your database, and then you can retrieve it from your database and construct a Polygon using a single array of LatLng coordinates.

    For more information, please check following documetations:

    https://developers.google.com/maps/documentation/javascript/shapes#polygon_add 

    https://developers.google.com/maps/documentation/javascript/examples/polygon-simple 

    With Regards,

    Fei Han

    Friday, November 9, 2018 5:36 AM
  • 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

    Friday, November 9, 2018 6:30 AM