javascript - Google Maps – Keep Icon, Infowindow, and Map Layer centered -

how can use javascript , css keep google maps icon, infowindow, , map layer centered? i've seen instances icon stays centered map layer not... want able set map's width 100% fills entire width of browser window, while keeping map icon, infowindow, , map layer centered.

example if resizes browser 1500px wide 800px wide map icon, infowindow, , map layer should stay centered @ times.

listed below working html, javascript, , css current map... given code how make correct adjustments keep map icon, infowindow, , map background layer centered.

html:

<div id="map-wrapper">      <div id="map-canvas" data-lat="40.7484404" data-lng="-73.9856554" data-address="empire+state+bldg,+350+5th+ave,+new+york,+ny+10118+united+states"></div> </div> 

javascript:

var mapid = document.getelementbyid('map-canvas');  var mapdatalat = mapid.getattribute('data-lat'); var mapdatalng = mapid.getattribute('data-lng'); var mapdataaddress = mapid.getattribute('data-address');  function initialize() {       var mapoptions = {         maptypeid: google.maps.maptypeid.roadmap,         maptypecontrol: false,         zoom: 14,         zoomcontrol: false,         pancontrol: true,         pancontroloptions: {             position: google.maps.controlposition.default         },         streetviewcontrol: false,         scalecontrol: false,         overviewmapcontrol: false,         center: new google.maps.latlng(mapdatalat, mapdatalng)     };      map = new google.maps.map(document.getelementbyid('map-canvas'),         mapoptions);      var infocontent = '<div class="window-content"><h4>empire state building</h4><a href="https://www.google.com/maps/dir/current+location/' + mbdatambaddress + '" target="_blank">directions</a></p></div>';      var infowindow = new google.maps.infowindow({         content: infocontent     });      var icon = {         path: 'm16.5,51s-16.5-25.119-16.5-34.327c0-9.2082,7.3873-16.673,16.5-16.673,9.113,0,16.5,7.4648,16.5,16.673,0,9.208-16.5,34.327-16.5,34.327zm0-27.462c3.7523,0,6.7941-3.0737,6.7941-6.8654,0-3.7916-3.0418-6.8654-6.7941-6.8654s-6.7941,3.0737-6.7941,6.8654c0,3.7916,3.0418,6.8654,6.7941,6.8654z',         anchor: new google.maps.point(16.5, 51),         fillcolor: '#ff0000',         fillopacity: 0.6,         strokeweight: 0,         scale: 0.66     };      var marker = new google.maps.marker({         position: new google.maps.latlng(mapdatalat, mapdatalng),         map: map,         icon: icon,         title: 'marker'     });       google.maps.event.addlistener(marker, 'click', function() {         infowindow.open(map,marker);     }); }  google.maps.event.adddomlistener(window, 'load', initialize); 

css:

#map-canvas {   min-width: 300px; /* want remove this, width set 100% */   width: 100%;   height: 300px;   margin: 0 auto; }  #map-canvas img {   max-width: none; } 

you need register dom listener center map when window resized.

for example:

// define global center variable var center = new google.maps.latlng(mapdatalat, mapdatalng); 

then in initialize function, register listener

// listen window resize event google.maps.event.adddomlistener(window, 'resize', centermap); 

then create function center map original position

function centermap() {      map.setcenter(center); } 

or if don't need specific function that, can do:

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