PrepareStreetImageCompare-it.html

<!--
***************************************************************************************************
*** Street Image Compare
*** Description: Prepare Street Image Compare -  Italian version
***      Author: Cesare Gerbino
***        Code: https://github.com/cesaregerbino/StreetImageCompare
***     License: MIT (https://opensource.org/licenses/MIT)
***************************************************************************************************
-->

<html>
 <head>
   <meta charset="utf-8">
   <title>Prepare Street Image Compare View Side-by-Side</title>

 </head>
 <body>

   <!-- *** The page structure: header ... -->
   <div id="titlebar">
    <center>
     <table border=1 style="width:95vw;height:2vw">
       <tr>
        <td>
          <center>
            <b>Street Image Compare</b>
          </center>
        </td>
        <td>
         <div id="address">
          <center>
             Ricerca per:
             <input id="textToGeoCode" type="text" placeholder="Città, indirizzo o coppia di coordinate ..." size="30">
          </center>
         </div>
        </td>
       </tr>
     </table>
   </center>
   </div>

   <!-- *** The page structure: body ... -->
   <div id="center">
    <center>
     <table border=1 border=1 style="width:95vw;height:2vw">
      <!-- first row -->
      <tr>
        <td>
         <div style="width:100%;height:100%">
             <p style="padding: 10px;text-align: justify;text-justify: inter-word">
               Street Image Compare permette di confrontare, per la medesima zona, le immagini (se disponibili ...),
               sia di <a href="https://it.wikipedia.org/wiki/Google_Street_View" target="google_street_view">Google Street View</a>
               sia di <a href="https://it.wikipedia.org/wiki/Mapillary" target="mapillary">Mapillary</a> e, di navigare i percorsi
               avendo come riferimenti territoriali sia la mappa di <a href="https://it.wikipedia.org/wiki/Google_Maps" target="google_map">Google Map</a>
               sia la mappa di <a href="https://it.wikipedia.org/wiki/OpenStreetMap" target="osm">OpenStreetMap</a>. Ecco un esempio di utilizzo ...<br>
               <center>
                <iframe width="420" height="315"
                  src="https://www.youtube.com/embed/GlTS-LszxvQ">
                </iframe>
               </center>
               <br>
               L'utente può selezionare (in questa pagina, in alto a destra ...), l'area di interesse in tre diverse modalità:
               <ul>
                 <li>scrivendo il nome di una località</li>
                 <li>scrivendo un indirizzo</li>
                 <li>scrivendo una coppia di coordinate</li>
               </ul>
            </p>
            <p style="padding: 10px;text-align: justify;text-justify: inter-word">
               Per la geocodifica è utilizzato <a href="https://developers.google.com/places/" target="geocoder">il geocoder di Google Maps</a>.<br>
               <br>
               Una volta ottenuta la nuova pagina web con le due mappe, Google Street View e Mapillary, l'utente può navigare le immagini
               usando le frecce che trova disponibili sulle immagini stesse: sulle mappe saranno riportati i marker che indicano
               la corrispondente posizione corrente sul territorio.<br>
               <br>
               E' anche possibile, su entrambe le mappe e con appositi bottoni, cliccare in un punto per posizionarsi direttamente
               in una zone ben precisa.
            </p>
          </div>
        </td>
      </tr>
     </table>
   </center>
   </div>

   <!-- *** The page structure: footer ... -->
   <div id="bottom">
     <center>
      <table border=1 border=1 style="width:95vw;height:2vw">
       <!-- first row -->
       <tr>
         <td>
           <div style="width:100%;height:100%">
             <p style="padding: 10px;text-align: justify;text-justify: inter-word">
              Riferimenti: realizzato da Cesare Gerbino (cesare.gerbino@gmail.com).
              Clicca <a href="https://cesaregerbino.wordpress.com/?????" target="details_blog">qui</a> per dettagli.
              Il codice sorgente <a href="https://github.com/cesaregerbino/StreetImageCompare" target="gitHub">è disponibile su GitHub</a> sotto
              <a href="https://it.wikipedia.org/wiki/Licenza_MIT" target="licenza">licenza MIT</a>
             </p>
           </div>
         </td>
       </tr>
      </table>
    </center>
   </div>


   <script>
      function initialize() {
        //*** Add a search text input ...
        var searchBox = new google.maps.places.SearchBox(document.getElementById("textToGeoCode"));

        //*** Add a listener on search text input ...
        google.maps.event.addListener(searchBox, 'places_changed', function() {
             searchBox.set('google_map', null);

             var places = searchBox.getPlaces();
             var bounds = new google.maps.LatLngBounds();

             var i, place;
             for (i = 0; place = places[i]; i++) {
               (function(place) {
                 bounds.extend(place.geometry.location);
               }(place));
             }

             //*** Build the url to invoke ...
             var theUrl = "StreetImageCompare.html?lat="+bounds.getCenter().lat()+"&lng="+bounds.getCenter().lng();

             //*** Invoke the url and open in a new window ...
             window.open(theUrl, '_blank');
           });
      }
   </script>

   <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4w4Yw72Rf3z8Z7TnLQ6HkJqZ5NEgV2pw&libraries=places&callback=initialize">
   </script>
 </body>
</html>