Google map showing grey bands and looks distorted - wordpress

Question

For some reason, even though my Google map is showing, there are strange grey bands/lines running through the map (image link below).
Just for reference it uses the places API to search for locations.
Screenshot of the map issue
Anybody have any ideas why this might be? Here's the code for the map:
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places"></script>
<script type="text/javascript">
function search_map_init() {
var args = {
disableDefaultUI : true,
center : new google.maps.LatLng(51.6948168, -0.6433884),
mapTypeId : google.maps.MapTypeId.ROADMAP,
scrollwheel : false,
zoom : 12,
styles : [{"featureType":"water","elementType":"geometry","stylers":[{"color":"#e9e9e9"},{"lightness":17}]},{"featureType":"landscape","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":20}]},{"featureType":"road.highway","elementType":"geometry.fill","stylers":[{"color":"#ffffff"},{"lightness":17}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#ffffff"},{"lightness":29},{"weight":0.2}]},{"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":18}]},{"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"},{"lightness":16}]},{"featureType":"poi","elementType":"geometry","stylers":[{"color":"#f5f5f5"},{"lightness":21}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#dedede"},{"lightness":21}]},{"elementType":"labels.text.stroke","stylers":[{"visibility":"on"},{"color":"#ffffff"},{"lightness":16}]},{"elementType":"labels.text.fill","stylers":[{"saturation":36},{"color":"#333333"},{"lightness":40}]},{"elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#f2f2f2"},{"lightness":19}]},{"featureType":"administrative","elementType":"geometry.fill","stylers":[{"color":"#fefefe"},{"lightness":20}]},{"featureType":"administrative","elementType":"geometry.stroke","stylers":[{"color":"#fefefe"},{"lightness":17},{"weight":1.2}]}]
};
var map = new google.maps.Map(document.getElementById('map-canvas'), args);
var marker_url = {
url : 'IMG_URL',
scaledSize : new google.maps.Size(48, 65)
};
var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('pac-input'));
google.maps.event.addListener(searchBox, 'places_changed', function() {
searchBox.set('map', null);
var places = searchBox.getPlaces();
var bounds = new google.maps.LatLngBounds();
var i, place;
for (i = 0; place = places[i]; i++) {
(function(place) {
var marker = new google.maps.Marker({
position: place.geometry.location,
icon : marker_url
});
marker.bindTo('map', searchBox, 'map');
google.maps.event.addListener(marker, 'map_changed', function() {
if (!this.getMap()) {
this.unbindAll();
}
});
bounds.extend(place.geometry.location);
}(place));
var new_address = $('#pac-input').val();
var new_lat = place.geometry.location.lat();
var new_lng = place.geometry.location.lng();
$('input[name="post[meta_input][map][address]"]').val(new_address);
$('input[name="post[meta_input][map][lat]"]').val(new_lat);
$('input[name="post[meta_input][map][lng]"]').val(new_lng);
}
map.fitBounds(bounds);
searchBox.set('map', map);
map.setZoom(Math.min(map.getZoom(),12));
});
return map;
}
google.maps.event.addDomListener(window, 'load', search_map_init);
</script>
Note: I've replaced the API key and image URL with API_KEY and IMG_URL in the code above.

Answer 1

I was setting min-width in the CSS for something else which was also effecting the map display. Problem solved!