jquerygoogle-maps-api-3google-street-view

Returning the address in the address box with google street view on a click event

Using the Google Maps API I can return a street view of the current position using navigator.geolocation.getCurrentPosition. This throws up the address in a box at the left hand corner of the property image, along with a 'View in Google maps' link.

Is there a way to be able override the standard click event and capture the address (first line) in the box? Once I can show this in an alert the rest will follow.

Solution

  • That address is the StreetViewLocation description.

    Access it when the location_changed event fires on the panorama with:

    panorama.getLocation().description

    location_changed listener:

    panorama.addListener('location_changed', function() {
  var descriptionCell = document.getElementById('description');
  descriptionCell.innerHTML = panorama.getLocation().description + '';
});

    proof of concept fiddle

    screenshot of example map

    (function(exports) {
  "use strict";

  function initialize() {
    exports.panorama = new google.maps.StreetViewPanorama(
      document.getElementById("street-view"), {
        position: {
          lat: 37.86926,
          lng: -122.254811
        },
        pov: {
          heading: 165,
          pitch: 0
        },
        zoom: 1
      }
    );
    panorama.addListener('position_changed', function() {
      var positionCell = document.getElementById('position');
      positionCell.innerHTML = panorama.getPosition() + '';
    });
    panorama.addListener('location_changed', function() {
      var descriptionCell = document.getElementById('description');
      descriptionCell.innerHTML = panorama.getLocation().description + '';
    });
  }

  exports.initialize = initialize;
})((this.window = this.window || {}));
    html,
body {
  height: 100%;
  margin: 10;
  padding: 0;
}

#street-view {
  height: 90%;
}
    <title>Street View Containers</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=&callback=initialize&libraries=&v=weekly" defer></script>
<div id="info"></div>
<div id="description"></div>
<div id="position"></div>
<div id="heading"></div>
<div id="pitch"></div>
<div id="street-view"></div>