在移动设备和平板电脑上不显示自定义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>