I'm facing a strange issue with Google Maps. When the map loads, all I see is a grey box with tools displayed, but no icons appear on the bottom-right corner - only white boxes.
If I move the map to the left, the left areas load properly; however, moving it to the right back to the initial position leaves the previously greyed area still greyed out and unrendered.
Zooming out reveals a straight line border from the north pole to the south pole, dividing the rendered area (left side) from the unrendered area (right side).
Is this a bug? How can I fix this issue?
I've tried calling the "resize" event on the map, but the problem persists. Below are the relevant code snippets:
Razor:
var googleMapSrc = @"https://maps.googleapis.com/maps/api/js?key=" + @ETrackerUser.ETrackerUserConfig._MapApiKey.Trim() + @"&callback=initMap";
HTML:
<div id="mapContainer" style="width:100%; height:100%">
</div>
Script:
<script type="text/javascript">
var locations = JSON.parse($('#CoordinatesModel').val());
var geocoder;
var map;
function initMap() {
setTimeout(function () {
var html = '<div id="map" style="height:600px;"></div>';
$('#mapContainer').html(html);
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: -25.363, lng: 131.044},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
google.maps.event.addListener(map, "idle", function () {
google.maps.event.trigger(map, 'resize');
});
}, 2000);
setTimeout(function () {
google.maps.event.trigger(map, 'resize');
map.setZoom(map.getZoom());
}, 5000);
}
</script>
<script async defer src="@googleMapSrc"></script>
Images:
Initial Load: https://i.sstatic.net/tO48s.png
Moved to the left of initial load:
https://i.sstatic.net/iuyqo.png
Zoomed Out:https://i.sstatic.net/Ltg5x.png
Note:
Even trying the simple map example code produces the same error.
Identified the Issue
The solution to my problem turned out to be quite silly. Switching to Internet Explorer resolved the rendering issues I was experiencing in Chrome. It's unclear if this is a bug or a configuration problem specific to Chrome.
If anyone has insight into this issue, I'd appreciate the help as I'm currently using Internet Explorer for now.