Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps API - Strange Map "Offset" Behaviour

I'm adding a map next to a form on my web page. The idea is that people can sign up, and when they type in their address and click search, it place-marks their house, they must do this before they submit the form (geolocation has a large role on my site).

Unfortunately, I have added the map, but within the map window the map itself appears to be offset. See the image below to illustrate what I mean:

alt text

I can only drag the map from within the "mapped" part of the box. If I select the grey area to drag the map around, it fails.

Any ideas what could cause this?

EDIT:

Here is my map-initialising Javascript, called on page load.

    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(52.428385,-3.560257);
    var myOptions = {
      zoom: 7,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("adminMap"), myOptions);

Here is my map CSS

#adminMap{
    float:left;
    width:270px;
    height:370px;
    margin-left:20px; 
}

Here is my map HTML

<div id="adminMap">
</div>
like image 611
Dan Hanly Avatar asked Jan 10 '11 14:01

Dan Hanly


1 Answers

I've seen things similar to this. Without access to any code, my best bet is that the map is initialized at a time when the container div is hidden. I've seen that cause such symptoms. Try to set up your map as you're showing it, rather than before.

like image 131
David Hedlund Avatar answered Oct 31 '22 10:10

David Hedlund