Please help me add a marker to a google street view, but when I put it in nothing works and I get a Uncaught ReferenceError: map is not defined

Heres the marker variable

var cafe = new google.maps.LatLng(34.935196, -107.539546);

Heres the code to set up the marker

var cafeMarker = new google.maps.Marker({
  position: cafe,
  map: map,
  icon: ';chld=cafe|FFFF00',
  title: 'Cafe'
});

Heres the custom google streetview

<script src="? v=3.exp&signed_in=true"></script>
<script>


function initialize() {
   var fenway = new google.maps.LatLng(34.938447, -107.535998);

   var panoOptions = {
       position: fenway,
       addressControlOptions: {
         position: google.maps.ControlPosition.BOTTOM_CENTER
       },
       linksControl: false,
       panControl: false,
       zoomControlOptions: {
         style: google.maps.ZoomControlStyle.SMALL
       },
       enableCloseButton: false
   };

  var panorama = new google.maps.StreetViewPanorama(
  document.getElementById('map-canvas'), panoOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

</script>

Please help me add a marker to a google street view, but when I put it in nothing works and I get a Uncaught ReferenceError: map is not defined

Heres the marker variable

var cafe = new google.maps.LatLng(34.935196, -107.539546);

Heres the code to set up the marker

var cafeMarker = new google.maps.Marker({
  position: cafe,
  map: map,
  icon: 'http://chart.apis.google./chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
  title: 'Cafe'
});

Heres the custom google streetview

<script src="https://maps.googleapis./maps/api/js? v=3.exp&signed_in=true"></script>
<script>


function initialize() {
   var fenway = new google.maps.LatLng(34.938447, -107.535998);

   var panoOptions = {
       position: fenway,
       addressControlOptions: {
         position: google.maps.ControlPosition.BOTTOM_CENTER
       },
       linksControl: false,
       panControl: false,
       zoomControlOptions: {
         style: google.maps.ZoomControlStyle.SMALL
       },
       enableCloseButton: false
   };

  var panorama = new google.maps.StreetViewPanorama(
  document.getElementById('map-canvas'), panoOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);

</script>

• javascript
• google-maps
• google-street-view

1 Answer 1

1. To see the marker on StreetView, you have to add it to the panorama. The Uncaught ReferenceError: map is not defined is telling you there is no map variable defined in your code, that needs to be panorama.

   var cafeMarker = new google.maps.Marker({
     position: cafe,
     map: panorama, // your code doesn't have a 'map' variable
     icon: 'http://chart.apis.google./chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
     title: 'Cafe'
   });
   

2. Once I do that your marker is too far away to see. If I move the pano position closer (and point it at the marker), I see it.

   function initialize() {
       var fenway = new google.maps.LatLng(34.9355,-107.539254);
   
       var panoOptions = {
           position: fenway,
           addressControlOptions: {
               position: google.maps.ControlPosition.BOTTOM_CENTER
           },
           linksControl: false,
           panControl: false,
           zoomControlOptions: {
           style: google.maps.ZoomControlStyle.SMALL
           },
           enableCloseButton: false
       };
   
       var panorama = new google.maps.StreetViewPanorama(
       document.getElementById('map-canvas'), panoOptions);
   
       var cafe = new google.maps.LatLng(34.935196, -107.539546);
   
       var cafeMarker = new google.maps.Marker({
           position: cafe,
           map: panorama,
           icon: 'http://chart.apis.google./chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
           title: 'Cafe'
       });
          var heading = google.maps.geometry.spherical.puteHeading(panorama.getPosition(),cafe);
   
       panorama.setPov({
         heading: heading,
         pitch: 0,
         zoom: 1
       });
   
   }
   

proof of concept fiddle

code snippet:

function initialize() {
  var fenway = new google.maps.LatLng(34.9355, -107.539254);
  // var fenway = new google.maps.LatLng(34.938447, -107.535998);

  var panoOptions = {
    position: fenway,
    addressControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_CENTER
    },
    linksControl: false,
    panControl: false,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
    enableCloseButton: false
  };

  var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('map-canvas'), panoOptions);

  var cafe = new google.maps.LatLng(34.935196, -107.539546);

  var cafeMarker = new google.maps.Marker({
    position: cafe,
    map: panorama,
    icon: 'http://chart.apis.google./chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
    title: 'Cafe'
  });
  var heading = google.maps.geometry.spherical.puteHeading(panorama.getPosition(), cafe);

  panorama.setPov({
    heading: heading,
    pitch: 0,
    zoom: 1
  });

  // Set up the map
  var myOptions = {
    zoom: 15,
    center: cafe
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'),
    myOptions);
  var cafeMarkerMap = new google.maps.Marker({
    position: cafe,
    map: map,
    icon: 'http://chart.apis.google./chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
    title: 'Cafe'
  });
  var panoMarker = new google.maps.Marker({
    position: panorama.getPosition(),
    map: map,
    icon: {
      url: 'https://maps.gstatic./intl/en_us/mapfiles/markers2/measle.png',
      size: new google.maps.Size(7, 7),
      anchor: new google.maps.Point(3.5, 3.5)
    },
    title: 'Pano'
  });
  document.getElementById('info').innerHTML = google.maps.geometry.spherical.puteDistanceBetween(panorama.getPosition(), cafe).toFixed(2) + " meters";

}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis./maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
<div id="info"></div>