Google Maps loading strangely
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.getE开发者_如何学运维lementById("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:
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.
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');
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);
});
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
加载中,请稍侯......
精彩评论