title: Google Maps API : Code stops work after making a change
body: <p>I've got these code. Using Google Maps API together with additional, self-written CSS-, JavaScript-code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// [START region_initialization]
  // This example creates a custom overlay called USGSOverlay, containing
  // a U.S. Geological Survey (USGS) image of the relevant area on the map.
  
  // Set the custom overlay object's prototype to a new instance
  // of OverlayView. In effect, this will subclass the overlay class therefore
  // it's simpler to load the API synchronously, using
  // google.maps.event.addDomListener().
  // Note that we set the prototype to an instance, rather than the
  // parent class itself, because we do not wish to modify the parent class.
  
  var overlay;
  USGSOverlay.prototype = new google.maps.OverlayView();
  
  // Initialize the map and the custom overlay.
  
  function initMap() {
    var map = new google.maps.Map(document.querySelector('#map'), {
   zoom: 16,
   center: {lat: 49.2164353, lng: 6.9752852},
   mapTypeId: google.maps.MapTypeId.SATELLITE
    });
  
    var bounds = new google.maps.LatLngBounds(
     new google.maps.LatLng(49.212860, 6.969140),
     new google.maps.LatLng(49.219644, 6.982938)
    );
    // The photograph is courtesy of the U.S. Geological Survey.
    var srcImage = 'imgs/ground_plan.jpg';
  
    // The custom USGSOverlay object contains the USGS image,
    // the bounds of the image, and a reference to the map.
    overlay = new USGSOverlay(bounds, srcImage, map);
  }
  // [END region_initialization]
  
  // [START region_constructor]
  /** @constructor */
  function USGSOverlay(bounds, image, map) {
  
    // Initialize all properties.
    this.bounds_ = bounds;
    this.image_ = image;
    this.map_ = map;
  
    // Define a property to hold the image's div. We'll
    // actually create this div upon receipt of the onAdd()
    // method so we'll leave it null for now.
    this.div_ = null;
  
    // Explicitly call setMap on this overlay.
    this.setMap(map);
  }
  // [END region_constructor]
  
  // [START region_attachment]
  /**
   * onAdd is called when the map's panes are ready and the overlay has been
   * added to the map.
   */
  USGSOverlay.prototype.onAdd = function() {
  
    var div = document.createElement('div');
    div.style.borderStyle = 'none';
    div.style.borderWidth = '0px';
    div.style.position = 'absolute';
  
    // Create the img element and attach it to the div.
    var img = document.createElement('img');
    img.src = this.image_;
    img.style.width = '100%';
    img.style.height = '100%';
    img.style.position = 'absolute';
    div.appendChild(img);
  
    this.div_ = div;
  
    // Add the element to the "overlayLayer" pane.
    var panes = this.getPanes();
    panes.overlayLayer.appendChild(div);
  };
  // [END region_attachment]
  
  // [START region_drawing]
  USGSOverlay.prototype.draw = function() {
  
    // We use the south-west and north-east
    // coordinates of the overlay to peg it to the correct position and size.
    // To do this, we need to retrieve the projection from the overlay.
    var overlayProjection = this.getProjection();
  
    // Retrieve the south-west and north-east coordinates of this overlay
    // in LatLngs and convert them to pixel coordinates.
    // We'll use these coordinates to resize the div.
    var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
    var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
  
    // Resize the image's div to fit the indicated dimensions.
    var div = this.div_;
    div.style.left = sw.x + 'px';
    div.style.top = ne.y + 'px';
    div.style.width = (ne.x - sw.x) + 'px';
    div.style.height = (sw.y - ne.y) + 'px';
    
    // Die CSS-property legt die Durchsichtigkeit eines Elementes fest.
    // 1.0 =&gt; Keine Durchsichtigkeit.
    // 0.0 =&gt; Vollkommene Durchsichtkeit.
    div.style.opacity = '0.5';
    
    // Positive Zahl =&gt; Dreht im Uhrzeigersinn.
    div.style.transform = 'rotate(17deg)';
  };
  // [END region_drawing]
  
  // [START region_removal]
  // The onRemove() method will be called automatically from the API if
  // we ever set the overlay's map property to 'null'.
  USGSOverlay.prototype.onRemove = function() {
    this.div_.parentNode.removeChild(this.div_);
    this.div_ = null;
  };
  // [END region_removal]
  
  USGSOverlay.prototype.hide = function() {
    if (this.div_) {
   // The visibility property must be a string enclosed in quotes.
   this.div_.style.visibility = 'hidden';
    }
  };
  
  USGSOverlay.prototype.show = function() {
    if (this.div_) {
   this.div_.style.visibility = 'visible';
    }
  };
  
  USGSOverlay.prototype.toggle = function() {
    if (this.div_) {
   if (this.div_.style.visibility === 'hidden') {
     this.show();
   } else {
     this.hide();
   }
    }
  };
  
  google.maps.event.addDomListener(window, 'load', initMap);
  
  var toggleButton = document.querySelector('#toggleOverlay');
  var increaseButton = document.querySelector('#increaseOpacity');
  var decreaseButton = document.querySelector('#decreaseOpacity');
  var opacityDisplay = document.querySelector('#current-opacity');
  
  function updateDisplay() { 
   opacityDisplay.innerHTML =
      parseFloat(overlay.div_.style['opacity']).toFixed(1);
  }
  
  function setOpacity(step, limit) {
   let currentStyle = overlay.div_.style;
   let opacity = parseFloat(currentStyle['opacity']); // currentStyle['opacity'] is a STRING !!
  
   if (opacity !== limit) {
     opacity += step // Calculation has to be done ONLY with numbers because STRING + NUMBER results in a string.
     currentStyle['opacity'] = opacity; // The number will be converted into a string.
     
     updateDisplay();
  
     if (opacityDisplay.classList.contains('limit-reached')) {
      opacityDisplay.classList.remove('limit-reached');
     } 
   } else {
     opacityDisplay.classList.add('limit-reached');
   }
  }
  
  increaseButton.addEventListener('click', function() {
   setOpacity(-0.1, 0.0);
  });
  
  decreaseButton.addEventListener('click', function() {
   setOpacity(0.1, 1.0);
  });
  
  toggleButton.addEventListener('click', function() {
   let current = overlay.div_.style.visibility;
   let that = this;
  
   function setValues(that, visibleVal, newButtonText) {
     overlay.div_.style.visibility = visibleVal;
     that.textContent = newButtonText;
   }
  
   current === 'hidden' ?
     setValues(that, 'visible', 'hide overlay') :
     setValues(that, 'hidden', 'show overlay');
  });
    
  opacityDisplay.addEventListener('load', updateDisplay);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    height: 100%;
    margin: 0;
    padding: 0; }
  
  body {
    background-color: #d9d9d9; }
  
  .wrap {
    width: 1000px;
    height: 100%;
    margin: 0 auto; }
  
  nav {
    margin: 5px 10px; }
  
  #map {
    height: 100%;
    border-radius: 6px;
    border: 1px solid black; }
  
  a.default-button {
    text-decoration: none; }
  
  #current-opacity, .default-button {
    font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica;
    padding: 5px 10px;
    color: #4367c5;
    border: 3px solid #4367c5;
    font-weight: 900;
    display: inline-block;
    text-align: center;
    border-radius: 6px; }
  
  #current-opacity {
    width: 50px;
    position: relative; }
  
  #current-opacity:after {
    content: attr(data-hint);
    position: absolute;
    display: none;
    color: crimson;
    left: 80%;
    top: 5px;
    background-color: white;
    padding: 5px 10px;
    white-space: nowrap;
    border-radius: 20px;
    border: 3px solid crimson;
    box-shadow: 6px 6px 9px #646464;
    z-index: 1000;
    font-size: 0.9rem;
    transform: rotate(5deg); }
  
  #current-opacity.limit-reached:after {
    display: block; }
  
  .default-button {
    text-transform: uppercase;
    min-width: 150px; }
  
  .default-button:hover {
    color: #009e60;
    border-color: #009e60; }
  
  .default-button:active {
    opacity: 0.6; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Werk 1 - Saarbrücken&lt;/title&gt;
      &lt;link rel="stylesheet" href="./css/main.css" /&gt;
      
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div class="wrap"&gt;
     &lt;nav class="nav"&gt;
      &lt;a href="#" class="default-button" id="toggleOverlay"&gt;Hide overlay&lt;/a&gt;
      &lt;a href="#" class="default-button" id="increaseOpacity"&gt;Increase opacity&lt;/a&gt;
      &lt;a href="#" class="default-button" id="decreaseOpacity"&gt;Decrease opacity&lt;/a&gt;
      &lt;div id="current-opacity" data-hint="Limit reached"&gt;0.5&lt;/div&gt;
     &lt;/nav&gt;
     &lt;div id="map"&gt;&lt;/div&gt;
    &lt;/div&gt;
   &lt;script src="https://maps.googleapis.com/maps/api/js?key=AFDi434FSDFASFD343434af&amp;signed_in=true"&gt;&lt;/script&gt;
      &lt;script src="./js/main.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><em>The JPG, used as an overlay, the correct API-key I can't include. Could get me into trouble. Sorry.</em></p>
  
  <p>My problem is: I make any changes to the code (changing the image-path, changing the coordinates for center / the overlay) and the <strong>whole thing stops to keep working.</strong></p>
  
  <p>After making changes: The map stays empty.</p>
  
  <p><a href="https://i.stack.imgur.com/CcqcJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CcqcJ.png" alt="Map stays empty"></a></p>
  
  <p><strong>What is going on there? What I'm doing wrong?</strong></p>
  
  <p>Especially: What do I have to do to get it working <strong>with</strong> code-changes?</p>
  
  <p><a href="https://i.stack.imgur.com/mxrDf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mxrDf.png" alt="Encoding used"></a></p>