How to manually reload Google Map with JavaScript

52

I am using this piece of code within a Bootstrap template. I am facing issues when loading images within a Bootstrap Tab content pane.

This is the JavaScript code which I use to initialize the Map:

var latlng = new google.maps.LatLng(50, 50);

var myOptions = {
    zoom: _zoom,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
};

var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: 'Google Office!'
});

I have not found any method(s) on the internet to manually reload a Google Map instance.

Is this possible and how? Thanks!

This question is tagged with javascript google-maps twitter-bootstrap

~ Asked on 2013-06-23 20:26:04

The Best Answer is


125

Yes, you can 'refresh' a Google Map like this:

google.maps.event.trigger(map, 'resize');

This basically sends a signal to your map to redraw it.

Hope that helps!

~ Answered on 2013-06-25 04:56:34


3

You can refresh with this:

map.panBy(0, 0);

~ Answered on 2018-09-07 10:20:23


Most Viewed Questions: