google maps refreshing grey

Question

I\'m trying to add a Google Map to a jquery.mobile site javascript and the Google Maps API. The problem is that every time I load the map, most of the map is greyed

Answer 1

You should first get the Google Map Widget working before you start coding. You just need the Key ID, the latitude and longitude and use the app designer. The suggested zoom setting of 8 which comes up by default is adequate. Here are some details: http://hodentekmobile.blogspot.com/2016/07/intel-xdk-controls-6-using-google-map.html

Answer 2

To solve that problem you need to:

1. make sure the div where the map is displayed has a valid size, if it is hidden, it will have zero size and you will need to display the div before it will have a valid size. If it is sized using percentages, make sure that all of its parent elements either have a percent size or a specific size (see Mike Williams' Google Maps API v2 tutorial on the subject for details).

2. once it has a size initialize the map (if you haven't already)

3. if it was already initialized, trigger the resize event on it.

4. You may need to set the center of the map after triggering the resize event.

You haven't provided enough information to see where you are going wrong.