title: Google Maps Unoptimized Marker / fitBounds
body: <p>I'm writing acceptance tests using Selenium to test an application that uses the Google Maps API.  In order to test the map marker placement I'm <a href="http://blog.mojotech.com/selecting-google-maps-v3-markers-with-selenium-or-jquery/" rel="nofollow">using un-optimized markers</a> and unique title attributes to allow me to target the marker elements (from Selenium with XPath queries).</p>
  
  <p>I have come across an issue wherein calling google.maps.Map.fitBounds() causes markers to be removed from the DOM when un-optimized markers are used.  You have to repeatedly call fitBounds() for this to happen.  <em>This only happens with un-optimized markers</em> and the application itself works as expected.</p>
  
  <p>I've written a short test script to replicate in the browser: please run the below.</p>
  
  <p>I did also <a href="https://jsfiddle.net/geocodezip/93dy5yfv/3/" rel="nofollow">create a fiddle</a>.</p>
  
  <p>I've seen nothing pertinent in the API docs.</p>
  
  <p>Any help would be great.</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;
      &lt;style type="text/css"&gt;
      #container {
        width: 800px;
        height:500px;
      }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;button id="show"&gt;Show&lt;/button&gt;
      &lt;button id="hide"&gt;Hide&lt;/button&gt;
      &lt;div id="container"&gt;&lt;/div&gt;
      &lt;script type="text/javascript"&gt;
  
        // Repeatedly click on 'Hide' then 'Show' (8+ times sometimes).  At some point the markers disappear and not come back - even if the code for showing/hiding markers is entirely commented out.
        // The issue seems to be with the map.fitBounds() call when un-optimized markers are being used.
        // Note - un-optimized markers are needed for targeting marker HTML elements as part of an acceptance test.
        // Replicated on: 45.0.2 Firefox; 49.0.2623.112 m Chrome.
  
        function changeBounds(boolToggle) {
          //return; // TODO - if you add this line in the problem is fixed.
          var bounds = new google.maps.LatLngBounds();
          var latLng = boolToggle ? new google.maps.LatLng(70, 70) : new google.maps.LatLng(30, 30);
          bounds.extend(marker1.getPosition());
          bounds.extend(marker2.getPosition());
          bounds.extend(latLng);
          map.fitBounds(bounds);
        }
  
        var mapOptions = {
          center : { lat : 50, lng : 50 },
          zoom: 5,
        };
  
        var map = new google.maps.Map(document.getElementById("container"), mapOptions);
  
        var marker1 = new google.maps.Marker({
          position : {
            lat : 51,
            lng : 51,
          },
          title : "MARK1",
          optimized : false
        });
  
        var marker2 = new google.maps.Marker({
          position : {
            lat : 52,
            lng : 52,
          },
          title : "MARK2",
          optimized : false
        });
  
        marker1.setMap(map);
        marker2.setMap(map);
  
        document.getElementById('show').onclick = function() {
          //marker1.setVisible(true); // TODO - The original code was showing/hiding the markers but the issue is replicated without even doing this.
          //marker2.setVisible(true);
  
          changeBounds(true);
        }
  
        document.getElementById('hide').onclick = function() {
          //marker1.setVisible(false); // TODO - The original code was showing/hiding the markers but the issue is replicated without even doing this.
          //marker2.setVisible(false);
  
          changeBounds(false);
        }
      &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p><strong>Edit:</strong> I've reported this as a bug with Google.  See <a href="https://code.google.com/p/gmaps-api-issues/issues/detail?id=9912" rel="nofollow">https://code.google.com/p/gmaps-api-issues/issues/detail?id=9912</a></p>