Search Box in google maps

ivarello

Utente Attivo
14 Dic 2012
211
1
16
ragazzi ho customizzato le api di google per rispondere alle mie esigenze:

HTML:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Street View service</title>
    <link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <style>
      input {
        border: 1px solid  rgba(0, 0, 0, 0.5);
      }
      input.notfound {
        border: 2px solid  rgba(255, 0, 0, 0.4);
      }
    </style>
    <script>
	
	
function initialize() {
	
	//-----------------------------------------------	
	
  var fenway = new google.maps.LatLng(42.451180,12.085890);
  var mapOptions = {
    center: fenway,
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var panoramaOptions = {
    position: fenway,
    pov: {
          heading: 0.0,
          pitch: 0.0
          },
	linksControl: false
  };
  var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
  map.setStreetView(panorama);
  var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'));
  var autocomplete = new google.maps.places.Autocomplete(input);
  
  autocomplete.bindTo('bounds', map);

  
  //-------------------------------
  
  google.maps.event.addListener(panorama, 'pano_changed', function() {
      var panoCell = document.getElementById('pano_cell');
      panoCell.innerHTML = panorama.getPano();
  });
  
  google.maps.event.addListener(panorama, 'position_changed', function() {
      var positionCell = document.getElementById('position_cell');
      positionCell.firstChild.nodeValue = panorama.getPosition() + '';
  });

  google.maps.event.addListener(panorama, 'pov_changed', function() {
      var headingCell = document.getElementById('heading_cell');
      var pitchCell = document.getElementById('pitch_cell');
      headingCell.firstChild.nodeValue = panorama.getPov().heading + '';
      pitchCell.firstChild.nodeValue = panorama.getPov().pitch + '';
  });
}


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

    </script>
  </head>
  <body>
  <div id="panel">
      <input id="searchTextField" type="text" placeholder="Search Box">
    </div>
    <div id="map-canvas" style="width: 400px; height: 300px"></div>
    <div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
    <table>
      <tr>
        <td><b>Position</b></td><td id="position_cell">&nbsp;</td>
      </tr>
      <tr>
        <td><b>POV Heading</b></td><td id="heading_cell">0.0</td>
      </tr>
      <tr>
        <td><b>POV Pitch</b></td><td id="pitch_cell">0.0</td>
      </tr>
      <tr>
        <td><b>Pano ID</b></td><td id="pano_cell">&nbsp;</td>
      </tr>
    </table>
    </div>
  </body>
</html>
Quello che vorrei fare è aggiungere la possibilità di cercare sia i nome delle località che da gps, con un campo input (già inserito con la funzione autoplay).
Qualcuno può darmi una mano??