Integrating Google street view inside marker

Question

Hello;

When we search for addresses on Google Maps website, if street view is available for that address, its marker adds a little image with a link to view Street View for that area.

My question is, can I integrate such thing with my custom map?

An example would be:

http://maps.google.com/maps?f=q&source=s%5Fq&hl=en&geocode=&q=30+Daniel+Webster+Hwy,+East+Merrimack,+NH+03054&sll=35.101934,-95.712891&sspn=48.649293,93.076172&ie=UTF8&hq=&hnear=30+Daniel+Webster+Hwy,+East+Merrimack,+Hillsborough,+New+Hampshire+03054&z=16

Check the marker - I want something like this;

Regards,

PS: I know there must be a way, but I am very short on time; need a solution asap - have googled, but haven't found way out.

Answer 1

To discover whether a streetview exists, use GStreetviewClient.getNearestPanorama(). Your callback will only receive a status code 200 if one is found nearby.

Displaying the streetview in an infowindow is now complicated by the fact that the infowindow code has been moved back out of the main code into an external module. That means that there can be a significant delay before the infowindow contents get added tot he DOM, and GStreetviewPanorama expects the container to be in the DOM already. The trick in the second half of this page might work, or you might have to add your own code to wait for the target div to become accessible before calling GStreetviewPanorama.

Answer 2

Well; finally I have been able to do it - though not exactly 100% duplicate of google maps.

Following is the code - just posting for future reference for others:

<script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=false&amp;amp;key=KEY" type="text/javascript"></script>
    <script type="text/javascript">
 //<![CDATA[
 var map;
 var geocoder;

 function load()
 {
  if (GBrowserIsCompatible()) 
  {
   map = new GMap2(document.getElementById("map"));
   map.setCenter(new GLatLng(40, -80), 1);
   map.addControl(new GLargeMapControl());
   map.addControl(new GMapTypeControl());
   map.setZoom(14);

   geocoder = new GClientGeocoder();
   geocoder.getLocations( "<%=me.Address %>", addAddressToMap );
  }
 }

 function addAddressToMap( response )
 {
  if (!response || response.Status.code != 200)
  {
   alert("Sorry, we were unable to geocode that address");
   return;
  }

  place = response.Placemark[0];
  point = new GLatLng( place.Point.coordinates[1], place.Point.coordinates[0] );

  var lat = place.Point.coordinates[1];
  var lng = place.Point.coordinates[0];

  var letter = String.fromCharCode( "A".charCodeAt( 0 ) );

  var  baseIcon = new GIcon();
  baseIcon.iconSize = new GSize( 32, 32 );
  baseIcon.shadowSize = new GSize( 37, 34 );
  baseIcon.iconAnchor = new GPoint( 9, 34 );
  baseIcon.infoWindowAnchor = new GPoint( 9, 2 );
  baseIcon.infoShadowAnchor = new GPoint( 18, 25 );

  marker = new GMarker( point );

  map.addOverlay( marker );
  map.panTo( point );
  marker.openInfoWindowHtml( "<strong><%=me.Name %></strong><br /><%=me.AddressForDisplay %>" );

  var point = new GLatLng( lat, lng );
  panoramaOptions = { latlng:point };
  pano = new GStreetviewPanorama( document.getElementById( "streetview" ), panoramaOptions );

  GEvent.addListener( pano );
  GEvent.addListener( pano, "error", handleNoFlash );
 }
 function handleNoFlash( code )
 {
  if ( code == GStreetviewPanorama.ErrorValues.FLASH_UNAVAILABLE )
   alert( 'You need flash player to view the panorama.' );

  document.getElementById( "toggle" ).style.display = 'none';
 }
 function Toggle()
 {
  if( document.getElementById( "streetview" ).style.display == 'none' )
  {
   document.getElementById( "streetview" ).style.display = 'block';
   document.getElementById( "map" ).style.display = 'none'
   document.getElementById( "toggle" ).innerHTML = "<a href='javascript:Toggle();'>Map View</a>";
  }
  else
  {
   document.getElementById( "map" ).style.display = 'block';
   document.getElementById( "streetview" ).style.display = 'none'
   document.getElementById( "toggle" ).innerHTML = "<a href='javascript:Toggle();'>Street View</a>";
  }
 }
 //]]>
</script>

And for body:

<body onload="load()" onunload="GUnload()">
  <div id="toggle"><a href='javascript:Toggle();'>Street View</a></div>
  <div id="map" style="width:650px; height: 400px;"></div>
  <div id="streetview" style="width:650px; height: 400px; display:none;"></div>

Answer 3

I created JQuery Plugin (imGoogleMaps) that allows users to display a Streetview Panorama as well as add street view overlay.

http://grasshopperpebbles.com/ajax/jquery-plugin-imgooglemaps-0-9-multiple-addresses-street-view/

Answer 4

master effkay!!! it's solution for my problem for street view, thanks

Answer 5

Great post! your solution works flawlessly, effkey. thank you very much