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

Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -

i rendering jbutton image on simulate jcheckbox behavior. why don't let jtable render jcheckbox? because need bigger checkboxes , there's no way can resize them (as far know). so, have own table cell renderer , editor. both renders jbutton , checkbox images on them. trying change image checked image unchecked image (or vice versa) , update cell value (boolean true or false). however, reason, getcelleditorvalue() not update table. so, release mouse, value goes original one. any appreciated! lot! public class tableexample extends jframe { jscrollpane pane; jpanel panel; jtable table; object[][] data; mytablemodel tm; renderer buttoncolumn; public tableexample(object[][] data) throws ioexception { string[] columns = {"column#1", "column#2", "column#3", "column#4", "column#5", "column#6"}; this.data = data; this.setpreferredsize(new dimension(700, 500));
Read more