C# Tutorials and offshore development in India
    Tutorials   Resources   Forum   Reviews   Communities   Interview   Jobs   Projects   Training   Your Ad Here    
Silverlight Games | Mentor | Code Converter | Articles | Code Factory | Computer Jokes | Members | Peer Appraisal | IT Companies | Bookmarks | Polls | Revenue Sharing | Lobby | Gift Shop |


Prizes & Awards
My Profile



Active Members
TodayLast 7 Days more...






Resources » Articles » ASP.NET/Web Applications »

Google map with street view


Posted Date: 27 Jun 2009    Resource Type: Articles    Category: ASP.NET/Web Applications
Author: Anil ChalasaniMember Level: Gold    
Rating: 1 out of 5Points: 10



This will help you in displaying the Google map using Google enabled street view. By this you can have a street view of the location. Please feel free to change to your likely location.

To display a street view we need to write

Java script

as this

First we include this java script source from Google

< script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=true_or_false" type="text/javascript" > < /script >


Initializing of Global variables

var marker = null;
var myPano = null;


Initialization of the map with specified latitude and langitude


function initialize()
{
if (GBrowserIsCompatible())
{
//declaring the variable to get the street view into our div(stview)
myPano = new GStreetviewPanorama(document.getElementById("stview"));

//declaring the variable to get the map into our div (map_canvas)
map = new GMap2(document.getElementById("map_canvas"));

//getting the latitude
//parameter 1 of setCenter - Geographical point
//parameter 2 of setCenter - Zoom
//GLatLng (latitude,laggitude)- Notice the ordering of latitude and longitude.

map.setCenter(new GLatLng(37.6411, -122.3921,true), 10);

//setting to the given values.
map.setUIToDefault();

// A GStreetviewOverlay object is a tileset highlighting locations where Street //View data is available.

var streetOverlay = new GStreetviewOverlay();
var latlang = map.getCenter();

//Getting the ICON for highlighting Street View.
var icon = new GIcon();
//image of the pointer
var imageUrl = "http://maps.google.com/intl/en_us/mapfiles/cb/man_arrow-0.png";
icon.image = imageUrl;
icon.iconSize = new GSize(49,52);
icon.iconAnchor = new GPoint(25,36);
icon.infoWindowAnchor = new GPoint(25,6);

//Setting the marker with given Geographical location and other properties with //listener to hearing the drag on the map.

marker = new GMarker(latlang, {"icon":icon, "draggable":true});
GEvent.addListener(marker, "dragstart", function()
{
map.addOverlay(streetOverlay);
}
);

GEvent.addListener(marker, "dragend", function(overlay,latlang)
{
map.removeOverlay(streetOverlay);
openWindow();
}
);
//Adding the street view to the page. If you don't want street view just //comment the following line.
map.addOverlay(marker);
}


Getting the flash object from google into our div.

function openWindow()
{
//GStreetviewPanorama object holds an instance of the Flash Street View in //Panorama viewer
myPano = new GStreetviewPanorama(document.getElementById("stview"));
var latlang = marker.getLatLng();
myPano.setLocationAndPOV(latlang);
}


Your HTML code will look like this



< body onload="initialize()" onunload="GUnload()" >
< div id="map_canvas" style="width: 500px; height: 300px" > < /div >
< div id="stview" style="width: 500px; height: 200px" > < /div >

< /body >

Hope this will help to everybody.

Attachments

  • Google Map with Street View enabled (29690-27639-Google Map with StreetView.html)
  • Google Map with street view enabled (29690-27646-Google Map with StreetView.html)



  • Responses

    Author: Anil Chalasani    27 Jun 2009Member Level: Gold   Points : 1
    Please use second attachment which is
    29690-27646-Google Map with StreetView.html

    If it is also not working just create another file with given above code it will work.

    Thanks.


    Feedbacks      
    Popular Tags   What are tags ?   Search Tags  
    Sign In to add tags.
    Street view  .  SetLocationAndPOV  .  SetCenter  .  RemoveOverlay  .  GStreetviewPanorama  .  GStreetviewOverlay  .  Google map  .  Google  .  GMarker  .  GMap2  .  GLatLng  .  GIcon  .  AddOverlay  .  

    Post Feedback


    This is a strictly moderated forum. Only approved messages will appear in the site. Please use 'Spell Check' in Google toolbar before you submit.
    You must Sign In to post a response.
    Next Resource: Globalizing Ajax Calendar control
    Previous Resource: ASP.NET Interview Questions Part 1
    Return to Discussion Resource Index
    Post New Resource
    Category: ASP.NET/Web Applications


    Post resources and earn money!
     
    Related Resources



    dotNet Slackers

    About Us    Contact Us    Privacy Policy    Terms Of Use