/    Sign up×
Community /Pin to ProfileBookmark

center a GMAP on window resize

Copy linkTweet thisAlerts:
Jul 04.2014

can someone please help me, I am having trouble implementing this, i just want the map to center when the window is resized. But it wont eve load the map

[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>

<style>
#map {

position:absolute; top:0; left:0; width:100%; height:100%;
}
</style>
<script
src=”https://maps.googleapis.com/maps/api/js?sensor=false”>
</script>
<script>
var myOptions = {
center: new google.maps.LatLng(35.02, 111.02),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById(“map”), myOptions);

$(window).on(‘resize’, function(){var currCenter = map.getCenter();google.maps.event.trigger(map, ‘resize’);map.setCenter(currCenter);
});

</script>
</head>

<body>
<div id=”map”></div>
</body>
</html>

[/code]

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@thoughtmazeauthorJul 04.2014 — I manage to get this to work, but its kind of choppy on resize.. i still dont get why the first one didnt work.. maybe because i didnt position the div with a style like this one.. hmm..

<i>
</i>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;


&lt;/head&gt;

&lt;body&gt;
&lt;div id="map" style="position:absolute; top:0; left:0; width:100%; height:100%;"&gt;&lt;/div&gt;


&lt;script src="https://maps.googleapis.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
&lt;script&gt;
function initialize() {
var mapOptions = {
zoom: 14,
center: new google.maps.LatLng(44.051478, -79.480212), <br/>
mapTypeId: google.maps.MapTypeId.ROADMAP,

<i> </i> };
var map = new google.maps.Map(document.getElementById('map'),mapOptions);
}
google.maps.event.addDomListener(window, 'resize', initialize);
google.maps.event.addDomListener(window, 'load', initialize);

&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;

Copy linkTweet thisAlerts:
@thoughtmazeauthorJul 04.2014 — actually no what am I saying I did position the div
Copy linkTweet thisAlerts:
@Kevin2Jul 04.2014 — Your script is running before the DOM is built. Putting the scripts just before </body> fixes that and displays the map. You are using a line that indicates jQuery or other library should be uses [$(window).on...]. No library is being called so I commented it to eliminate that error. You are using <script> and <style> as they would be used in HTML5, but you have a XHTML1 DOCTYPE. That will throw validation errors. I changed the DOCTYPE to HTML5.

It still won't resize but at least it displays with no errors. You can figure it out from here.

[code=html]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>

<style>
#map {position:absolute; top:0; left:0; width:100%; height:100%;}
</style>
</head>

<body>
<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script>
var myOptions = {
center: new google.maps.LatLng(35.02, 111.02),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}

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

//$(window).on('resize', function(){var currCenter = map.getCenter();google.maps.event.trigger(map, 'resize');map.setCenter(currCenter);
//});

</script>

</body>
</html>[/code]
Copy linkTweet thisAlerts:
@xelawhoJul 04.2014 — simple enough to change that line to make it work without jQuery...

[CODE]
window.onresize = function(){var currCenter = map.getCenter();google.maps.event.trigger(map, 'resize');map.setCenter(currCenter);
};
[/CODE]
Copy linkTweet thisAlerts:
@thoughtmazeauthorJul 07.2014 — Amazing!, thanks guys! I'm a javascript noob. mostly work work with C, Java and VHDL.

But you go to love JavaScript!
Copy linkTweet thisAlerts:
@rootJul 08.2014 — More properly is ti use the window.onload function to run your code in the head which runs when the whole page has loaded.

Then your listener is set after the document is loaded because the element you are listening to is available to attach the event...
Copy linkTweet thisAlerts:
@Kevin2Jul 08.2014 — More properly is ti use the window.onload function to run your code in the head which runs when the whole page has loaded. [...][/QUOTE]

Ya, but I was lazy... ?
Copy linkTweet thisAlerts:
@xelawhoJul 08.2014 — More properly is ti use the window.onload function to run your code in the head which runs when the whole page has loaded.

Then your listener is set after the document is loaded because the element you are listening to is available to attach the event...[/QUOTE]

I'm struggling to see the advantage in putting this code in the head as opposed to before the closing </body> tag - all that does is make the html load slower, no?
×

Success!

Help @thoughtmaze spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...