Google map tiles on retina displaying incorrectly

Question

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.

Screenshot on Non-Retina (correct)

Screenshot on Retina (not correct)

Here's the 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&sensor=false&callback=initialize_map&key=<?php echo GOOGLE_MAPS_API_KEY; ?>";
      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 = [['<div class="info_content"><h5>Dublin</h5><p>Description here</p></div>'], ['<div class="info_content"><h5>Boston</h5><p>Description here</p></div>']];

      // Display multiple markers on a map
      var infoWindow = new google.maps.InfoWindow(),
          marker, i;

      // Loop through our array of markers & place each one on the map
      for (i = 0; i < 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);
      }
    }

Answer 1

答案是明确使用Google Maps 3.0版而不是3.exp。