Карты Google с XML -файлом и пользовательскими маркерами, не загружаемыми на мобильный

Question

Я создал веб-сайт с Processwire и включил карту Google в индивидуальном стиле с несколькими маркерами из xml -файла. На рабочем столе это работает как шарм. Когда я использую Browserstack, даже мобильные телефоны показывают это правильно. Но в реальной жизни мобильные телефоны (Android и iOs) просто не будут показывать маркеры (.png).

Может ли кто-нибудь помочь с этим?

Вот мой код:

var xmlFile = 'http://website.ch/adressen.xml/';

var icons = {
  1: {
    icon: 'http://website.ch/site/templates/img/marker.png'
  }
};


function initMap() {
  var styledMapType = new google.maps.StyledMapType(
    [
      some styles for the map...
], {
      name: 'MapName'
    });

  var switzerland = new google.maps.LatLng(46.82235, 8.40440);

  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    var map = new google.maps.Map(document.getElementById('map'), {
    center: switzerland
    , zoom: 7
    , mapTypeControlOptions: {
      mapTypeIds: []
    }

  });
  } else { 
    var map = new google.maps.Map(document.getElementById('map'), {
      center: switzerland
      , zoom: 8
      , mapTypeControlOptions: {
        mapTypeIds: ['styled_map']
      }

    });
  }
  map.mapTypes.set('styled_map', styledMapType);
  map.setMapTypeId('styled_map');


  var infoWindow = new google.maps.InfoWindow;

  downloadUrl(xmlFile, function (data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName('marker');
    Array.prototype.forEach.call(markers, function (markerElem) {
      var id = markerElem.getAttribute('id');
      var name = markerElem.getAttribute('name');
      var address = markerElem.getAttribute('address');
      var city = markerElem.getAttribute('city');
      var link = markerElem.getAttribute('link');
      var type = markerElem.getAttribute('type');
      var point = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')), 
        parseFloat(markerElem.getAttribute('lng')));

      var infowincontent = document.createElement('div');
      var strong = document.createElement('strong');
      strong.textContent = name
      infowincontent.appendChild(strong);
      infowincontent.appendChild(document.createElement('br'));
      var street = document.createElement('text');
      street.textContent = address
      infowincontent.appendChild(street);
      infowincontent.appendChild(document.createElement('br'));
      var place = document.createElement('text');
      place.textContent = city
      infowincontent.appendChild(place);
      infowincontent.appendChild(document.createElement('br'));
      infowincontent.appendChild(document.createElement('br'));
      var a = document.createElement('a');
      a.setAttribute('href', link);
      a.setAttribute('target', '_blank');
      a.innerHTML = 'Website';
      infowincontent.appendChild(a);

      var marker = new google.maps.Marker({
        map: map
        , position: point
        , icon: icons[type].icon
      });
      marker.addListener('click', function () {
        infoWindow.setContent(infowincontent);
        infoWindow.open(map, marker);
      });
    });

  });
}


function downloadUrl(url,callback) {
 var request = window.ActiveXObject ?
     new ActiveXObject('Microsoft.XMLHTTP') :
     new XMLHttpRequest;

 request.onreadystatechange = function() {
   if (request.readyState == 4) {
     request.onreadystatechange = doNothing;
     callback(request, request.status);
   }
 };

 request.open('GET', url, true);
 request.send(null);
}

function doNothing() {}

Answer 1

Вам нужно включить отладку на телефоне, чтобы вы могли видеть, что происходит ...

Включить отладку по USB на вашем телефоне Android:

Вкл. Android 4.1 и ниже , экран параметров разработчика доступен по умолчанию. На Android 4.2 и выше выполните следующие действия:

1) Откройте приложение «Настройки».

2) Прокрутите страницу вниз и выберите О телефоне.

3) Открыть информацию о программном обеспечении

4) Прокрутите вниз и коснитесь Построить номер 7 раз (после нескольких нажатий вы увидите всплывающую подсказку).

5) Параметры разработчика теперь должны быть доступны из экрана настроек.

6) Прокрутите вниз и включите отладку по USB.

Подключите телефон к компьютеру, откройте Chrome и введите «chrome: // inspect». в адресную строку.

Вы сможете подключиться к своему телефону и начать отладку:

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews