CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
Sergi Juanola
Sergi Juanola

Reputation: 6647

Google Map looks moved inside the div

I'm having problems with google maps. I load the maps JS in a file where I append a modal div using ajax (and jquery), which contains the map. Something like the following image is what I got:

Correct map

However, when I "close" the modal (which removes the div and, thus, the map) and try to open it again, a problem occurs:

Moved map

Apart from looking incomplete, it looks like maps thinks its top left corner is some pixels out of the div. I assure you this, because when I try to move the map it refreshes its content and removes the "non-visible" (and unluckily visible, in this case) parts of the map. I'm leaving here the code I use to show the map (it's pretty straightforward, though).

var marker = null, geocoder, latLng, map = null;
geocoder = new google.maps.Geocoder();
latLng = new google.maps.LatLng(41.3865, 2.1648);
var myOptions = {
    zoom: 16,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: false
};
if(map === null) {
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function clearOverlays() {
    if (marker !== null) {
        marker.setMap(null);
        marker = null;
    }
}

function getPosition(address, title) {
    clearOverlays();

    geocoder.geocode({
            address : address,
            region : 'es'
        },
        function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                var result = results[0];
                latLng = result.geometry.location

                marker = new google.maps.Marker({
                    'title': title,
                    'map': map,
                    'position': latLng,
                    'animation': google.maps.Animation.DROP
                });
                map.setCenter(latLng);
            }
        }
    );
}

getPosition(place.address, place.title);

For the sake of the example, let's assume place is an object containing address and title

Upvotes: 2

Views: 579

Answers (1)

Chris Casad
Chris Casad

Reputation: 183

Version 2 had a checkresize() which I remember using in cases like this where the map would shift the center point. I think the v3 equivalent is something like this:

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

Upvotes: 4

Related Questions