在移動設備和平板電腦上不顯示自定義Google地圖

Question

我遇到了一些奇怪的事情，我的自定義Google地圖在手機或平板電腦上不可見。但在桌面上，它工作正常。我無法解決問題。

我的HTML如下：

<div class="wrapper"> 
    <div id="maps-canvas"></div> 
    <div class="clearfix"></div> 
</div> 

而且我的自定義JS：

$(window).bind("load", function() { 
    if ($('#maps-canvas').length) { 
     CustomGoogleMaps(); 
    } 
}); 

function CustomGoogleMaps() { 
    // Creating a LatLng object containing the coordinate for the center of the map 
    var latlng = new google.maps.LatLng(52.145022, 5.422421); 

    var map = new google.maps.Map(document.getElementById('maps-canvas'), { 
     //options 
     zoom: 18, // This number can be set to define the initial zoom level of the map 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, // This value can be set to define the map type ROADMAP/SATELLITE/HYBRID/TERRAIN 

     zoomControl: true, 
     zoomControlOptions: { 
      style: google.maps.ZoomControlStyle.SMALL, 
      position: google.maps.ControlPosition.LEFT_BOTTOM 
     }, 

     scaleControl: true, 
     streetViewControl: true, 
     streetViewControlOptions: { 
      position: google.maps.ControlPosition.LEFT_BOTTOM 
     } 
    }); 

    // Detect the resize event and keep marker in center when on resize 
    google.maps.event.addDomListener(window, "resize", function() { 
     var center = map.getCenter(); 
     google.maps.event.trigger(map, "resize"); 
     map.setCenter(center); 
    }); 

    // Define Marker properties 
    var imagePath = "http://google-maps-icons.googlecode.com/files/sailboat-tourism.png"; 
    var image = new google.maps.MarkerImage(imagePath, 
     // This marker is 75 pixels wide by 101 pixels tall. 
     new google.maps.Size(75, 101), 
     // The origin for this image is 0,0. 
     new google.maps.Point(0, 0), 
     // The anchor for this image is the base of the flagpole at 18,101. 
     new google.maps.Point(18, 101) 
    ); 

    // Add Marker 
    var marker1 = new google.maps.Marker({ 
     position: new google.maps.LatLng(52.145022, 5.422421), 
     map: map, 
     icon: image, // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin 
     animation: google.maps.Animation.DROP, // Animate drop effect of the marker 
     position: latlng // The position should be the latlng coordinates 
    }); 

    // Add listener for a click on the pin 
    google.maps.event.addListener(marker1, 'click', function() { 
     infowindow1.open(map, marker1); 
    }); 

    // Add information window 
    //change address details here 
    var contentString = '<div class="map-info-box">' 
    + '<div class="map-head">' 
    + '<h3>Company Title</h3></div>' 
    + '<p class="map-address">My Address</p>'; 

    var infowindow1 = new google.maps.InfoWindow({ 
     content: contentString, 
    }); 

    // Create information window 
    function createInfo(title, content) { 
     return '<div class="maps-info-window"><strong>' + title + '</strong><br />' + content + '</div>'; 
    } 
} 

See also my working jsfiddle。

希望有人能幫助我走上正確的道路。

Answer 1

下面是我上面的解決方案更簡單的選擇：

$(window).bind("load", function() { 
    // Remove this next block of code, or comment out, because I think it is calling your function before it is available 
    //if ($('#maps-canvas').length) { 
     //CustomGoogleMaps(); 
    //} 
}); 

相反，無論您是入隊你的腳本，添加該函數作爲回調：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=CustomGoogleMaps"></script> 

如果這個工作，我們至少知道這是一個計時問題。

Answer 2

你如何排隊你的谷歌地圖API腳本？這可能是一個計時問題。這可能是它加載更快在桌面上，因此它總是可用的，當你的代碼試圖調用：

var latlng = new google.maps.LatLng(52.145022, 5.422421); 
var map = new google.maps.Map(document.getElementById('maps-canvas') ..... 

這可能是該庫加載移動速度較慢，因此劇本ISN」在您嘗試調用google.maps函數時會做好準備，這會導致錯誤，從而阻止加載地圖。

在嘗試調用其函數之前，有一些方法可以確保您的庫已加載。這是我最近使用的方法：

CustomGoogleMaps = (function(){ 
    var googleMapsLoaded = $.Deferred(); 

    var init = function(){ 
     var self = this; 
     googleMapsLoaded.done(function(){ 
      self.initializeMap(); 
     }); 
    } 

    var initializeMap = function(){ 
     // initialize your map here 
     var map = new google.maps.Map("yourMapContainer") // etc.... 
    } 

    // rest of your google maps stuff here 

    return { 
     googleMapsLoaded : googleMapsLoaded, 
     init : init, 
     initializeMap : initializeMap 
    } 
})(); 

然後，你在哪裏進行排隊腳本，你實際上可以傳遞一個回調作爲參數，該函數將運行谷歌地圖圖書館可用之後，像這樣：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=CustomGoogleMaps.googleMapsLoaded.resolve"></script> 

何地你想初始化地圖：

CustomGoogleMaps.Init() 

這裏是如何工作的：

您的JS運行CustomGoogleMaps.Init（）函數。如果GoogleMapsLoaded承諾已經解決（意味着該庫已準備就緒），則您的initializeMap（）函數將繼續並立即運行。如果不是，它將等待該承諾得到解決。如果等待它來解決，一旦你的谷歌地圖的腳本加載時，它會運行

CustomGoogleMaps.googleMapsLoaded().resolve() 

這將解決的承諾，因此initializeMap（）函數（這是目前等待的承諾解決），將運行，你可以啓動你的地圖初始化。

編輯：

我的建議需要對你的代碼的一些比較顯著的結構性變化。一個更快的，更簡單的解決辦法是隻通過你的CustomGoogleMaps功能作爲一個回調，就像這樣：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?callback=CustomGoogleMaps"></script>