How can I center and zoom Google Maps after resizing the map container?

Question

I have a map with many markers.

After resizing the map, it looks like this:

and I want this:

How can I zoom in and center the map on the markers after resizing?

I have the following code;

var map;

var GoogleMaps = {
  setMarkers: function(stores){
    map = new google.maps.Map(document.getElementById('map-canvas'));

    $.each(stores, function (key, store) {
      /* (..) */
      bounds.extend(latLng);
    });

    map.fitBounds(bounds);

    // This part is never triggered
    google.maps.event.addDomListener(window, 'resize', function() {
      var center = map.getCenter();
      google.maps.event.trigger(map, "resize");
      map.setCenter(center);    
    });
  }
}

HTML
When I click the resize icon, I add a css class to map-canvas

<div class="map-container alt-row row-spacer clearfix">
  <section class="column12">
    <div id="map-canvas" class=""></div>
  </section>
</div>

I've looked at similar questions (here and here), but they do not solve my problem.

Does anyone know how I can accomplish this? You can look at my JSFiddle here.

If you downvote, at least comment why. – Steven Aug 31 '15 at 10:17 — Steven, Aug 31 '15 at 10:17

score 0 · Answer 1 · edited Dec 03 '17 at 13:06

0

Re-setting the map to fit the bounds should work when the map div is resized:

google.maps.event.addDomListener(document.getElementById('map-canvas'), 'resize', function() {
  google.maps.event.trigger(map, "resize");
  map.fitBounds(bounds);
});

edited Dec 03 '17 at 13:06

Pedram

15,766
10
44
73

answered Aug 31 '15 at 09:50

geocodezip

158,664
13
220
245

The problem is that the DOM listener is never triggered. I tried and added `console.log('test')` - but no output. – Steven Aug 31 '15 at 10:17
I added the HTML code for the map. I think the listener is on the wrong DOM element. I tried `google.maps.event.addDomListener($('.map-container'), 'resize', ` but that didn't work either. – Steven Aug 31 '15 at 10:28
Is $('.map-container') a DOM element or an array of DOM elements? – geocodezip Aug 31 '15 at 13:46
It's the DIV that gets resized - as you can see above. – Steven Aug 31 '15 at 15:38
Looking closer at my code, I See that I'm adding a class to the `map-canvas` element. So it's not the container that gets resized, but the map canvas. That means using `document.getElementById('map-canvas')` should work. – Steven Aug 31 '15 at 15:49

score 0 · Answer 2 · answered Aug 31 '15 at 11:34

You could try idle instead of resize event for that purpose.

Example

var map;

var GoogleMaps = {
    setMarkers: function (stores) {
        map = new google.maps.Map(document.getElementById('map-canvas'));

        var bounds = new google.maps.LatLngBounds();
        $.each(stores, function (key, store) {

            var storePos = new google.maps.LatLng(store[1], store[2]);

            var marker = new google.maps.Marker({
                position: storePos,
                title: store[0],
                map: map
            });


            bounds.extend(storePos);
        });

        map.fitBounds(bounds);


        /*google.maps.event.addDomListener(map, 'resize', function () {
            var center = map.getCenter();
            google.maps.event.trigger(map, "resize");
            map.setCenter(center);
        });*/

        google.maps.event.addListener(map, 'idle', function (event) {
            var center = map.getCenter();
            map.setCenter(center);
            document.getElementById('result').innerHTML += 'Adjusted..';
        });
    }
}


google.maps.event.addDomListener(window, 'load', function () {
    var stores = [
        ['0183 Oslo, Norja', 59.918816, 10.751814],
        ['1154 Oslo, Norja', 59.873011, 10.814299],
        ['0264 Oslo, Norja', 59.916751, 10.705809]
    ];
    GoogleMaps.setMarkers(stores);
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map-canvas"></div>
<div id='result'/>

Thanks. I can't get it working though. Tried with both `resize` and `idle`. Can you take a look at my Fiddle? http://jsfiddle.net/d7fykbzm/6/ — Steven, Sep 01 '15 at 16:03

How can I center and zoom Google Maps after resizing the map container?

2 Answers2