Question

I am working on a ASP.Net project. I have SQL Server Database linked with it. The project has the list of hotels present in the city. A page will show the list of hotels on a gridview. Clicking on a hotel will redirect to another page which show the details of that hotel. I want to display Google map picture or Google street picture of that hotel along with the details on that hotel 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

Here’s a simple example with jQuery and the google maps javascript API:

var map = new google.maps.Map(
    $('#map')[0],
    {
        zoom: 50,
        center: new google.maps.LatLng(52.250486, 4.432766),
        mapTypeId: 'terrain',
        streetViewControl: true
    }
);

map.StreetView = new  google.maps.StreetViewPanorama(
    $('#map')[0], 
    {
        position: map.getCenter(),
        pov: { heading: 0, pitch: 0, zoom: 1 
    }
});​

Instead of the hardcoded latitude and longitude, you’d use something like this in your ASP.NET .aspx file:

...
zoom: 50,
center: new google.maps.LatLng(
    <%= string.Format(CultureInfo.InvariantCulture.NumberFormat, 
        "{0:0.0000}", YourLatitude) %>,
    <%= string.Format(CultureInfo.InvariantCulture.NumberFormat, 
        "{0:0.0000}", YourLongitude) %>),
mapTypeId: 'terrain',
...

Live demo at JSFiddle. A beach on a sunny day… yum!