AppRoyale AppRoyale - 1 month ago 17
HTML Question

Google Maps is grey

I am using google maps in a mobile application using html and javascript. When the I load the map I am only able to see 5% of the map in the upper left corner. 95% of the div container is grey.
When I want to check the div with Firebug the whole map is loaded suddenly.
What can that be?
I tried already several Stackoverflow threads but no solution worked for me.
Thank you.

Code:

<link type="text/css" rel="stylesheet" href="jquery.mobile...>
<link type="text/css" rel="stylesheet" href="index.css">
<script type="text/javascript" src="jquery.mobile...>
</script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile...>
</script>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js">
</script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript">
</script>
<script type="text/javascript" charset="utf-8" src="index.js">
</script>

<div id="map" style="width: 700px; height: 700px;"></div>

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP

});

index.js
$(document).ready(function() {
$(window).resize(function() {
google.maps.event.trigger(map, 'resize');
});
});


When I use div attributes measured in % or em it doesnt work at all.

Answer

Try calling the resize method on document ready too:

$(document).ready(function() {
    $(window).resize(function() {
        google.maps.event.trigger(map, 'resize');
    });
    google.maps.event.trigger(map, 'resize');
});
Comments