title: Google map tiles on retina displaying incorrectly
body: <p>I'm using V3 of the Google Maps API to display a map with a few markers. Everything works fine on non-retina devices, but on retina devices, the tiles are distorted making it appear like the markers are being shown in the wrong places.</p>
  
  <p>Screenshot on Non-Retina (correct)
  <a href="https://i.stack.imgur.com/C5xt6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/C5xt6.png" alt="Screenshot on Non-Retina (correct)"></a></p>
  
  <p>Screenshot on Retina (not correct)
  <a href="https://i.stack.imgur.com/LGMj9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LGMj9.png" alt="Screenshot on Retina (not correct)"></a></p>
  
  <p>Here's the code:</p>
  
  <pre><code>    jQuery(function($) {
        // Asynchronously Load the map API
        var script = document.createElement('script');
        script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;callback=initialize_map&amp;key=&lt;?php echo GOOGLE_MAPS_API_KEY; ?&gt;";
        document.body.appendChild(script);
      });
  
      function initialize_map() {
        var map;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
          mapTypeId: 'roadmap'
        };
  
        // Display a map on the page
        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  
        var markers = [['Dublin Ohio', 40.09316, -83.13382000000001], ['Boston, Massachusetts 02135', 42.340233, -71.15995900000001]];
        var infoWindowContent = [['&lt;div class="info_content"&gt;&lt;h5&gt;Dublin&lt;/h5&gt;&lt;p&gt;Description here&lt;/p&gt;&lt;/div&gt;'], ['&lt;div class="info_content"&gt;&lt;h5&gt;Boston&lt;/h5&gt;&lt;p&gt;Description here&lt;/p&gt;&lt;/div&gt;']];
  
        // Display multiple markers on a map
        var infoWindow = new google.maps.InfoWindow(),
            marker, i;
  
        // Loop through our array of markers &amp; place each one on the map
        for (i = 0; i &lt; markers.length; i++) {
          var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
          bounds.extend(position);
          marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0]
          });
  
          // Allow each marker to have an info window
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infoWindow.setContent(infoWindowContent[i][0]);
              infoWindow.open(map, marker);
            }
          })(marker, i));
  
          // Automatically center the map fitting all markers on the screen
          map.fitBounds(bounds);
        }
      }
  </code></pre>