Resizing Google Map According to Browser Resizing

Resizing google map according to browser resizing

i guess you have to resize your map_canvas as well.

so just add this to your resize()

//its maybe better to attach this handler to the window instead of the document
$(window).resize(function(){
        $('#map_canvas').css("height",$(window).height());
        $('#map_canvas').css("width",$(window).width());
        google.maps.event.trigger(map, 'resize');
        map.setZoom( map.getZoom() );
   });

so you have track of the resizing of your browserwindow :)

Making google maps responsive to resize

Set the style attributes on #map_canvas when the window.onresize event occurs:

window.onresize = function(event) {
    var style = document.getElementById('map_canvas').style;
    style.width = '100%';
    style.height = '100%';
    style.position = 'absolute';
    style.top = '42px';
    style.left = '0';
    style.right = '0';
    style.bottom = '0';
    style.z-index = '0';
    style.overflow = 'hidden';
    google.maps.event.trigger(map, 'resize');
    map.setZoom(map.getZoom());
}

A jQuery equiv taking into account the 42px at the top

window.onresize = function(event) {
    var el = $("#map_canvas");
    el.css("position", "absolute");
    el.css("top", "42px");
    el.css("left", "0px");
    el.css("right", "0px");
    el.css("bottom", "0px");
    el.css("width", "100%");
    el.css("height", $("body").height() - 42);
    el.css("overflow", "hidden");
    google.maps.event.trigger(Maps.map, 'resize');
    Maps.map.setZoom(Maps.map.getZoom());
}

Google maps responsive resize

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); 
});

How do I resize a Google Map with JavaScript after it has loaded?

If you're using Google Maps v2, call checkResize() on your map after resizing the container. link

UPDATE

Google Maps JavaScript API v2 was deprecated in 2011. It is not available anymore.

Center Google Maps (V3) on browser resize (responsive)

You need to have an event listener for when the window resizes. This worked for me (put it in your initialize function):

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});

google map show after screen resize?

call google.maps.event.trigger(map, 'resize') when your "div id=map" will be visible.
Please see How do I resize a Google Map with JavaScript after it has loaded?

make the width of my google-maps responsive

You need to make the width of #map_canvas in the css equal 100%. That way it'll stretch in relation to the width of the parent container. It'll still obey the min-width and max-width properties if those limits are reached when you resize your browser.

Google maps set different zoom based on window resize

Construct the area you want to always be in view by creating a LatLngBounds and call map.fitBounds() as suggested by geocodezip.

---

Related Topics