2014-06-15 2 views
0

JS Fiddle: http://jsfiddle.net/SULSV/API Google Maps: Ajouter streetview à la carte?

J'utilise le code suivant pour afficher une carte sur mon site:

Mon HTML:

<div id="myMap" style="height:350px;width:680px"></div> 
<input id="address" type="text" style="width:600px;"/> 
<input type="text" id="latitude" placeholder="Latitude"/> 
<input type="text" id="longitude" placeholder="Longitude"/> 

Mes JS:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> 
</script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> 
</script> 
<script type="text/javascript"> 
var map; 
var marker; 
var myLatlng = new google.maps.LatLng(20.268455824834792, 85.84099235520011); 
var geocoder = new google.maps.Geocoder(); 
var infowindow = new google.maps.InfoWindow(); 

function initialize() { 
    var mapOptions = { 
     zoom: 18, 
     center: myLatlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById("myMap"), mapOptions); 

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

    geocoder.geocode({ 
     'latLng': myLatlng 
    }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      if (results[0]) { 
       $('#latitude,#longitude').show(); 
       $('#address').val(results[0].formatted_address); 
       $('#latitude').val(marker.getPosition().lat()); 
       $('#longitude').val(marker.getPosition().lng()); 
       infowindow.setContent(results[0].formatted_address); 
       infowindow.open(map, marker); 
      } 
     } 
    }); 

    google.maps.event.addListener(marker, 'dragend', function() { 

     geocoder.geocode({ 
      'latLng': marker.getPosition() 
     }, function (results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       if (results[0]) { 
        $('#address').val(results[0].formatted_address); 
        $('#latitude').val(marker.getPosition().lat()); 
        $('#longitude').val(marker.getPosition().lng()); 
        infowindow.setContent(results[0].formatted_address); 
        infowindow.open(map, marker); 
       } 
      } 
     }); 
    }); 

} 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

Ma question: Quel code dois-je d ajouter pour ajouter une boîte de vue de la rue sous la carte qui est liée à la feuille de route et montre la position actuelle du marqueur?

Je alerady savoir qu'il est possible d'initialiser streetview par

new google.maps.StreetViewPanorama(document.getElementById("DIV-BOX")); 

mais je n'ai pas la moindre idée comment intégrer streetview dans mon code.

+0

cette question a été posée comme il y a 2 jours. Faire une recherche –

Répondre

0

définissent via le streetView -property de la carte:

var mapOptions = { 
    zoom: 18, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    streetView: new google.maps.StreetViewPanorama(document.getElementById("DIV-BOX")) 
}; 

http://jsfiddle.net/SULSV/1/