All geek questions in one place

Google Street View Integration in Token

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

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

Example:

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& = UTF8 & hq = & hnear = 30 + Daniel + Webster + Hwy, + East + Merrimack, + Hillsborough, + New + Hampshire + 03054 & z = 16

Check the marker - I need something like this:

Hello,

PS: I know that there must be a way, but I have a very short time; need a solution as soon as possible - googled, but did not find a way out.

+3
source share
3 answers

Well; finally, I was able to do this - although not exactly 100% duplicate Google maps.

The code below is just a publication for future links to 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 the 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>
+3
source

To find out if a street view exists, use GStreetviewClient.getNearestPanorama (). Your callback will receive a status code of 200 if it is nearby.

, infowindow . , , infowindow DOM, GStreetviewPanorama , DOM . , , , , , div GStreetviewPanorama.

+1

Source: https://habr.com/ru/post/1722996/

More articles:


All Articles