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:
in 1 (consistent scenario) in firefox , chrome instead:
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:
- alternate placement code in css, no effect, if moves map elsewhere image still offset on page - making me think may way off track.
- 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
Post a Comment