css - Screenoverlay is being offset in google maps in Firefox/Chrome -


i generate kml produces screen overlay error message in event have no location data given record. when works, looks this:

working example

in 1 (consistent scenario) in firefox , chrome instead:

not-working example

the difference between , page works in both firefox , chrome, map container div positioned on left of page not working on (using position: absolute;) , set to: float: right; on page in works.

the relevant section of kml place image is:

<screenoverlay>   <icon>     <href>http://someurl.com/image.png</href>   </icon>   <overlayxy x="0.5" xunits="fraction" y="0.5" yunits="fraction" />   <screenxy x="0.5" xunits="fraction" y="0.5" yunits="fraction" />   <size x="0" xunits="pixels" y="0" yunits="pixels" /> </screenoverlay> 

google map settings / initialization:

function initialize() {     var latlng = new google.maps.latlng(64, -117);     var settings = {         zoom: 4,         maxzoom: 10,         center: latlng,         maptypecontrol: true,         maptypecontroloptions: { style: google.maps.maptypecontrolstyle.dropdown_menu },         navigationcontrol: true,         navigationcontroloptions: { style: google.maps.navigationcontrolstyle.small },         maptypeid: google.maps.maptypeid.satellite     };     var map = new google.maps.map(document.getelementbyid("mapcanvas"), settings);     var geolayer = new google.maps.kmllayer('@model.kmlurl');     geolayer.setmap(map); } 

div on page in works:

div#mapcanvas {  float: right;  border: 2px solid #666666;  width: 400px;  height: 300px;  -moz-border-radius: 5px;  border-radius: 5px; }  div#mapcontainer {  float: right;  width: 400px;  height: 300px;  margin-bottom: 10px; } 

div's on page not work:

div#mapcanvas {  border: 2px solid #666666;  width: 400px;  height: 300px;  -moz-border-radius: 5px;  border-radius: 5px; }  div#mapcontainer {  position: absolute;  top: 0;  left: 0;  width: 400px;  height: 300px;  padding: 5px; } 

my best guess has how divs moved around page loads, somehow interacting placement of image. have tried following:

  1. alternate placement code in css, no effect, if moves map elsewhere image still offset on page - making me think may way off track.
  2. unloading , reloading kml layer manually using javascript call once page loaded.

finally found offending css setting: div wrapped map container had set:

text-align: center; 

which apparently center screen overlay respect entire screen. if has explanation on why css interacts screenoverlay @ love know. hope helps else.

i corrected text-align: initial; set on css mapcanvas div.


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -