Google Maps - Overlays within Street View

[AEM542]

Hi everyone,

I have the code below to generate a Google Map:

<script type="text/javascript">

var map; //global map       
var _ADDRESS = "{{address1}} {{address2}} {{city}}, {{state}} {{zipcode}}";
var _NAME = "{{name}}";
var panorama;
        
//geocode the address of web app item and create map
function startGeocoding(){

  var geo = new google.maps.Geocoder();
  var geoOpts = { address: _ADDRESS };
  geo.geocode(geoOpts, function (results, status) { createMap(results, status); });
}

//callback from web app item address geocoding.
//creates the map
function createMap(results, status) {

  if (status === google.maps.GeocoderStatus.OK) {

        var contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<div id="bodyContent">'+
          '<p style="margin-bottom: 0"><strong>{{name}}</strong><br />' +
      '{{address1}} {{address2}}<br />' +
      '{{city}} {{state}} {{zipcode}}'+
      '</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

           

    var myOptions = {
      zoom: 14,
      center: results[0].geometry.location,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: true,
    };
    map = new google.maps.Map(document.getElementById("js-map"), myOptions);

    var markerOpts = {
      position: myOptions.center,
      map: map,
      title: _NAME,
      animation: google.maps.Animation.DROP
    };
      
    var marker = new google.maps.Marker(markerOpts);
  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });


      // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView();
  panorama.setPosition(_ADDRESS);
  panorama.setPov(/** @type {google.maps.StreetViewPov} */({
    heading: 265,
    pitch: 0
  }));
}

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
      
      
  }
  else {
    $("#js-map").text("Unable to render map, please check the address of this location.");
  }

}

  </script>
 <script src="https://maps.googleapis.com/maps/api/js?key=MY-API-KEY-GOES-HERE&callback=startGeocoding" async defer></script>

I’m trying to create an overlay within Street Views and used some code from the following url:

Overlays Within Street View  |  Maps JavaScript API  | ...

In the above code block, I pasted in the following section from the link above:

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView();
  panorama.setPosition(_ADDRESS);
  panorama.setPov(/** @type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
  }));
}

function toggleStreetView() {
  var toggle = panorama.getVisible();
  if (toggle == false) {
panorama.setVisible(true);
  } else {
panorama.setVisible(false);
  }

I also pasted in the following variable:

var panorama;

If the above blocks of code were not used, then the original code renders the map successfully however I’m having problems merging the code at the above url into my own code.

You’ll notice in the above url that the code includes the following line:

panorama.setPosition(astorPlace);

and this references a variable called astorPlace which sets the longtitude and latitude of the map. I swapped this variable out and replaced it with my own variable called _ADDRESS which sets the address of the map.

I’m not exactly sure if it needs to reference the longtitude and latitude so could that be why it’s not rendering or could I have some missing braces in my code?

I’d really appreciate any help as I’ve been looking at it for ages and I can’t find the solution.

Thanks in advance.