Google maps responsive resize

Question

I'm trying to get google maps responsive and resize while keeping its center when windows resizes. I read other stack questions in regards such as:

Responsive Google Map? and Center Google Maps (V3) on browser resize (responsive)

from the second stack question I got a link which helps me with part of the code but I still have no luck. This is the code I am using, when I resize the window, the maps doesn't resize at all

    function initialize() {
      var mapOptions = {
       center: new google.maps.LatLng(40.5472,12.282715),
       zoom: 6,
       mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var map = new google.maps.Map(document.getElementById("map-canvas"),
                mapOptions);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    google.maps.event.addDomListener(window, "resize", function() {
     var center = map.getCenter();
     google.maps.event.trigger(map, "resize");
     map.setCenter(center); 
    });

html

 <div id="map-canvas"/>

css

html { height: 100% }
body { height: 100%; margin: 0; padding: 0; }
#map-canvas { height: 100%; }

@nilon I hadn't published it, but it was about how to set the center of a map in Google Maps using the Javascript API. — Guillermo Gutiérrez, Jan 04 '17 at 20:27

score 104 · Accepted Answer · answered Aug 26 '13 at 14:06

104

Move your map variable into a scope where the event listener can use it. You are creating the map inside your initialize() function and nothing else can use it when created that way.

var map; //<-- This is now available to both event listeners and the initialize() function
function initialize() {
  var mapOptions = {
   center: new google.maps.LatLng(40.5472,12.282715),
   zoom: 6,
   mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
 var center = map.getCenter();
 google.maps.event.trigger(map, "resize");
 map.setCenter(center); 
});

answered Aug 26 '13 at 14:06

rsnickell

1,262
1
9
6

Brilliant, this just worked perfectly, is there a way we add a change to the zoom too when we window resize? – rob.m Aug 26 '13 at 14:08
1

Yes, you can call map.setZoom( 4 ); or whatever level of zoom you need right after you call map.setCenter(). – rsnickell Aug 26 '13 at 14:09
yes just tried and it's fine, but what about getting -1 or +1, i mean, dynamically add or remove zooming? – rob.m Aug 26 '13 at 14:11
You can always use map.getZoom() to get the current level and increase/decrease your zoom level however you want. That may require a new question depending on how dynamic you want that functionality to be. – rsnickell Aug 26 '13 at 14:23
http://stackoverflow.com/questions/18446429/google-maps-set-different-zoom-based-on-window-resize – rob.m Aug 26 '13 at 14:26
3

You're right, but instead of cluttering the global scope with another variable, I'd recommend moving the `addDomListener(window, 'reszie'...)` declaration inside of the `initialize` function, which achieves the same result without [the risk that comes with global variables](http://yuiblog.com/blog/2006/06/01/global-domination/). – gfullam Apr 09 '15 at 05:08
That would certainly encapsulate the variables within the function scope. I didn't want to provide a solution drastically different than the question offered. Discerning the fix may or may not be understood by the reader based on the deviation and/or skill level. – rsnickell Apr 10 '15 at 17:44
1

This is the part that did it for me: `google.maps.event.addDomListener(window, "resize", function() { var center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); });` – Ricardo Zea Feb 22 '17 at 19:39

score 0 · Answer 2 · answered Apr 04 '20 at 22:48

After few years, I moved to leaflet map and I have fixed this issue completely, the following could be applied to google maps too:

    var headerHeight = $("#navMap").outerHeight();
    var footerHeight = $("footer").outerHeight();
    var windowHeight = window.innerHeight;
    var mapContainerHeight = headerHeight + footerHeight;
    var totalMapHeight = windowHeight - mapContainerHeight;
    $("#map").css("margin-top", headerHeight);
    $("#map").height(totalMapHeight);

    $(window).resize(function(){
        var headerHeight = $("#navMap").outerHeight();
        var footerHeight = $("footer").outerHeight();
        var windowHeight = window.innerHeight;
        var mapContainerHeight = headerHeight + footerHeight;
        var totalMapHeight = windowHeight - mapContainerHeight;
        $("#map").css("margin-top", headerHeight);
        $("#map").height(totalMapHeight);
        map.fitBounds(group1.getBounds());
    });

Google maps responsive resize

2 Answers2

Linked