Menu
I have a page with two tabs. The first tab has photos and the second a google map. The problem is that the google map is not completely drawing because it is in a hidden div. So I moved the initialize() function to the href of the map tab using onclick(). This works the first time you click on it but when you return to the photos tab and then go back to the map tab the map only partially draws. If you click the map tab a second time it works perfectly. Any ideas?
tabs javascript:
<script type="text/javascript">
$(function () {
var tabContainers = $('div.tabs > div');
$('div.tabs ul.tabNavigation a').click(function () {
tabContainers.hide().filter(this.hash).show();
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
</script>
google maps javascript:
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(<?=$lat ?>, <?=$lng ?>);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"<?=$fulladdress ?>"
});
}
</script>
html:
<div class="tabs">
<ul class="tabNavigation">
<li><a href="#first">Photos</a></li>
<li><a href="#map_canvas" onclick="initialize(); return false;">Map</a></li>
</ul>
<div id="first"> </div>
<div id="map_canvas" ></div>
616
I've seen this before you need to resize the map:
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
This is for V3:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=1448
A little more info:
https://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/251f20b769d116ea/ba3ca54f5e1352a2?pli=1
190
After a day struggling with this, I followed the asker's link to his problem.
I saw this snippet some many times
google.maps.event.trigger(map, 'resize');
and I just couldn't find the right place to insert this piece of code. As a newbie in programming, I tried all places, which includes after the init, after calling the map, everywhere. Nothing worked.
Then I decided to follow a real situation, the person who actually asked this question. This is what he did, worked for him or her and it also worked for me. I did a minor change because it's always like that. His/her link is one of the comments.
My adobe DW doesn't give this option onclick, but... it works. You should try directly on the tag anchor where the div is hidden. It may be the proper place. Call the init and recenter at the body tag (or anchor tag). Once you click on the map, it will recenter the map.
<body onclick="initialize(); center_map();">
After the
function initialize {
....
}
Have this one
<script type="text/javascript">
function center_map() {
var center = map.getCenter();
document.getElementById("your_div_name").style.width = 'auto';
document.getElementById("your_div_name").style.height = '250px';
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
}
</script>
Attention newbies from all over the world: change the name of div above. Put your real sizes. Some people say you need real numbers in the size. But any time you click any part of body, it runs the function. Try to be more specific on you onclick function. Hope this helps someones.
29
This works for me:
google.maps.event.trigger(map, 'resize');
but, after the tab is shown...
$('a[href="#mytab"]').on('shown', function (e){
google.maps.event.trigger(map, 'resize'); moveTo();
}); // realocate the map
I am using bootstrap, find the similar function in jquery UI.
30
By following the link provided from Pete, I was able to resolve that.
You probably have a function called calcRoute(). You might need to trigger this function twice. At first, when it's triggered it loads fine, but you might need to trigger that function again as well when you change the tab. That should work!
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
