Alvin Stefanus Alvin Stefanus -4 years ago 103
CSS Question

Google Map Api: Map Greyed Out The First Load and The Greyed Area Cannot Load

I have a super weird problem with google map. There is no error on the console, but every time the map loads, it shows only grey box with all the tools are shown.

The bottom-right tools are shown, but there are no icons (icons are not showing, only the white boxes).

If I move the map to the left, All the left areas are loaded well, but if I move it to the right, the right to the initial position and so, the greyed area are still greyed, the map does not rendering the initial position area and to the right.

If zoom out the map, I can see there is a straight line border from north pole to south pole dividing the are which are rendered well (the left side from my initial position) and the right side (my initial position and to the right of it).

Is this a bug? How to fix this?

I tried to call "resize" event to the map, but the problem still persist.

Here are the codes:

Razor:

var googleMapSrc = @"https://maps.googleapis.com/maps/api/js?key=" + @ETrackerUser.ETrackerUserConfig._MapApiKey.Trim() + @"&callback=initMap";


The 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:
Initial Load

Move to the left of initial load:

Move left

Zoomed Out:Zoomed Out




Note:



I even try to use simple map example code and it still produce the same error.




Found the problem



This is very very stupid. When I use Internet Explorer, everything is fine. Currently my default browser is google chrome. Google chrome messed up this google map (so weird and so stupid).

I do not know if this is a bug or there is something wrong with my chrome configuration.

If someone know the problem, help me.

For now I am just gonna using Internet Explorer.

Answer Source

Ok there was something wrong with my site css. The img should have max-width: none !important only for the page.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download