Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Well; finally I have been able to do it - though not exactly 100% duplicate of google maps.</p> <p>Following is the code - just posting for future reference for others:</p> <pre><code>&lt;script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;sensor=false&amp;amp;key=KEY" type="text/javascript"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; //&lt;![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( "&lt;%=me.Address %&gt;", 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( "&lt;strong&gt;&lt;%=me.Name %&gt;&lt;/strong&gt;&lt;br /&gt;&lt;%=me.AddressForDisplay %&gt;" ); 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 = "&lt;a href='javascript:Toggle();'&gt;Map View&lt;/a&gt;"; } else { document.getElementById( "map" ).style.display = 'block'; document.getElementById( "streetview" ).style.display = 'none' document.getElementById( "toggle" ).innerHTML = "&lt;a href='javascript:Toggle();'&gt;Street View&lt;/a&gt;"; } } //]]&gt; &lt;/script&gt; </code></pre> <p>And for body:</p> <pre><code>&lt;body onload="load()" onunload="GUnload()"&gt; &lt;div id="toggle"&gt;&lt;a href='javascript:Toggle();'&gt;Street View&lt;/a&gt;&lt;/div&gt; &lt;div id="map" style="width:650px; height: 400px;"&gt;&lt;/div&gt; &lt;div id="streetview" style="width:650px; height: 400px; display:none;"&gt;&lt;/div&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload