2
私はそこにGoogleマップを持つウェブサイトを持っています。これはWordpressサイトで、サイトの各（カスタム）投稿には、Advanced Custom FieldsのMapsフィールドから生成されたいくつかの地理的位置のメタ値があります。私のカスタムGoogleマップのアイコンは、AndroidブラウザではなくPCのブラウザで表示されるのはなぜですか？
私は5つのカスタムアイコンを作成しました。これはWebサイトと同じサーバー上にホストされています。地図上に表示されるアイコンは、各投稿の別のカスタム値に基づいて異なります。合計でapprがあります。 180個のマーカーを同時に表示できます。
レンダリングマップをコンピュータで表示すると、カスタムアイコンが期待通りに読み込まれます。
しかし、Android携帯で同じページを表示すると、カスタムアイコンは無視され、代わりにデフォルトの赤いマーカーが読み込まれます。どうしてこれなの？
更新： 追加情報： 私の古いAndroidタブレット上で期待通りにを働くこと！それは私の携帯電話でが動作しません。 タブレットは、Android 4.4.2で動作するSamsung SM-T525です。 携帯電話はAndroid 7.0で動作するHuawei P9です。
これは、私が使用していますジャバスクリプトです：
(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);
これは、関連する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();