Question

I’m trying to load google map version3 with magento in tabs. The map is shown with grey parts that cover most of the map.

anyone can help me. Thanks in advance.

Answer 1

I have found a issue with google map version3 with magento in tabs and I got a solution after doing many R&D on google. I want to share with you…here is solution:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
 var latLng;
function initialize() {
var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: new google.maps.LatLng(26.937201,75.785672),
    scrollwheel: true,
    disableDefaultUI: true,
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP,

});


var infoWindow = new google.maps.InfoWindow;

var onMarkerClick = function() {
  var marker = this;
  var latLng = marker.getPosition();
  infoWindow.setContent("I'm here!!!!");

  infoWindow.open(map, marker);
};
google.maps.event.addListener(map, 'click', function() {
  infoWindow.close();
});


var marker1 = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(26.937201,75.785672)
});


google.maps.event.addListener(marker1, 'click', onMarkerClick);
  } 
 var GMaps = Class.create();
GMaps.prototype = {             }
var gmaps = null;
function switchGMapsTab(tab){
    if ( tab.tab.container.activeTab.id == 'googlemap_tabs_id'){
        if (!gmaps){
               initialize();
        }
    }
}
varienGlobalEvents.attachEventHandler('showTab', switchGMapsTab);    
</script>

visit on link also, it may also help you What is causing gray space on a Google Map using v3 API?

Thanks