Home/ Questions/Q 3601262
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T20:35:57+00:00

In this google map sample: http://code.google.com/apis/maps/documentation/javascript/examples/streetview-simple.html If the user dropped the little guy far

  • 0

In this google map sample: http://code.google.com/apis/maps/documentation/javascript/examples/streetview-simple.html
If the user dropped the little guy far away in the middle of the ocean for example, it disappears.
But in the main google map website http://maps.google.com/ If you made it show the street view, and the user dragged the guy away it get back automatically to the previous point.

What is missed in the first example to make it behave the same as the google map website?

here is the code of the sample:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Street View Layer</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">

  function initialize() {
    var fenway = new google.maps.LatLng(42.345573,-71.098326);
    var mapOptions = {
      center: fenway,
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(
        document.getElementById("map_canvas"), mapOptions);
    var panoramaOptions = {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
        zoom: 1
      }
    };
    var panorama = new  google.maps.StreetViewPanorama(document.getElementById("pano"),panoramaOptions);
    map.setStreetView(panorama);
  }
</script>
</head>
<body onload="initialize()">
  <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>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To do this, add an event listener to position_changed and use it to store the last (valid) location that pegman was dropped.

    google.maps.event.addListener(panorama, 'position_changed', function() {
  // Store position
});

    And then add an event listener to visibility_changed (which is triggered when pegman is dropped in the ocean) to set him back to the last known location:

    google.maps.event.addListener(panorama, 'visible_changed', function() {
  if (panorama.getVisible() == false && last_location) {
    panorama.setPosition(last_location);
  }
});
    • 0