谷歌地图不按预期工作

Question

我知道这个问题与大小有关，但不知何故我无法解决它。

Here是我工作的链接。

如果你到顶部的位置选项卡，并在其上点击，那么你就可以看到野生动物园，也完全是灰色地带，在其他浏览器中，如果你不点击后移动鼠标位置标签，然后地图将部分灰色。

对于其他浏览器，

我使用下面的代码来解决灰色地带的问题：

$("#mega-menu-item-581").mouseover(function(){ 
    $("#menuLocateStore").focus(); 
    google.maps.event.trigger(menuMap, 'resize'); 
}); 

但在Safari中，不知道如何解决it.Can任何人指导我在这？

即使我试图在mouseover事件之后初始化没有任何成功。

我试过的其他事情是在超时后初始化，但仍然没有给我任何成功。

我正在使用的代码被添加到snippest中。

var searchStoreField = document.getElementById('menuLocateStore'); 
 

 
var autocomplete = new google.maps.places.Autocomplete(searchStoreField); //Autocomplete the address 
 
\t 
 
var menu_geocoder, menu_map, menu_infoWindow, menu_directionsDisplay, menu_directionsService, menu_geolocationLatlng, menu_markerClusterer, 
 
\t menu_markersArray = [], 
 
\t menu_directionMarkerPosition = {}, 
 
\t menu_mapDefaults = {}, 
 
\t menu_resetMap = false, 
 
\t menu_streetViewAvailable = false, 
 
\t menu_startMarkerData, 
 
\t menu_startAddress, 
 
\t menu_autoLoad = true, 
 
\t menu_startLatLng; \t 
 

 
function initializeMenuMap() { 
 
\t var menu_myOptions, menu_zoomControlPosition, menu_zoomControlStyle, menu_latLng, menu_zoomLevel, menu_mapType, menu_streetViewVisible; 
 
\t 
 
\t /* If no zoom location is defined, we show the entire world */ \t 
 
\t menu_startLatLng = new google.maps.LatLng(57.758665, -101.705156); 
 
\t menu_zoomLevel \t = 12; 
 

 

 
\t menu_geocoder \t  = new google.maps.Geocoder(); 
 
\t menu_infoWindow \t \t = new google.maps.InfoWindow(); 
 
\t menu_directionsDisplay = new google.maps.DirectionsRenderer(); 
 
\t menu_directionsService = new google.maps.DirectionsService(); 
 

 
\t /* Set correct the position of the controls */ \t \t 
 
\t menu_zoomControlPosition = google.maps.ControlPosition.RIGHT_CENTER 
 

 

 
\t /* Set correct control style */ \t 
 
\t menu_zoomControlStyle = google.maps.ZoomControlStyle.SMALL 
 

 
\t /* Set the selected map type */ 
 
\t menu_mapType = google.maps.MapTypeId.ROADMAP 
 

 
\t menu_myOptions = { 
 
\t \t zoom: menu_zoomLevel, 
 
\t \t center: menu_startLatLng, 
 
\t \t mapTypeId: menu_mapType, 
 
\t \t // mapTypeControl: true, 
 
\t \t // mapTypeControlOptions: { 
 
\t \t \t // style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
 
\t \t \t // position: google.maps.ControlPosition.BOTTOM_CENTER 
 
\t \t // }, 
 
\t \t //panControl: false, 
 
\t \t //streetViewControl: false, 
 
\t \t //zoomControl: true, 
 
\t \t zoomControlOptions: { 
 
\t \t \t style: menu_zoomControlStyle, 
 
\t \t \t position: menu_zoomControlPosition 
 
\t \t }, 
 
\t \t //scaleControl: true, 
 
\t }; 
 

 
\t menu_map = new google.maps.Map(document.getElementById("menuMap"), menu_myOptions); 
 
\t 
 
} 
 
\t 
 
function addMarker(latLng, storeId, infoWindowData, draggable) { 
 
\t var menu_markerPath, menu_mapIcon, menu_marker, 
 
\t \t keepStartMarker = false; 
 
\t 
 
\t // if (storeId === 0) { 
 
\t \t // markerPath = wpslSettings.path + "img/markers/" + wpslSettings.startMarker; 
 
\t // } else { 
 
\t \t // markerPath = wpslSettings.path + "img/markers/" + wpslSettings.storeMarker; 
 
\t // } 
 
\t 
 
\t // mapIcon = { 
 
\t \t // url: markerPath, 
 
\t \t // scaledSize: new google.maps.Size(24,35), //retina format 
 
\t \t // origin: new google.maps.Point(0,0), 
 
\t \t // anchor: new google.maps.Point(12,35) 
 
\t // }; 
 
\t 
 
    menu_marker = new google.maps.Marker({ 
 
\t \t position: latLng, 
 
\t \t map: menu_map, 
 
\t \t optimized: false, //fixes markers flashing while bouncing 
 
\t \t title: infoWindowData.store, 
 
\t \t draggable: draggable, 
 
\t \t storeId: storeId, 
 
\t }); \t 
 
\t \t 
 
    /* Store the marker for later use */ 
 
    menu_markersArray.push(menu_marker); \t 
 
\t 
 
    google.maps.event.addListener(menu_marker, "click", function() { 
 
\t \t //setInfoWindowContent(menu_marker, createInfoWindowHtml(infoWindowData, storeId, menu_streetViewAvailable)); 
 
    }); 
 

 
} 
 

 
function createInfoWindowHtml(infoWindowData, storeId, streetViewAvailable) { 
 
    var storeHeader, url, 
 
\t \t address2 = "", 
 
\t \t newWindow = "", 
 
\t \t streetView = "", 
 
\t \t zoomTo = "", 
 
\t \t windowContent = "<div data-store-id='" + storeId + "'>"; 
 
    
 
\t \t 
 
\t \t 
 
\t \t windowContent += "<a class='infoWindowStore' href='/?page_id=579&store_id="+storeId+"'>"+infoWindowData.store+"</a>"; \t 
 
\t \t windowContent += "</div>"; 
 

 
    return windowContent; 
 
} 
 

 
function setInfoWindowContent(marker, InfoWindowContent) { 
 
\t menu_infoWindow.setContent(InfoWindowContent); 
 
\t menu_infoWindow.open(menu_map, marker); 
 
} 
 

 
function fitBounds() { 
 
    var i, markerLen, 
 
\t \t maxZoom = 12, 
 
\t \t bounds = new google.maps.LatLngBounds(); 
 

 
    /* Make sure we don't zoom to far */ 
 
    google.maps.event.addListenerOnce(menu_map, "bounds_changed", function(event) { 
 
\t \t if (this.getZoom() > maxZoom) { 
 
\t \t \t this.setZoom(maxZoom); 
 
\t \t } 
 
    }); 
 

 
    for (i = 0, markerLen = menu_markersArray.length; i < markerLen; i++) { 
 
\t \t bounds.extend (menu_markersArray[i].position); 
 
    } 
 

 
    menu_map.fitBounds(bounds); 
 
} 
 

 
function deleteOverlays(keepStartMarker) { 
 
\t var markerLen, i, keepStartMarker=false; 
 
    menu_directionsDisplay.setMap(null); 
 
\t 
 
    /* Remove all the markers from the map, and empty the array */ 
 
    if (menu_markersArray) { 
 
\t \t for (i = 0, markerLen = menu_markersArray.length; i < markerLen; i++) { \t \t \t 
 
\t \t \t /* Check if we need to keep the start marker, or remove everything */ 
 
\t \t \t if (keepStartMarker) { 
 
\t \t \t \t if (menu_markersArray[i].draggable != true) { 
 
\t \t \t \t \t menu_markersArray[i].setMap(null); 
 
\t \t \t \t } else { 
 
\t \t \t \t \t startMarkerData = menu_markersArray[i]; 
 
\t \t \t \t } 
 
\t \t \t } else { 
 
\t \t \t \t menu_markersArray[i].setMap(null); 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t menu_markersArray.length = 0; 
 
    } 
 
} 
 

 
/* Trigger the search when the user presses "enter" on the keyboard */ 
 
$("#menuLocateStore").keydown(function (event) { 
 
    var keypressed = event.keyCode || event.which; 
 
\t 
 
    if (keypressed == 13) { 
 
\t \t $(".locateButton").trigger("click"); 
 
    } 
 
}); 
 

 
$(".locateButton").click(function(){ 
 
\t 
 
\t var keepStartMarker=false; 
 
\t deleteOverlays(keepStartMarker); 
 

 
\t var geocoder = new google.maps.Geocoder(); 
 
\t 
 
\t var address = $("#menuLocateStore").val(); 
 

 
\t geocoder.geocode({ 'address': address}, function(results, status) { 
 

 
\t \t if (status == google.maps.GeocoderStatus.OK) { 
 
\t \t \t var latitude = results[0].geometry.location.lat(); 
 
\t \t \t var longitude = results[0].geometry.location.lng(); 
 
\t \t \t var mapData = { 
 
\t \t \t \t action: "search_store", 
 
\t \t \t \t lat: latitude, 
 
\t \t \t \t lng: longitude 
 
\t \t \t }; 
 
\t 
 
\t \t \t var draggable=false; 
 
\t \t \t $.get(ajaxurl, mapData, function(response) { 
 
\t \t \t \t if (response.success !== false) { 
 
\t \t \t \t \t if (response.length > 0) { 
 
\t \t \t \t 
 
\t \t \t \t \t \t $.each(response, function(index) { 
 
\t \t \t \t \t \t \t infoWindowData = { 
 
\t \t \t \t \t \t \t \t \t \t \t \t store: response[index].store, 
 
\t \t \t \t \t \t \t \t \t \t \t \t address: response[index].address, 
 
\t \t \t \t \t \t \t \t \t \t \t \t address2: response[index].address2, 
 
\t \t \t \t \t \t \t \t \t \t \t \t city: response[index].city, 
 
\t \t \t \t \t \t \t \t \t \t \t \t country: response[index].country, 
 
\t \t \t \t \t \t \t \t \t \t \t \t state: response[index].state, 
 
\t \t \t \t \t \t \t \t \t \t \t \t zip: response[index].zip, 
 
\t \t \t \t \t \t \t \t \t \t \t \t description: response[index].description, 
 
\t \t \t \t \t \t \t \t \t \t \t \t phone: response[index].phone, 
 
\t \t \t \t \t \t \t \t \t \t \t \t fax: response[index].fax, 
 
\t \t \t \t \t \t \t \t \t \t \t \t url: response[index].url, 
 
\t \t \t \t \t \t \t \t \t \t \t \t email: response[index].email, 
 
\t \t \t \t \t \t \t \t \t \t \t \t hours: response[index].hours, 
 
\t \t \t \t \t \t \t \t \t \t \t \t thumb: response[index].thumb 
 
\t \t \t \t \t \t \t \t \t \t \t }; 
 

 
\t \t \t \t \t \t \t latLng = new google.maps.LatLng(response[index].lat, response[index].lng); \t 
 
\t \t \t \t \t \t \t addMarker(latLng, response[index].id, infoWindowData, draggable); \t \t \t \t \t \t 
 
\t \t \t \t \t \t }); 
 
\t \t \t \t \t \t fitBounds(); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t else{ 
 
\t \t \t \t \t \t alert("No stores are near 50 Km from the address you have entered."); 
 
\t \t \t \t \t } \t 
 
\t \t \t \t } 
 
\t \t \t \t else{ 
 
\t \t \t \t \t alert("There is some problem. Please try after some time."); 
 
\t \t \t \t } 
 
\t \t \t }); \t \t \t \t 
 
\t \t } 
 
\t \t else{ 
 
\t \t \t alert("sorry! There is Error !!!"); 
 
\t \t } 
 
\t }); \t 
 
}); 
 

 
google.maps.event.addDomListener(window, "load", initializeMenuMap);

EDITED

当我检查tilesloaded，当时它显示我tilesloaded。

如果加载了瓷砖，那么它为什么会显示Safari中的灰色区域？

EDITED

好了，所以当我检查到网络中，我发现所有的瓦片被下载和perfect.So什么可能是灰色地带的问题？

Answer 1

试试这个代码：

$("#mega-menu-item-581").mouseover(function(){ 
    $("#menuLocateStore").focus(); 
    initializeMenuMap(); 
});