how-to-show-streetview-when-user-click-on-steps-panel

by dekkard

HTML

<!--
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCMxfN20-SVT2nC1cQW_xlgxkLxdJKjY1c&sensor=false">
</script>
 -->

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&.js">
</script>

<div id="map_canvas"></div>

<div id="pano" style="width: 50%; height: 50%;float:left"></div>
<form onSubmit='calcolaPercorso();'>
    <div>Scopri il percorso. inserisci di seguito il tuo punto di partenza:</div>
    <div style="padding:10px;">Stato:
        <input type='text' id='stato' />Provincia:
        <input type='text' id='provincia' />Comune:
        <input type='text' id='comune' />Via:
        <input type='text' id='via' />
        <input type='submit' value='Mostra percorso' />
        <input type='button' value='Cancella percorso' onClick='cancellaPercorso();' />
    </div>
    <div id="map_directions"></div>
</form>

CSS

#map_canvas {
    display: block;
    width: 50%;
    height: 50%;
}

JavaScript

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var myLatlng;
var idDirection;

google.maps.event.addDomListener(window, 'load', init);

function init() {
    console.log('init()');
    
    var mappa = 'map_canvas';
    var percorso = 'map_directions';
    var latitudine = 41.9100711;
    var longitudine = 12.5359979;
    var info = 'Amleto Florio';
    var titolo = 'Ultimo compito sistemi 2015 - ITIS';

    inizializza(mappa, percorso, latitudine, longitudine, titolo, info);
}

function inizializza(div_id_map, div_id_percorso, latitudine, longitudine, title, info) {
    console.log("init");
    
    directionsDisplay = new google.maps.DirectionsRenderer();
    idDirection = div_id_percorso;
    myLatlng = new google.maps.LatLng(latitudine, longitudine);

    var opzioni = {
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: myLatlng
    };

    map = new google.maps.Map(document.getElementById(div_id_map), opzioni);

    var panoramaOptions = {
        position: myLatlng,
        pov: {
            heading: 34,
            pitch: 10
        }
    };
    
    var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
    map.setStreetView(panorama);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: title
    });

    var contentString = info;
    var infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    google.maps.event.addListener(marker, 'click', function () 
    {
        infowindow.open(map, marker);
    });
}

function calcolaPercorso() {
    //.setMap mi serve per impostare la mappa da utilizzare circa il relativo percorso, mentre per quanto riguarda il metodo
    //.setPanel mi è utile per visualizzare all'utente un pannello con i relativi passi, letteralmente, da compiere durante il percorso
    //questo pannello sarà visualizzato sotto al contenitore...