javascript - Google Maps with dynamic markers Circular tiling issue

Question

Map with Markers

I am getting this map as a result of following script:

<script>
       function Initialize() {

           google.maps.visualRefresh = true;
           var infowindow;
           $.ajax({
               type: "GET",
               url: "/api/Truck",
               dataType: 'json',
               contentType: 'application/x-www-form-urlencoded',
               success: function (data) {
                   var Center = new google.maps.LatLng(data[0].CurrentLatitude, data[0].CurrentLongitude);

                   var mapOptions = {
                       zoom: 8,
                       center: Center,
                       mapTypeId: google.maps.MapTypeId.ROADMAP
                   };

                   var gmap = new google.maps.Map(document.getElementById("myMap2"), mapOptions);
                   $.each(data, function (i, item) {
                       var marker = new google.maps.Marker({
                           'position': new google.maps.LatLng(item.CurrentLatitude, item.CurrentLongitude),
                           'map': gmap,
                           'title': item.TruckNumber
                       });
                       marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
                       google.maps.event.addListener(marker, 'click', function () {

                           if (infowindow) infowindow.close();
                           infowindow = new google.maps.InfoWindow({ content: "<div class='infoDiv'><h3>" + item.TruckNumber + "</h3></div>" });

                           infowindow.open(gmap, marker);
                       });
                   });   

               }

           })
       }
</script>

CSS:

myMap2 { 
  width: 1041px; 
  height: 370px; 
  position: relative; 
  overflow: hidden; 
}

I am just wondering why i am getting these circular tiles in map? i tried with differnt zooming values but still map shows these circles

Answer 1

You have a CSS rule somewhere on your page which is inherited by the map <div> which is equivalent to the following:

img {
  border-radius: 50%;
}

proof of concept fiddle