title: Reuse a Google Maps street view inside of a modal
body: <p>I am developing a web app in Rails. When I open a marker, a modal pops up with a street view in a box. I can open one or two markers, but after that I get an error that WebGL has hit a snag. I have tried to look online for resources but nothing makes sense. See below pics for more info. Any help would be greatly appreciated.</p>
  
  <p><a href="https://i.stack.imgur.com/rs0hV.jpg" rel="noreferrer">First image with error</a></p>
  
  <p><a href="https://i.stack.imgur.com/VlW1e.png" rel="noreferrer"><img src="https://i.stack.imgur.com/VlW1e.png" alt="second image with error"></a></p>
  
  <p>Here is an image of what my console log looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/YXzXg.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YXzXg.png" alt="console log"></a></p>
  
  <p>Here is my JavaScript code in my webapp.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var handler = Gmaps.build('Google', {
      markers: {
          clusterer: {
              gridSize: 60,
              maxZoom: 20,
              styles: [
                  {
                      textSize: 10,
                      textColor: '#ff0000',
                      url: 'assets/creative/m1.png',
                      height: 60,
                      width: 60,
                  },
                  {
                      textSize: 14,
                      textColor: '#ffff00',
                      url: 'assets/creative/m2.png',
                      height: 60,
                      width: 60,
                  },
                  {
                      textSize: 18,
                      textColor: '#0000ff',
                      url: 'assets/creative/m3.png',
                      width: 60,
                      height: 60,
                  },
              ],
          },
      },
  });
  
  var handler2 = Gmaps.build('Google');
  var current;
  function initialize() {
      handler.buildMap({ internal: {id: 'map'} }, function () {
          markers_json = &lt;%= raw @hash.to_json %&gt;;
          markers = _.map(markers_json, function (marker_json) {
              marker = handler.addMarker(marker_json);
              handler.fitMapToBounds();
              _.extend(marker, marker_json);
              return marker;
          });
  
          getLocation();
  
          markers.map(function (elem, index) {
              google.maps.event.addListener(elem.getServiceObject(), 'click', function (evt) {
                  var id = elem.id,
                      number = elem.number,
                      name = elem.name,
                      zipcode = elem.zipcode,
                      tabid = elem.tabid,
                      latitude = elem.latitude,
                      longitude = elem.longitude;
  
                  $('.name').html('&lt;h3 class=\'panel-title\'&gt;&lt;i class=\'fa fa-id-card\'&gt;&lt;/i&gt;' + number + '&lt;/h3&gt;');
                  $('.paneltb').html('&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Panel&lt;/th&gt;&lt;th&gt;Location&lt;/th&gt;&lt;th&gt;Tab ID&lt;/th&gt;&lt;th&gt;Zip Code&lt;/th&gt;&lt;th&gt;Latitude&lt;/th&gt;&lt;th&gt;Longitude&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;' + number + '&lt;/td&gt;&lt;td&gt;' + name + '&lt;/td&gt;&lt;td&gt;' + tabid + '&lt;/td&gt;&lt;td&gt;' + zipcode + '&lt;/td&gt;&lt;td&gt;' + latitude + '&lt;/td&gt;&lt;td&gt;' + longitude + '&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;');
  
                  pos = new google.maps.LatLng(latitude, longitude);
  
                  var div = document.getElementById('map2');
                  var sv = new google.maps.StreetViewPanorama(div);
                  sv.setPosition(pos);
                  sv.setVisible(true);
  
                  // find the heading by looking from the google car pos to the venue pos
                  var service = new google.maps.StreetViewService();
                  service.getPanoramaByLocation(pos, 50, function (result, status) {
                      if (status == google.maps.StreetViewStatus.OK)
                      {
                          carPos = result.location.latLng;
                          heading = google.maps.geometry.spherical.computeHeading(carPos, pos);
                          sv.setPov({ heading: heading, pitch: 0, zoom: 1 });
                      }
                  });
  
                  $('#myModal').modal('show');
                  current = elem;
              });
          });
      });
      // Create the search box and link it to the UI element.
  }
  
  function getLocation() {
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(displayOnMap);
      } else {
          navigator.geolocation.getCurrentPosition(displayOnMapError);
      }
  }
  
  function displayOnMap(position) {
      marker2 = handler.addMarker({
          lat: position.coords.latitude,
          lng: position.coords.longitude,
          picture: {
              url: "&lt;%= asset_path 'creative/1499326997_Untitled-2-01.png' %&gt;",
              width: 48,
              height: 48,
          },
          infowindow: 'You are Here!',
      });
      handler.map.centerOn(marker2);
      handler.getMap().setZoom(10);
  }
  
  function displayOnMapError(position) {
      marker2 = handler.addMarker({
          lat: 34.0522,
          lng: -118.2437,
          picture: {
              url: "&lt;%= asset_path 'creative/1499326997_Untitled-2-01.png' %&gt;",
              width: 48,
              height: 48,
          },
      });
      handler.map.centerOn(marker2);
      handler.getMap().setZoom(10);
  }
  
  initialize();
  &lt;/script&gt;
  </code></pre>
  
  <p>This was the original code to get the modal to pop up with the information I needed. </p>
  
  <pre><code>$(".name").html("&lt;h3 class='panel-title'&gt;&lt;i class='fa fa-id-card'&gt;&lt;/i&gt;"+number+"&lt;/h3&gt;");
  $(".paneltb").html("&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Panel&lt;/th&gt;&lt;th&gt;Location&lt;/th&gt;&lt;th&gt;Tab ID&lt;/th&gt;&lt;th&gt;Zip Code&lt;/th&gt;&lt;th&gt;Latitude&lt;/th&gt;&lt;th&gt;Longitude&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;"+number+"&lt;/td&gt;&lt;td&gt;"+ name + "&lt;/td&gt;&lt;td&gt;"+tabid+"&lt;/td&gt;&lt;td&gt;"+zipcode+"&lt;/td&gt;&lt;td&gt;"+latitude+"&lt;/td&gt;&lt;td&gt;"+longitude+"&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;");
  
  $('#myModal').modal('show');
  current = elem;
  </code></pre>
  
  <p>In order to add the street view inside of the modal the following code was added:</p>
  
  <pre><code>pos = new google.maps.LatLng( latitude, longitude );
  
  var div = document.getElementById('map2');
  var sv = new google.maps.StreetViewPanorama(div);
  sv.setPosition(pos);
  sv.setVisible(true);
  
  // find the heading by looking from the google car pos to the venue pos
  var service = new google.maps.StreetViewService();
  service.getPanoramaByLocation(pos, 50, function (result, status) {
      if (status == google.maps.StreetViewStatus.OK) {   
          carPos = result.location.latLng;
          heading = google.maps.geometry.spherical.computeHeading(carPos, pos);
          sv.setPov({ heading: heading, pitch: 0, zoom: 1 });
      }
  });
  </code></pre>
  
  <p>In order to pass the current lat and long into the street view, I had to put it inside of the same function that the modal is being called on.</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I cannot figure how to set <code>var sv = new google.maps.StreetViewPanorama(div);</code> so it is set once and the same map reused for each instance of the modal that is called rather than trying to start and restart a new instance.</p>
  
  <p><strong>Update 2</strong></p>
  
  <p>I cannot figure out how to initially initialize this part:</p>
  
  <pre><code>var sv = new google.maps.StreetViewPanorama(div);
  </code></pre>
  
  <p>So when I open a modal it does not render a new map it just reuses the same map. I am inclined to write another function but I need some guidance, please.</p>
  
  <p><strong>UPDATE 3</strong></p>
  
  <p>Something else I have noticed is that when I click on one marker it will show the street view filling its square in the modal. When I click on another one sometimes it won't show at all but in most cases, it shows but very tiny in the corner as in this image:</p>
  
  <p><a href="https://i.stack.imgur.com/4xyyg.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4xyyg.png" alt="update 3"></a></p>
  
  <p>I also noticed that the code for class <code>widget-scene-canvas</code> which comes from Google Maps keeps altering itself from what I originally had it be through my own id styling when I click on more than the first map at separate times.</p>
  
  <p><a href="https://i.stack.imgur.com/rMxEk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rMxEk.png" alt="widget"></a></p>