What is causing gray space on a Google Map using v3 API? - magento

Question

I'm trying to load a map as per the example in the Google documentation, but it's not loading. I tried using resize, but it's not loading correctly. This map is behind a tab rendered with the Prototype JavaScript Framework which magento uses. It loads correctly when not behind a tab.
<style type="text/css">
#map_container { height:500px; width:700px;margin:0;}
</style>
<div id="map_container">
<div id="map_canvas" style="width:500px;height:500px;"></div>
</div>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=true">
</script>
<script type="text/javascript">
Event.observe( window, "load", function() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
;
google.maps.event.trigger(map, "resize");
});
</script>
The map is shown with grey parts that cover most of the map and the UI elements are not fully initialized. I tried using google.maps.event.trigger(map, "resize");, but it does not seem to do anything. This div is inside a lot of divs.

Answer 1

Example how to add new tab "GMaps" in Magento "Product Edit" (new tab "id" is 'product_info_tabs_GMaps')
PHP part
class My_Gmaps_Block_Adminhtml_Tabs_Gmaps extends Mage_Adminhtml_Block_Widget_Form
public function __construct() {
parent::__construct();
$this->setTemplate('my/gmaps/tabs/gmaps.phtml');
}
/............................./
}
Template part 'pwron/gmaps/tabs/gmaps.phtml':
<style>#map_canvas {width:100%; height:600px;}</style>
<div class="map" id="map_canvas"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var GMaps = Class.create();
GMaps.prototype = { .................... }
var gmaps = null;
function switchGMapsTab(tab){
if ( tab.tab.container.activeTab.id == 'product_info_tabs_GMaps'){
if (!gmaps){
gmaps = new GMaps({});
gmaps.update();
}
}
}
varienGlobalEvents.attachEventHandler('showTab', switchGMapsTab); <script>
trouble way
1. Created Map
2. Tab showed (not loads all tiles)
best way
1. Tab showed
2. Created Map

Answer 2

I had the same problem as you. But I managed to find the solution with this simple code.
First, go to the file where you put the tab template, search for the <li> tag that load your map tab and put this inside:
<li onclick="reloadmap()">
And in the map script right after the
google.maps.event.addDomListener(window, 'load', initialize);
put this:
function reloadmap(){
//when you resize the map, you lose your zoom and your center
//so you need to get them again here
z = map.getZoom();
c = map.getCenter();
google.maps.event.trigger(map, 'resize');
//and set them again here
map.setZoom(z);
map.setCenter(c);
}