单击Google Maps API v3中的信息窗口后，奇怪的缩放控件

Question

I'm getting weird Zoom controls after clicking an infowindow on Google Maps API v3. See image via link below.

Can anybody help me with why this is happening? It seems to happen when I display the map in a webview in an Android app, but not when using Firefox.

An example of this can be found here: http://www.last-orders.net/shot_2014-03-25_19-23-44.png

My code is as follows:

function initialize() {
 var myLatlng = new google.maps.LatLng(mylat[0],mylng[0]);

   var mapOptions = {
   zoom: 14,
   center: myLatlng,
   disableDefaultUI: true,
   zoomControl: true

   }


  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var infoWindows = [];
  var myicon = [];
  var marker = [];


  for(var i = 0; i < mytitle.length; i++)
  {


      var myiconX = {
    url: "https://chart.googleapis.com/chart?chst=d_map_pin_icon&chld=beer" + "|" + mycol[i] + "|000000"
      };


      var myplaceX = new google.maps.LatLng(mylat[i],mylng[i]);
      var markerX = new google.maps.Marker({
          position: myplaceX,
          map: map,
          icon: myiconX,
          title: mytitle[i],
          infoWindowIndex : i  
      });

        var contentString = '<div id="content">' + mytitle[i] + '</div>';

        var infoWindow = new google.maps.InfoWindow({
            content : contentString

        });

        google.maps.event.addListener(markerX, 'click', 
            function(event)
            {
                infoWindows[this.infoWindowIndex].open(map, this);
            }
        );

        infoWindows.push(infoWindow);

        marker.push(markerX); 





   }


   myicon[0] = "http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=glyphish_walk|33CCFF|000000";



   marker[0] = new google.maps.Marker({
   position: myLatlng,
   map: map,
   icon: myicon[0],
   title: mytitle[0]
   });





   var bounds = new google.maps.LatLngBounds();

   for (var i=0; i < marker.length; i++) {

     if (marker[i] == null) {

      }
     else
      {
         bounds.extend(marker[i].getPosition());
      }

    }

    map.fitBounds(bounds);


}





google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

Are you by any chance using Bootstrap? Or viewing on a retina display? Recently bootstrap interfered with Google Maps on a site I was building, removing the bootstrap css fixed the issue. It only happened on retina screens. I think the fix I made into bootstrap's CSS file was really simple.

Answer 2

Found a solution to this. For the the InfoWindow.content use the string:

'<div><h3>'+ text + '</h3></div>'

Where text is the content to show in the InfoWindow. Somehow this resolved the problem of the weird Zoom Controls which I was seeing only on Kindle Fire devices.