Google-maps – Integrating Google street view inside marker

google maps

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_q&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.

Best Answer

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;v=2&amp;sensor=false&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>
Related Topic