Как установить api просмотра улиц после нажатия на карту места

Question

Ожидаемое поведение

Когда я нажимаю на карточку ресторана, должен появиться div с видом на улицу с камерой, установленной рядом с местом, указанным накарточка

Данные, которые у меня уже есть о месте

У меня есть ID, имя, адрес, но я неиметь широту (по крайней мере, у меня нет прямого значения)

Код

Это HTML

<!-- this section will appear only when you click on a card -->

        <div class="columnsContainerTwo">
            <div class="leftColumnTwo">
            <img src="https://image.ibb.co/k4SSPK/Spinaci_Green_Dark_Blue.jpg" class="detailPhoto">
               <div class="detailInfo">
                   <div class="leftInfoParagraph">
                        <p style="padding-bottom: 40px;" id="addressRestaurant">Address here Address here Address here Address here Address here </p>
                    </div>
                    <p class="leftInfoParagraph" style="padding-bottom: 40px;" id="phoneRestaurant">phone number</p>
                    <p class="leftInfoParagraph" style="padding-bottom: 30px;" id="ratingPlace">Rating here</p>

                </div>          
                <div class="rightColumnTwo">
                    <div class="division"></div>
                    <h2 class="titleRestaurant">Titolo del ristorante qua</h2>
                    <hr>
                    <div class="division"></div>
                    <div class="reviewSlider">
                        <p>Lorem ipsum Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p>
                    </div>
                    <div class="streeTview">
                        <div id="map2"></div>
                            <div id="pano"></div>
                    </div>
                </div>
            </div>
        </div>

Внизу вы найдете js о картах Google Api и разместите

function initAutocomplete() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -33.8688, lng: 151.2195},
          zoom: 13,
          mapTypeId: 'roadmap'
        });

        // Create the search box and link it to the UI element.
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        searchBox.addListener('places_changed', function() {

            //check if the first sectin is already Up
            if(!sectionShow){
                $(".columnsContainer").fadeIn();
                sectionShow=true;
            }

            document.querySelector('#map').scrollIntoView({ 
                behavior: 'smooth'         
            });

          var places = searchBox.getPlaces();  
          if (places.length == 0) {
            return;
          }
            //this jquery line delete the previous card if you start another research 
            $(".card-grid").parent().find('.card-wrap').remove();
          // Clear out the old markers.
          markers.forEach(function(marker) {
            marker.setMap(null);
          });
          markers = [];


          // For each place, get the icon, name and location.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {

            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }

              containerPlace=places;

            var photos = place.photos;
            if (!photos) {
            return;
            }

            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            };

              // photo is usefull to store the photo of every place you have to change all these variables in a single object
              var photo = photos[0].getUrl({'maxWidth': 800, 'maxHeight': 900})
              var title = place.name;
              var rating = place.rating;
              var address = place.formatted_address;
              var idPlace = place.place_id;      
              var latlng = place.geometry.location;
              console.log(places);

              printCard(photo, title, rating, address, idPlace, latlng);

            // Create a marker for each place.
            markers.push(new google.maps.Marker({
              map: map,
              icon: icon,
              title: place.name,
              position: place.geometry.location
            }));

            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });
     infoWindow = new google.maps.InfoWindow;

        // GeoLocation from Here
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };

            infoWindow.setPosition(pos);
            infoWindow.setContent('You are here');
            infoWindow.open(map);
            map.setCenter(pos);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });
        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());
        }

      }

      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Error: The Geolocation service failed.' :
                              'Error: Your browser doesn\'t support geolocation.');
        infoWindow.open(map);
      } 

, а внизу - как я создаю раздел, где вид улицы должен быть

var detailSectionShow = false;
//store the information to print in the detailed section 

$(document).on("click", ".card-wrap", function(){
    console.log('sei qua');
    //check if the section detailed (columnsContainerTwo) is already open
    if(!detailSectionShow){
                $(".columnsContainerTwo").fadeIn();
                detailSectionShow=true;
            }

    //move the scroll on the right section
    document.querySelector('.columnsContainerTwo').scrollIntoView({ 
                behavior: 'smooth'         
            });

    //save the variable to print
    let restaurant = {
        img: $(this).find("img").attr("src"),
        name: $(this).find("h3").text(),
        address: $(this).find(".restoAddress").text(),
        rating: "Rating: " + $(this).find(".ratePlace").text(),
        latlng: $(this).data('myData')
    };

    printDetailSection(restaurant);
});


function printDetailSection(InfoToPrint){
    $(".detailPhoto").attr("src", InfoToPrint.img);                                         $(".titleRestaurant").text(InfoToPrint.name);
    $("#addressRestaurant").text(InfoToPrint.address);
    $("#ratingPlace").text(InfoToPrint.rating);

    console.log(InfoToPrint.latlng);
}

Наконец, внизу вы найдете мою попытку использовать вид на улицу, но она не работает, поэтому я думаю, что я скучаю больше, чем что-либо.

function initialize() {
  var fenway = {lat: 42.345573, lng: -71.098326};
  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: fenway,
        pov: {
          heading: 34,
          pitch: 10
        }
      });
  map.setStreetView(panorama);
}

Codepen

Это PEN всего мини-проекта,