locked
Draw a circle round a marker giving  a lat,lng(google maps) from database RRS feed

  • Question

  • User1173249824 posted

    <p>Hello gurus,</p>
    <p>Please I have the intention of creating a geofence round my longitude and latitude value gotten from my database please I need a help on achieving this</p>
    <p><em><strong>Here is my map.aspx code</strong></em></p>
    <pre class="prettyprint "> &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script async defer src=&quot;https://maps.googleapis.com/maps/api/js?key=AIzaSyAz_BQGbtcC1Oq1hgFcv3rypgrHm_lvKtI&amp;callback=initMap&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;

    var markers = [JSON.parse('&lt;%=ConvertDataTabletoString() %&gt;')][0];

    window.onload = function () {

    var mapOptions = {
    center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var infoWindow = new google.maps.InfoWindow();
    var latlngbounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById(&quot;dvMap&quot;), mapOptions);
    var i = 0;
    var interval = setInterval(function () {
    var data = markers[i]
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    var icon = &quot;&quot;;
    switch (data.description) {
    case &quot;Afr&quot;:
    icon = &quot;green&quot;;
    break;
    case &quot;Cho&quot;:
    icon = &quot;blue&quot;;
    break;
    case &quot;Cry&quot;:
    icon = &quot;purple&quot;;
    break;
    case &quot;Den&quot;:
    icon = &quot;grey&quot;;
    break;
    case &quot;Ebo&quot;:
    icon = &quot;slategray&quot;;
    break;
    case &quot;Hep&quot;:
    icon = &quot;black&quot;;
    break;


    }
    icon = &quot;http://maps.google.com/mapfiles/ms/icons/&quot; &#43; icon &#43; &quot;.png&quot;;
    var marker = new google.maps.Marker({
    ,
    map: map,
    title: data.title,
    animation: google.maps.Animation.DROP,
    icon: new google.maps.MarkerImage(icon)
    });
    (function (marker, data) {
    google.maps.event.addListener(marker, &quot;click&quot;, function (e) {
    infoWindow.setContent(&quot;&lt;b&gt;Name:&lt;/b&gt; &quot; &#43; data.Name &#43; &quot;&lt;br/&gt;&lt;b&gt;Category:&lt;/b&gt; &quot; &#43; data.Category );
    infoWindow.open(map, marker);
    });
    })(marker, data);
    latlngbounds.extend(marker.position);
    i&#43;&#43;;
    if (i == markers.length) {
    clearInterval(interval);
    var bounds = new google.maps.LatLngBounds();
    map.setCenter(latlngbounds.getCenter());
    map.fitBounds(latlngbounds);
    }
    }, 80);
    }
    &lt;/script&gt;
    &lt;section class=&quot;content&quot;&gt;
    &lt;!-- Info boxes --&gt;

    &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-md-12&quot;&gt;
    &lt;div class=&quot;box&quot;&gt;
    &lt;div class=&quot;box-header with-border&quot;&gt;
    &lt;h3 class=&quot;box-title&quot;&gt;My Location&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class=&quot;box-body&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;

    &lt;div class=&quot;col-sm-12&quot;&gt;
    &lt;div id=&quot;dvMap&quot; style=&quot;width: 100%; height: 600px&quot;&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;

    &lt;/div&gt;

    &lt;/div&gt;

    &lt;/div&gt;
    &lt;/div&gt;

    &lt;/section&gt;</pre>
    <p>here is my .cs Code</p>
    <pre class="prettyprint "> protected void Page_Load(object sender, EventArgs e)
    {

    ConvertDataTabletoString();
    }
    public string ConvertDataTabletoString()
    {
    DataTable dt = new DataTable();
    using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings[&quot;ConnectionString&quot;].ConnectionString))
    {
    using (SqlCommand cmd = new SqlCommand(&quot;select title=Disease,lat=latitude,lng=longitude,description,Category,Name from [Diseases]&quot;, con))
    {
    con.Open();
    SqlDataAdapter da = new SqlDataAdapter(cmd);
    da.Fill(dt);
    System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    List&lt;Dictionary&lt;string, object&gt;&gt; rows = new List&lt;Dictionary&lt;string, object&gt;&gt;();
    Dictionary&lt;string, object&gt; row;
    foreach (DataRow dr in dt.Rows)
    {
    row = new Dictionary&lt;string, object&gt;();
    foreach (DataColumn col in dt.Columns)
    {
    row.Add(col.ColumnName, dr[col]);
    }
    rows.Add(row);
    }
    return serializer.Serialize(rows);
    }
    }
    }</pre>
    <p>Any help will be of help&nbsp;</p>
    <p>Thanks</p>
    <p></p>
    <p></p>
    Monday, September 18, 2017 6:46 AM

Answers

  • User-1432691560 posted

    So far I was able to get it fixed p here is my complete code for those who wish to do thesame thing some other time

      var markers = [JSON.parse('<%=ConvertDataTabletoString() %>')][0];
    
        window.onload = function () {
    
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            var i = 0;
            var interval = setInterval(function () {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var icon = "";
                switch (data.description) {
                  
                    case "Pending":
                        icon = "red";
                        break;
                   
                    case "Resolved":
                        icon = "green";
                        break;
                        //  break;
    
                }
                icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
                var marker = new google.maps.Marker({
                     map: map,
                    ,
                    title: data.title,
                    animation: google.maps.Animation.DROP,
                    icon: new google.maps.MarkerImage(icon)
                });
                var circle = new google.maps.Circle({
                    map: map,
                    radius: 16093,    // 10 miles in metres
                    fillColor: '#AA0000'
                });
                circle.bindTo('center', marker, 'position');
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent("<br> Description: " + data.description);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
                latlngbounds.extend(marker.position);
                i++;
                if (i == markers.length) {
                    clearInterval(interval);
                    var bounds = new google.maps.LatLngBounds();
                    map.setCenter(latlngbounds.getCenter());
                    map.fitBounds(latlngbounds);
                }
            }, 80);
            //create a radius
    
        }
    </script>
        <section class="content">
          <!-- Info boxes -->
         
          <div class="row">
            <div class="col-md-12">
              <div class="box">
                <div class="box-header with-border">
                  <h3 class="box-title">My Location</h3>
                </div>
           <p>Address:    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></p>   
                <div class="box-body">
                  <div class="row">
                    
                    <div class="col-sm-12">
    			 <div id="dvMap" style="width: 100%; height: 600px">
                    </div>
                 </div>
                  </div>
                
                </div>
               
              </div>
             
            </div>
          </div>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 7, 2017 4:50 PM

All replies

  • User-707554951 posted

    Hi Alamdreal1,

    Check the followling sample.

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

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

    longitude and latitude value gotten from my database

    You could use Jquery ajax to get data from code behind:

    JS:

        $.ajax({
                    type: "POST",
                    url: "WebService1.asmx/GetCurrentTime",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    }
                });    
      function OnSuccess(response) {
                //   var triangleCoords = [
                //{ lat: 25.774, lng: -80.190 },
                //{ lat: 18.466, lng: -66.118 },
                //{ lat: 32.321, lng: -64.757 }
                //   ];
                var result = JSON.parse(response.d);
                var bermudaTriangle = new google.maps.Polygon({
                    paths: result,
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 3,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35
                });
                bermudaTriangle.setMap(map);
    
                // Add a listener for the click event.
                bermudaTriangle.addListener('click', showArrays);
    
                infoWindow = new google.maps.InfoWindow;
                //$.each(result, function (index, item) {
                //    alert(item.Lat + " " + item.Lon)
                //    var lat = parseFloat(item.Lat);
                //    var lon = parseFloat(item.Lon);
                //});
            }

    WebMethod:

     [System.Web.Services.WebMethod]
            public static string GetCurrentTime()
            {
                DataTable dt = new DataTable();
                dt.Columns.AddRange(new DataColumn[] { new DataColumn("Latitude", typeof(float)),
                    new DataColumn("Longitude ", typeof(float)),
                    });
                dt.Rows.Add(43.66675, -79.4042);
                dt.Rows.Add(43.67072, -79.38677);
                dt.Rows.Add(43.66656, -79.40445);
                List<LatLon> LatLons = new List<LatLon>();
    
                foreach (DataRow dr in dt.Rows)
                {
                    LatLon latlon = new LatLon { lat = dr[0].ToString(), lng = dr[1].ToString() };
                    LatLons.Add(latlon);
                }
    
                var jsonSerialiser = new System.Web.Script.Serialization.JavaScriptSerializer();
                var json = jsonSerialiser.Serialize(LatLons);
                return json;
    
            }
            public class LatLon
            {
                public string lat { get; set; }
                public string lng { get; set; }
            }

    Related link:

    https://www.aspsnippets.com/Articles/Call-Consume-Web-Service-ASMX-using-jQuery-AJAX-in-ASPNet.aspx

    Best regards

    Cathy

    Tuesday, September 19, 2017 6:48 AM
  • User1173249824 posted
    Thanks @Cathy for The response

    But how do I get this to work since I have my code that gets the exact location from the db with marker.

    Please can you just help me solve this by completing the code or giving me a better solution to my question.

    I just want to draw a circle round the location gotten from the db with a marker

    Thanks
    Friday, September 29, 2017 10:38 AM
  • User-1432691560 posted

    So far I was able to get it fixed p here is my complete code for those who wish to do thesame thing some other time

      var markers = [JSON.parse('<%=ConvertDataTabletoString() %>')][0];
    
        window.onload = function () {
    
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 15,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            var i = 0;
            var interval = setInterval(function () {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var icon = "";
                switch (data.description) {
                  
                    case "Pending":
                        icon = "red";
                        break;
                   
                    case "Resolved":
                        icon = "green";
                        break;
                        //  break;
    
                }
                icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
                var marker = new google.maps.Marker({
                     map: map,
                    ,
                    title: data.title,
                    animation: google.maps.Animation.DROP,
                    icon: new google.maps.MarkerImage(icon)
                });
                var circle = new google.maps.Circle({
                    map: map,
                    radius: 16093,    // 10 miles in metres
                    fillColor: '#AA0000'
                });
                circle.bindTo('center', marker, 'position');
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent("<br> Description: " + data.description);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
                latlngbounds.extend(marker.position);
                i++;
                if (i == markers.length) {
                    clearInterval(interval);
                    var bounds = new google.maps.LatLngBounds();
                    map.setCenter(latlngbounds.getCenter());
                    map.fitBounds(latlngbounds);
                }
            }, 80);
            //create a radius
    
        }
    </script>
        <section class="content">
          <!-- Info boxes -->
         
          <div class="row">
            <div class="col-md-12">
              <div class="box">
                <div class="box-header with-border">
                  <h3 class="box-title">My Location</h3>
                </div>
           <p>Address:    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label></p>   
                <div class="box-body">
                  <div class="row">
                    
                    <div class="col-sm-12">
    			 <div id="dvMap" style="width: 100%; height: 600px">
                    </div>
                 </div>
                  </div>
                
                </div>
               
              </div>
             
            </div>
          </div>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, October 7, 2017 4:50 PM