Resizing google map according to browser resizing

Question

i am working on google map api v3. map is perfectly showing on my page... problem is that when i resize the browser, map fit to its original size when i load the page...

initial state when i load the page enter image description here

when i resize the browser, map is still sized at initial state size.

enter image description here

[Code]

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <script src="http://code.jquery.com/jquery-1.7.2.js"></script> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type='text/javascript'> var point; var mrktx; function mshow() { $("#search_content").css("display",""); } function mhide() { $("#search_content").css("display","none"); } function load() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(ShowPosition) } else { alert("Browser does not support"); setTimeout( function(){ window.location = "../" },500); } function ShowPosition(position) { var lat = position.coords.latitude; var lng = position.coords.longitude; var cwidth = document.getElementsByTagName("body")[0].clientWidth; var cheight = document.getElementsByTagName("body")[0].clientHeight; //alert(cwidth + ',' + cheight); $("#body").css("overflow","hidden"); $("#map_canvas").css("position","absolute"); $("#map_canvas").css("overflow","auto"); $("#map_canvas").css("height",cheight); $("#map_canvas").css("width",cwidth); $("#map_canvas").css("z-index","99") $("#map_canvas").css("top","0"); $("#map_canvas").css("left","0em"); $("#top_nav").css("width",cwidth); $("#top_nav").css("height","8%"); var latlng = new google.maps.LatLng(lat,lng); var myOptions = { zoom: 11, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); $('document').resize(function(){ google.maps.event.trigger(map, 'resize'); map.setZoom( map.getZoom() ); }); var myMrkrTxt = ""; var infowindow = new google.maps.InfoWindow({ content : myMrkrTxt }); var myMrkr = new google.maps.Marker({position:latlng,map:map}); google.maps.event.addListener(myMrkr,'mouseover', function(){ infowindow.open(map,myMrkrTxt); }); google.maps.event.trigger(map, "resize"); } } </script> <style> #top_nav { position: absolute; z-index: 200; top: 0px; background-color: black; } #top_nav h2 { color: white; } body, html { height: 100%; width: 100%; } </style> </head> <body onload='load()'> <div id="map_canvas"></div> </body> </html>

cwallenpoole · Accepted Answer · 2013-11-05 18:35:21Z

7

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 :)

edited Nov 5, 2013 at 18:35

cwallenpoole

82.4k26 gold badges132 silver badges174 bronze badges

answered Jul 22, 2012 at 9:07

easteregg

5094 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Waqas Ghouri Over a year ago

i implement this.. and when i resizing my browser its comes in this function but my map remains constant width and height.... i also concatina this $(window).height() with this $(window).height()+'px' but not resizing my map....

Waqas Ghouri Over a year ago

i got solution.... i edit in my node. here i comment these lines in my code $("map_canvas").css("height",cheight); $("map_canvas").css("height",cheight); and add a <style> #map_canvas { height: 100%; width: 100%; } </style> i <head></head>

DagicCross · Accepted Answer · 2016-01-09 16:16:31Z

Same things can be done using only CSS too. I'll put an example below, use this if you like.

.google-maps { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

<div class="google-maps"> <iframe src="https://www.google.com/maps/yourmapsblah" width="765" height="500" frameborder="3" style="border:0" allowfullscreen></iframe> </div>

Good stuff linking to a fiddle, but it's also helpful to write the specific details down in your answer as well (e.g. the specific CSS that solves the problem).

Collectives™ on Stack Overflow

Resizing google map according to browser resizing

2 Answers 2

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Linked

Related