CODEWITHSUNDEEP
javascriptjqueryajaxgoogle-mapsgoogle-maps-api-3
Yucca by Yucca
Yucca by Yucca

Reputation: 54

Grey Box instead of Google Map after refreshing page

I have a Google Map with Markers on it. Each of the markers has an info-box associated with it. The information need to populate the info-box is fetched with an ajax call. The problem is, after selecting one of the markers which makes an ajax call, if completed successfully, whenever you refresh/reload the page the Google Map is just a grey box.

var map, markers = [];
var initMap = function (latitude, longitude) {
    var coords = new google.maps.LatLng(parseFloat(latitude), parseFloat(longitude));
    var mapOptions = {
        zoom: 8,
        minZoom:2,
        center: coords,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scaleControl: true
     }
     map = new google.maps.Map(document.getElementById('search-map'), mapOptions)
};
var infowindow = new google.maps.InfoWindow({
    maxWidth: 350,
    shadowStyle: 1,
    padding: 0,
    backgroundColor: 'rgb(57,57,57)',
    borderRadius: 4,
    arrowSize: 10,
    borderWidth: 1,
    borderColor: '#2c2c2c',
    arrowPosition: 30,
    arrowStyle: 2
});
var contentString = "stuff"
for(var i = 0; i < markers.length; i++) {
    var marker = new google.maps.Marker({
        position: markers[i][0],
        map: map,
        icon: markers[i][1]
    })
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            $.post($(ajaxURL, userIdObj, function(response) {
                infowindow.close();
                infowindow.setContent(contentString);
                infowindow.open(map, marker);
            })
        }
    })(marker, i));
}

Upvotes: 1

Views: 432

Answers (2)

Yucca by Yucca
Yucca by Yucca

Reputation: 54

So, just a quick update. Working on this task I actually experienced two types of "grey boxes." One where I could see the google logo at the bottom and one where I could not. If you can see the google logo at the bottom, as stated above you have to resize. Something along these lines: google.maps.event.trigger(map, 'resize'); If you can't see anything in the grey box, it is most likely an issue with the function that you initialize the map with in particular the center:new google.maps.LatLng(39.739318, -89.266507)

Upvotes: 1

wogsland
wogsland

Reputation: 9518

I've run into this too, but after drawing the map you need only resize it with something like

$('google-map').resize();

to make it visible.

Upvotes: 1

Related Questions