Home/ Questions/Q 3444308
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T08:53:56+00:00

I’m using the Google Maps API (v3) on my website to show a map

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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);
});
    • 0