Warum werden meine benutzerdefinierten Google Maps-Symbole in PC-Browsern angezeigt, nicht jedoch in Android-Browsern?

Question

Ich habe eine Website mit einer Google Map darauf. Dies ist eine Wordpress-Site, und jeder (benutzerdefinierte) Post auf der Site hat einige geografische Standort-Meta-Werte, die durch ein Maps-Feld von Advanced Custom Fields generiert werden.

Ich habe fünf benutzerdefinierte Symbole erstellt, die auf demselben Server wie die Website gehostet werden. Die Symbole, die auf der Karte angezeigt werden sollen, unterscheiden sich dann basierend auf einem anderen benutzerdefinierten Wert für jeden Beitrag. Es gibt insgesamt ca. 180 Marker werden gleichzeitig angezeigt.

Beim Anzeigen der gerenderten Karte mit einem Computer werden die benutzerdefinierten Symbole erwartungsgemäß geladen.

Wenn ich jedoch die gleiche Seite mit einem Android-Telefon ansehe, werden die benutzerdefinierten Symbole ignoriert, und stattdessen werden die roten Standardmarkierungen geladen. Warum ist das?

Update: Zusätzliche Informationen: Es auf meinem älteren Android-Tablet wie erwartet funktioniert! Es funktioniert nicht auf meinem Handy. Das Tablet ist ein Samsung SM-T525 mit Android 4.4.2. Das Telefon ist ein Huawei P9 mit Android 7.0.

Dies ist Javascript ich verwende:

(function($) { 
    function render_map($el) { 
    var $markers = $el.find('.marker'); 
    var args = { 
     zoom: 16, 
     center: new google.maps.LatLng(0, 0), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map($el[0], args); 
    map.markers = []; 
    $markers.each(function() { 
     add_marker($(this), map); 
    }); 
    center_map(map); 
    } 

    function add_marker($marker, map) { 
    var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng')); 
    var icon = $marker.attr('data-icon'); 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     icon: icon 
    }); 
    map.markers.push(marker); 
    if ($marker.html()) { 
     var infowindow = new google.maps.InfoWindow({ 
     content: $marker.html() 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map, marker); 
     }); 
    } 
    } 

    function center_map(map) { 
    var bounds = new google.maps.LatLngBounds(); 
    $.each(map.markers, function(i, marker) { 
     var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng()); 
     bounds.extend(latlng); 
    }); 
    if (map.markers.length == 1) { 
     map.setCenter(bounds.getCenter()); 
     map.setZoom(16); 
    } else { 
     map.fitBounds(bounds); 
    } 
    } 

    $(document).ready(function() { 
    $('.acf-map').each(function() { 
     render_map($(this)); 
    }); 
    }); 

})(jQuery); 

Dies ist relevant php:

$args = array(
'post_type' => 'customposttype', 
'posts_per_page' => -1, 
'post_status' => 'publish', 
'no_found_rows' => true 
); 
$mapquery = new WP_Query($args); 
if($mapquery->have_posts()): ?> 
<div class="acf-map" style="height:708px;"> 
    <?php 
     while ($mapquery->have_posts()): $mapquery->the_post(); 
     $personalmap = get_field('personalmap'); 
     $status = get_field('status'); 
     switch ($status) { 
      case "variant-one": 
       $markertype = 'https://example.com/wp-content/uploads/custommarker-one.png'; 
       break; 
      case "variant-two": 
       $markertype = 'https://example.com/wp-content/uploads/custommarker-two.png'; 
       break; 
      case "variant-three": 
       $markertype = 'https://example.com/wp-content/uploads/custommarker-three.png'; 
       break; 
      case "variant-four": 
       $markertype = 'https://example.com/wp-content/uploads/custommarker-four.png'; 
       break; 
      case "variant-five": 
       $markertype = 'https://example.com/wp-content/uploads/custommarker-five.png'; 
       break; 
      default: 
       $markertype = 'https://example.com/wp-content/uploads/custommarker-one.png'; 

     } ?> 
    <div class="marker" data-lat="<?php echo $personalmap['lat']; ?>" data-lng="<?php echo $personalmap['lng']; ?> "data-icon="<?php echo $markertype; ?>"></div> 
    <?php 
     endwhile; ?> 
</div> 
<?php 
endif; 
wp_reset_postdata(); 

Answer 1

-Und dann funktioniert es plötzlich. Warum habe ich keine Ahnung! (Das heißt: Warum es nicht funktionierte (auf Android-Handys) in erster Linie ist jenseits meines Wissens ...)

Ich habe einige Änderungen obwohl, aber ich verstehe nicht, warum sie dieses Problem bewirkt.

Javascript:

(function($) { 
function render_map($el) { 
    var $markers = $el.find('.marker'); 
    var args = { 
    zoom: 16, 
    center: new google.maps.LatLng(0, 0), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map($el[0], args); 
    map.markers = []; 
    $markers.each(function() { 
    add_marker($(this), map); 
    }); 
    center_map(map); 
} 

function add_marker($marker, map) { 
    var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng')); 
    var icon = $marker.attr('data-icon'); 
    var marker = new google.maps.Marker({ 
    position: latlng, 
    map: map, 
    icon: icon 
    }); 
    map.markers.push(marker); 
    if ($marker.html()) { 
    var infowindow = new google.maps.InfoWindow({ 
     content: $marker.html(), 
     maxWidth: 350 // This is added 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map, marker); 
    }); 
    google.maps.event.addListener(map, 'click', function() { //This is added 
     infowindow.close(); 
    }); 
    } 
} 

function center_map(map) { 
    var bounds = new google.maps.LatLngBounds(); 
    $.each(map.markers, function(i, marker) { 
    var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng()); 
    bounds.extend(latlng); 
    }); 
    if (map.markers.length == 1) { 
    map.setCenter(bounds.getCenter()); 
    map.setZoom(16); 
    } else { 
    map.fitBounds(bounds); 
    } 
} 

$(document).ready(function() { 
    $('.acf-map').each(function() { 
    render_map($(this)); 
    }); 
}); 

})(jQuery); 

Der php:

$args = array(
'post_type' => 'customposttype', 
'posts_per_page' => -1, 
'post_status' => 'publish', 
'no_found_rows' => true 
); 
$mapquery = new WP_Query($args); 
if($mapquery->have_posts()): ?> 
<div class="acf-map" style="height:708px;"> 
    <?php 
     while ($mapquery->have_posts()): $mapquery->the_post(); 
     $personalmap = get_field('personalmap'); 
     $status = get_post_meta(get_the_ID(),'status', 'true'); //This has changed 
     switch ($status) { 
      case "variant-one": 
       $markertype = 'https://example.com/wp-content/uploads/custommarker-one.png'; 
       break; 
      case "variant-two": 
       $markertype = 'https://example.com/wp-content/uploads/custommarker-two.png'; 
       break; 
      case "variant-three": 
       $markertype = 'https://example.com/wp-content/uploads/custommarker-three.png'; 
       break; 
      case "variant-four": 
       $markertype = 'https://example.com/wp-content/uploads/custommarker-four.png'; 
       break; 
      case "variant-five": 
       $markertype = 'https://example.com/wp-content/uploads/custommarker-five.png'; 
       break; 
      default: 
       $markertype = 'https://example.com/wp-content/uploads/custommarker-one.png'; 

     } ?> 
    <div class="marker" data-lat="<?php echo $personalmap['lat']; ?>" data-lng="<?php echo $personalmap['lng']; ?> "data-icon="<?php echo $markertype; ?>"> 
     <div class="mapinfo"> 
      <div class="mapinfo-title"> 
       <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> 
      </div> 
      <div class="mapinfo-content"> 
       <img src="<?php the_field('logo'); ?>" alt="<?php the_title(); ?>" height="83" width="83"> 
       <p><strong><?php the_field('some_value'); ?> texy <?php the_field('smoe_other_value'); ?></strong></p> 
      </div> 
     </div> 
    </div> 
    <?php 
     endwhile; ?> 
</div> 
<?php 
endif; 
wp_reset_postdata();