Google Maps not filling up the entire div

Question

I've been trying to set up google maps on my website, but it's is only showing a fraction of it, the div remains empty. A lot of solutions suggest I include the resize function, but that doesn't seem to work. Here is my code:

function initialize() {
    var mapCanvas = document.getElementById('map_canvas');
    var mapOptions = {
        center: new google.maps.LatLng(42.378343, 20.427202),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions)
}

google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.trigger(map, "resize");

Map Canvas and it's wrapping div are both set to 100% width. All help is appreciated

Heres what it looks like: enter image description here

Can you recreate on JSFiddle? Got a feeling could be related to http://stackoverflow.com/questions/9141249/twitter-bootstrap-css-affecting-google-maps — David Nguyen, Nov 06 '14 at 15:29
My first feeling, is that the window (or the map-canvas) is resized after initialize. But any how, google.maps.event.trigger(map, "resize"); must be written within the initialize function; otherwise map does not exist yet. — Emmanuel Delay, Nov 06 '14 at 15:37

André Teixeira · Answer 1 · 2014-11-06T15:36:22.970

4

Try to trigger resize on your map when it is fully loaded:

google.maps.event.addListenerOnce(map, 'idle', function() {
    google.maps.event.trigger(map, 'resize');
});

edited Nov 06 '14 at 15:36

answered Nov 06 '14 at 15:14

André Teixeira

2,392
4
28
41

I get the same result as before – Granit Nov 06 '14 at 15:23
@Granit, can you share more details about how is your code calling GMaps? Are you using any javascript lib? – André Teixeira Nov 06 '14 at 15:37
Im using some jQuery to hide and show my map, but thats it. $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); – Granit Nov 06 '14 at 15:58
Yes, no results either. But if i manually resize my browser to mobile and then full screen, for some reason its covering the entire div! – Granit Nov 06 '14 at 16:02

score 1 · Answer 2 · edited Jan 04 '15 at 00:19

1

I called the map resize function after the panel was supposed to open, and map got resized the way i wanted to, filling up the div.

$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
        google.maps.event.trigger(map, "resize");
    });
});

edited Jan 04 '15 at 00:19

André Teixeira

2,392
4
28
41

answered Nov 07 '14 at 18:43

Granit

127
1
11

Google Maps not filling up the entire div

2 Answers2