CODEWITHSUNDEEP
javascriptcssgoogle-maps-api-3
Dan Hanly
Dan Hanly

Reputation: 7839

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>

Upvotes: 11

Views: 3023

Answers (2)

jitender
jitender

Reputation: 1

To render the map fully again on changing div visibility you can use this code.

google.maps.event.trigger(map, 'resize');

This will rerender your map inside the div and will display it fully.

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129832

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.

Upvotes: 21

Related Questions