Google Maps Unoptimized Marker / fitBounds
<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>