CODEWITHSUNDEEP
javascripthtmlcssgoogle-mapsgoogle-maps-api-3
Colin747
Colin747

Reputation: 5013

Google Map not populating div correctly

I have a Google Map which is supposed to get the users location, centre on the their location and then provide directions to a fixed point on the map.

The problem is that the map is not populating the entire div nor is it centering or zooming to the right location it is however loading the users location and giving directions fine. If I recreate it in a jsFiddle though it works fine but when included in my site the problem described arises.

jsFiddle: http://jsfiddle.net/wXnjt/1/

How it looks when included in my site. Map Bug

What is causing this problem? (Let me know if you want my code posted in here rather than having to go to the fiddle)

EDIT: There is also no errors appearing in the dev console. I have also tried using preserveViewport: true but it had no effect.

Upvotes: 2

Views: 274

Answers (1)

Prakash Chennupati
Prakash Chennupati

Reputation: 3226

Your Google maps initialization should be in a function, if it's not make sure it is. Then you can only initialize the map after you toggle it, this will also make sure it doesn't get loaded if the user doesn't wish to see it.

function init_maps(){

    // google maps api goes here

}

var init = false;

$('.contact_us').click(){

    if(!init){

        init_maps();
        init = true;
    }

    $('.contact_us').slideToggle();

}

Upvotes: 2

Related Questions