javascript html google-maps google-maps-api-3 google-street-view

google map streetview display marker in my POV or beside me

my custom marker is draggable and located in my current location.

However, I need to change my position first before I could see my custom marker so that I could drag it to wherever I want to put it.

Is there a way my custom marker pins in front of me or beside me as long as I see them immediately.

added working API key which is free for use on Stack overflow

var position = { lat: 42.3456778143501, lng: -71.09837363184101 }
var pano_heading = 68.85497936110396;
var pano_pitch = 14.77626025895016;

function initialize() {
    // Note: constructed panorama objects have visible: true
    // set by default.
    const panorama = new google.maps.StreetViewPanorama(
        document.getElementById("map"),
        {
            position: position,
            pov: {
                heading: pano_heading,
                pitch: pano_pitch
            },
            addressControlOptions: {
                position: google.maps.ControlPosition.BOTTOM_CENTER,
            },
            linksControl: true,
            panControl: true,
            enableCloseButton: true,
        }
    );

    var marker_pano = new google.maps.Marker({
        map: panorama,
        position: position,
        title: 'test',
        draggable: true,
        animation: google.maps.Animation.DROP,
    });

    panorama.addListener("pano_changed", () => {
        //console.log('pano ID', panorama.getPano());
        const panoID = document.getElementById("pano-id");
        panoID.innerHTML = "pano ID = " + panorama.getPano();
    });

    panorama.addListener("position_changed", () => {
        const positionCell = document.getElementById("position");
        positionCell.innerHTML = "postion = " + panorama.getPosition() + "";
    });

    panorama.addListener("pov_changed", () => {
        const headingCell = document.getElementById("pano-heading");
        const pitchCell = document.getElementById("pano-pitch");
        headingCell.innerHTML = "pano heading = " + panorama.getPov().heading + "";
        pitchCell.innerHTML = "pano pitch = " + panorama.getPov().pitch + "";
    });
}

html,
body {
  height: 80%;
  margin: 0;
  padding: 0;
}

#map,
#pano {
  float: left;
  height: 80%;
  width: 50%;
}

<div id="map"></div>
<div id="pano">
  <div id="position"></div>
  <div id="pano-id"></div>
  <div id="position"></div>
  <div id="pano-heading"></div>
  <div id="pano-pitch"></div>
</div>


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=&v=weekly" async></script>

Solution

Here is an example on how to offset the marker by 10 meters distance from your current position and to change the POV heading so that it faces the Marker.

Sounds like a better solution than to offset your own position, as doing so might end up somewhere where there is no Street View imagery available...

Note that you must include the Geometry library when loading the API script:

https://maps.googleapis.com/maps/api/js?libraries=geometry

function initialize() {

  var position = new google.maps.LatLng(42.3456778143501, -71.09837363184101);
  var marker_position = google.maps.geometry.spherical.computeOffset(position, 10, 0);
  var heading = google.maps.geometry.spherical.computeHeading(position, marker_position);

  // Note: constructed panorama objects have visible: true
  // set by default.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map"), {
      position: position,
      pov: {
        heading: heading,
        pitch: -15
      },
      addressControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_CENTER,
      },
      linksControl: true,
      panControl: true,
      enableCloseButton: true,
    }
  );

  var marker_pano = new google.maps.Marker({
    map: panorama,
    position: marker_position,
    title: 'test',
    draggable: true,
    animation: google.maps.Animation.DROP,
  });

  panorama.addListener("pano_changed", () => {
    //console.log('pano ID', panorama.getPano());
    const panoID = document.getElementById("pano-id");
    panoID.innerHTML = "pano ID = " + panorama.getPano();
  });

  panorama.addListener("position_changed", () => {
    const positionCell = document.getElementById("position");
    positionCell.innerHTML = "postion = " + panorama.getPosition() + "";
  });

  panorama.addListener("pov_changed", () => {
    const headingCell = document.getElementById("pano-heading");
    const pitchCell = document.getElementById("pano-pitch");
    headingCell.innerHTML = "pano heading = " + panorama.getPov().heading + "";
    pitchCell.innerHTML = "pano pitch = " + panorama.getPov().pitch + "";
  });
}

html,
body {
  height: 80%;
  margin: 0;
  padding: 0;
}

#map,
#pano {
  float: left;
  height: 180px;
  width: 50%;
}

<div id="map"></div>
<div id="pano">
  <div id="position"></div>
  <div id="pano-id"></div>
  <div id="position"></div>
  <div id="pano-heading"></div>
  <div id="pano-pitch"></div>
</div>


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=geometry&v=weekly" async></script>