Question

I am working on a ASP.Net project(c#). I have SQL Server Database linked with it. The project has the list of companies present in the city. A page will show the list of companies on a datagrid . Clicking on a company will redirect to another page which show the details of that company. I want to display Google map picture or Google street picture of that company along with the details on that company details page through Longitude and latitude. Each hotel’s details will be fetched from the database to show on that page and every hotel’s longitude and latitude value is also saved in a column in the database.

How can I display Google map picture or Google street view picture with reference to that Longitude and Latitude value that have came from the database?

Answer 1

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>