Пользовательские Карты 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(); 
    //} 
}); 

Вместо этого, где бы вы enqueueing ваш скрипт, добавьте эту функцию в качестве обратного вызова:

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

Если это работает, мы, по крайней мере, знаем, что это проблема синхронизации.

Answer 2

Как вы запускаете свой API API карт Google? Это может быть вопрос времени. Вполне возможно, что он загружается гораздо быстрее, на рабочем столе, и поэтому он всегда доступен, когда ваш код пытается вызвать:

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

Вполне возможно, что библиотека загружается медленнее на мобильный, и поэтому сценарий ISN» t к моменту, когда вы пытаетесь вызвать функции 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 
    } 
})(); 

Тогда, где вы enqueueing ваш сценарий, вы можете передать функцию обратного вызова в качестве параметра, и эта функция будет работать после того, как библиотека Google Maps доступна, как и :

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

И где бы вы пытаетесь инициализировать карту:

CustomGoogleMaps.Init() 

Вот как это работает:

Ваш JS запускает функцию CustomGoogleMaps.Init(). Если обещание GoogleMapsLoaded уже было разрешено (это значит, что библиотека готова), функция initializeMap() будет работать и запускаться немедленно. Если НЕ, он будет ЖДАТЬ, чтобы это обещание было разрешено. Если он ждет, что будет решена, как только ваш Google Maps сценариев нагрузки, он будет работать

CustomGoogleMaps.googleMapsLoaded().resolve() 

который разрешит обещание, и, следовательно, функция initializeMap() (который в настоящее время ожидания на обещание разрешить), запустится, и вы можете начать инициализацию карты.

EDIT:

Мое предложение требует некоторых относительно значительных структурных изменений в свой код.Более быстрый, более простое решение было бы просто передать вашу функцию CustomGoogleMaps как обратный вызов, как это:

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