带有 XML 文件和自定义标记的 Google 地图未加载到移动设备上

Question

I've created a website with Processwire and included a custom styled Google map with several markers from an xml-file. On desktop, it works like charm. When I use Browserstack, even mobiles show it right. But real life, mobiles (Android and iOs) just won't show the markers (.png).

Could anyone help with this?

Here's my code:

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

You need to enable debugging on the phone so you can see what's going on...

Enable USB debugging on your Android phone:

On Android 4.1 and lower, the Developer options screen is available by default. On Android 4.2 and higher, do the following:

1) Open the Settings app.

2) Scroll to the bottom and select About phone.

3) Open Software Information

4) Scroll to the bottom and tap Build number 7 times (you'll see a tooltip after a few taps prompting you on).

5) Developer Options should now be accessible from the Settings screen.

6) Scroll down and enable USB debugging.

Plug your phone into your computer, open Chrome, and type "chrome://inspect" into the address bar.

You should be able to connect to your phone and start debugging:

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