javascriptgoogle-mapsgoogle-street-view

Change google maps street view position dynamically

I'm using google maps street view, and i need to change panorama locationally, in the same way as when it's created. I'm trying to do it with setPosition({lat: -34, lng: 151}) method of google.maps.StreetViewPanorama instance, but that didn't work. I created fiddle, which is basically a copy of the google maps Street View Side-By-Side fiddle, with the only difference that I try to change location after 2 seconds: https://jsfiddle.net/corecode1/zf0jsL7g/ .

Am I doing something wrong? Or maybe it requires some additional setup in google cloud console? Any help would be appreciated.

code snippet (from fiddle):

"use strict";

function initialize() {
  const fenway = {
    lat: 42.345573,
    lng: -71.098326
  };
  const map = new google.maps.Map(document.getElementById("map"), {
    center: fenway,
    zoom: 14
  });
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
    {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10
      }
    }
  );
  map.setStreetView(panorama);
  
  setTimeout(() => {
      
    const newPosition = new google.maps.LatLng({lat: -34, lng: 151});
    panorama.setPosition({lat: -34, lng: 151});
  
  }, 2000);
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map,
#pano {
  float: left;
  height: 100%;
  width: 50%;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Street View split-map-panes</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
    <div id="pano"></div>
  </body>
</html>

Solution

  • The new location is returning a status of "ZERO_RESULTS". If you use (-34.002223, 150.994098) instead it works.

    Once it has failed, it seems not to work.

    This works (if you don't load the failed location first):

    setTimeout(() => {
  const newPosition = new google.maps.LatLng({lat: -34.002223, lng: 150.994098});
  panorama.setPosition(newPosition);
  map.setCenter(newPosition);
}, 4000);

    proof of concept fiddle

    code snippet:

    "use strict";

function initialize() {
  const fenway = {
    lat: 42.345573,
    lng: -71.098326
  };
  const map = new google.maps.Map(document.getElementById("map"), {
    center: fenway,
    zoom: 14
  });
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"), {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10
      }
    }
  );
  map.setStreetView(panorama);
  google.maps.event.addListenerOnce(panorama, 'position_changed', function() {
    console.log(panorama.getPosition().toUrlValue(6));
  })
  google.maps.event.addListenerOnce(panorama, 'status_changed', function() {
    console.log(panorama.getStatus());
  })
  setTimeout(() => {

    const newPosition = new google.maps.LatLng({
      lat: -34,
      lng: 151
    });
    panorama.setPosition(newPosition);
    map.setCenter(newPosition);
  }, 6000);
  setTimeout(() => {

    const newPosition = new google.maps.LatLng({
      lat: -34.002223,
      lng: 150.994098
    });
    panorama.setPosition(newPosition);
    map.setCenter(newPosition);
  }, 4000);
  setTimeout(() => {

    const newPosition = new google.maps.LatLng({
      lat: -34.002223,
      lng: 150.994098
    });
    panorama.setPosition(newPosition);
    map.setCenter(newPosition);
  }, 8000);
}
    html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map,
#pano {
  float: left;
  height: 100%;
  width: 50%;
}
    <!DOCTYPE html>
<html>

<head>
  <title>Street View split-map-panes</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
  <div id="pano"></div>
</body>

</html>