javascript - Google maps responsive resize -
i'm trying google maps responsive , resize while keeping center when windows resizes. read other stack questions in regards such as:
responsive google map? , center google maps (v3) on browser resize (responsive)
from second stack question i got link helps me part of code still have no luck. code using, when resize window, maps doesn't resize @ 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% }
move map variable scope event listener can use it. creating map inside initialize() function , nothing else can use when created way.
var map; //<-- available both event listeners , 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); });
Comments
Post a Comment