Mootools breaks Google maps streetview - black screen

问题

Including the mootools.min.js in the Maps JavaScript API Hello World example causes the street view feature to fail rendering street images. I'm working with Joomla and mootools gets loaded prior to my code getting inserted.

I reduced the problem until I was working with the HelloWorld example provided in the documentation. My local version of mootools is 1.4.5. I've tested it with the hosted 1.45 as well as the latest version 1.6.0.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>

    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&callback=initMap"
    async defer></script>
  </body>
</html>

After dropping the street view man onto the street network I see two console errors:

GET about:invalid net::ERR_UNKNOWN_URL_SCHEME

GET https://example.com/%5Bobject%20Array%20Iterator%5D?panoid=hDKgn2F54H80bzAQMu1LoQ&output=tile&x=0&y=0&zoom=0&nbt&fover=2 404 (Not Found)

The street view interface seems to be working - the nav arrows are displayed and clickable, just no images.

来源：https://stackoverflow.com/questions/57084724/mootools-breaks-google-maps-streetview-black-screen

标签

google-maps-api-3

mootools

google-street-view