Wednesday, 11 March 2015

Display Google map with reference to that Longitude and Latitude value that have came from the database using asp.net (c#)?

1.Your cs function to get lat and lan from DB


public string propLat = "";
public string propLan = "";


public void getLatLan(int PropertyId)
{
    DataSet dstPropMap = Tbl_PropertyMaster.GetPropertyDetailsbyId(PropertyId);
    if (dstPropMap.Tables[0].Rows.Count > 0)
    {
        propLat = dstPropMap.Tables[0].Rows[0]["Latitude"].ToString().Trim();
        propLan = dstPropMap.Tables[0].Rows[0]["Longitude"].ToString().Trim();
    }
}

2.Reference Google Link and Create a div with Id 'mapStreetView'
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>    
 <div id="mapStreetView" style="height:500px;width:340px"></div>

3.Your JS in aspx page
function initializeThisMap(lat,lan) {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(lat,lan),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById('mapStreetView'),
      mapOptions);

  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    title: 'Click to zoom in'
  });


  google.maps.event.addListener(marker, 'click', function() {
    map.setZoom(12);
    map.setCenter(marker.getPosition());
  });
}
4.Calling JS function (at the Bottom of aspx page,so it dont affect any other JS)
<script type="text/javascript">
  initializeThisMap('<%= propLat %>','<%= propLan %>');
</script> 
To insert Google Map on web page, you can use Google Maps JavaScript API. So, if you have latitude and longitude from db, you can insert these parameters into your JS code:
center = new google.maps.LatLng(-34.397, 150.644)
Well, on your ASPX page you need to add a Google Maps, plenty of articles out there but something like this:

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>

<div id="map" style="width: 356px; height: 566px;"></div>
<script type="text/javascript">

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: new google.maps.LatLng(<%=SomeLatValue %>, <%=SomeLongValue%>),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

</script>
Then you need to have class level properties name SomeLatValue and SomeLongValue that you can bind (as shown in code).

No comments:

Post a Comment

thanks......

Bhabani Facebook