Integrare google street map api su una pagina web

In questo tutorial vedremo come si possibile e facile integrare nella nostra pagina web google street map api, mostrando dentro un iframe il percorso stradale di opportune coordinate geografiche.

Intanto occorre recuperare la chiave per l'utilizzo delle api da qui.

Per far funzionare il tutto dobbiamo mettere tra gli HEAD della pagina

 
<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;&v=2&key=CHIAVE-DI-GOOGLE-MAP"></script>
 

e il codice javascript che mostra, dati longitudine e latitudine, le info desiderate:

 
 <script type="text/javascript">
    function initialize() {
      var myPano = new GStreetviewPanorama(document.getElementById("pano"));
      fenwayPark = new GLatLng(37.828904,15.267858);
      myPOV = {yaw:0,pitch:5};
      myPano.setLocationAndPOV(fenwayPark, myPOV);
    }
    </script>
 

alla fine all'interno della pagina web mostriamo l'iframe con le info stradali:

 
<body onload="initialize()" onunload="GUnload()">
<div id="container" style="position: relative; width: 500px; height: 300px;">
<div name="pano" id="pano" style="width: 100%; height: 100%;z:index: 0"></div>
 
    <iframe src="javascript:false;" frameborder="0" style="position: absolute;
      right: 185px; top: 5px; width: 150px; height: 55px; z-index: 1"></iframe>
<div style="position: absolute; right: 185px; top: 5px; width: 150px;
      height: 55px; z-index: 2;">
      <img src="http://www.google.com/intl/en_uk/websiteoptimizer/images/logo_sm.gif"/></div>
</div>
 
</body>

il risultato una cosa del genere: