Google Maps loading strangely

Question

I'm using the Google Maps API (v3) on my website to show a map centered in a certain position.

This is my code:

<script type="text/javascript">
$(document).ready(function() {
    var latlng = new google.maps.LatLng(-22.924484, -43.208001);
    var map = new google.maps.Map(document.getElementById("map-property2"), {
        zoom: 13,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
});
</script>

At the end of my <head> I have:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Here's the result:

alt text

As you can see it's like there's two maps there.. But if I resize the window the map is fixed!

There's another problem: See the very top left corner of the map? This is the location of latlng variable.. That should be the center of the map, but it load as the top-left corner. :/

Ps.: There's no error or warning on my Firebug JS console.

I found a solution here: Major Google Maps glitch using API V3

And testing it I discovered another thing: I'm trying to load the map on a hidden div (not the map canvas, but the container that has it) that is shown when I click on a tab menu.

If the map load (using setTimeout) when the tab is active and the container is visible, the map loads ok.

I'm goin mad... really.

score 5 · Answer 1 · edited Apr 09 '13 at 18:39

5

If you have a map in a hidden div and then decide to show the div you need to trigger the resize event on the map.

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

edited Apr 09 '13 at 18:39

Dave Clemmer

3,741
12
49
72

answered Dec 03 '10 at 04:10

skarE

5,880
2
23
23

Thiago Belem · Accepted Answer · 2015-09-04T05:55:22.337

The problem is because you can't load the map with the container hidden... My solution was load the map after the tab is shown, with this code:

$('ul.tabs li a[rel="location"]').click(function() {
    setTimeout(function() {
        var latlng = new google.maps.LatLng(-22.924484, -43.208001);
        var map = new google.maps.Map(document.getElementById("map-property2"), {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: "Property location"
        });
    }, 500);
});

score 0 · Answer 3 · edited May 23 '17 at 10:32

0

I know you've already found the answer, but I've found 2 more interesting solutions:

Problems with Google Maps API v3 + jQuery UI Tabs

Keep a Google Maps v3 Map hidden, show when needed

edited May 23 '17 at 10:32

Community

1
1

answered Dec 03 '10 at 00:09

Ives.me

2,359
18
24

Google Maps loading strangely

3 Answers3

Linked