Javascript 手机和平板电脑上不显示自定义谷歌地图

我遇到了一些奇怪的事情，我的自定义谷歌地图在手机或平板电脑上都看不到。但是在桌面上，它工作得很好。我不能指出这个问题

我的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>';
    }
}

$（窗口）.bind（“加载”，函数（）{
如果（$（'#映射画布'）。长度）{
自定义谷歌地图（）；
}
});
函数CustomGoogleMaps（）{
//创建包含地图中心坐标的板条对象
var latlng=新的google.maps.latlng（52.145022,5.422421）；
var map=new google.maps.map（document.getElementById（'maps-canvas'）{
//选择权
缩放：18，//此数字可设置为定义地图的初始缩放级别
中心：拉特林，
mapTypeId:google.maps.mapTypeId.ROADMAP，//此值可设置为定义地图类型ROADMAP/SATELLITE/HYBRID/TERRAIN
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.SMALL，
位置：google.maps.ControlPosition.LEFT_底部
},
scaleControl：对，
街景控制：对，
街景控制选项：{
位置：google.maps.ControlPosition.LEFT_底部
}
});
//检测调整大小事件，并在启用调整大小时将标记保持在中心位置
google.maps.event.addDomListener（窗口，“调整大小”，函数（）{
var center=map.getCenter（）；
google.maps.event.trigger（map，“resize”）；
地图设置中心（中心）；
});
//定义标记属性
var imagePath=”http://google-maps-icons.googlecode.com/files/sailboat-tourism.png";
var image=new google.maps.MarkerImage（imagePath，
//此标记宽75像素，高101像素。
新谷歌地图尺寸（75101），
//此图像的原点为0,0。
新的google.maps.Point（0,0），
//这张图片的锚是18101处旗杆的底部。
新谷歌地图点（18101）
);
//添加标记
var marker1=新的google.maps.Marker({
位置：新google.maps.LatLng（52.145022,5.422421），
地图：地图，
icon:image，//此路径是要显示的自定义pin。请删除此行和前面的逗号以使用默认pin
动画：google.maps.animation.DROP，//为标记的放置效果设置动画
位置：车床//位置应为车床坐标
});
//添加侦听器以单击pin
google.maps.event.addListener（标记1，'click'，函数（）{
信息窗口1.打开（地图，标记1）；
});
//添加信息窗口
//在此处更改地址详细信息
var contentString=''
+ ''
+“公司名称”
+“
我的地址”；
var infowindow1=新建google.maps.InfoWindow({
content:contentString，
});
//创建信息窗口
函数createInfo（标题、内容）{
返回“”+标题+”
“+内容+”；
}
}

---

希望有人能在正确的道路上帮助我。

您如何将您的谷歌地图API脚本排队？这可能是一个时间问题。它在桌面上的加载速度可能快得多，因此当您的代码尝试调用时，它始终可用：

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

可能是库在移动设备上的加载速度较慢，因此在您尝试调用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
    }
})(); 

然后，在脚本排队时，实际上可以将回调作为参数传递，该函数将在google maps库可用后运行，如下所示：

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

以下是其工作原理：

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>

---

这里有一个比我的上述解决方案更简单的替代方案：

$(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>

---

如果这样做有效，我们至少知道这是一个时间问题。

不过，我的示例遵循的是揭示模块模式。我想对于您来说，一个更简单的方法是将您的CustomGoogleMaps函数作为回调传递给GoogleMaps脚本。非常感谢您的努力，但它仍然不起作用。你有可能换我的小提琴吗？

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