停止使用window.matchMedia运行的第二个地图脚本

Question

我们正在为一个客户端组建一个站点，这个站点使用两个地图但是一个被隐藏在移动设备上，这导致第二个地图工作但不加载地形只有位置引脚。

我对javascript很新，所以有没有办法阻止第一个地图脚本运行，同时允许第二个脚本只是在移动设备上运行？我被建议使用 window.matchMedia ，但不知道如何使用它。

有什么想法吗？

这是我们正在使用的地图脚本。我一直在使用window.matchMedia脚本。

    <!--- Window.matchMedia Script --->

<script>

    function myFunction(x) {

    if (x.matches) { // If media query matches

       document.body.style.backgroundColor = "#ff5353";

   } else {

       document.body.style.backgroundColor = "#ad00ff";

   }

        }

        var x = window.matchMedia("(max-width: 1500px)")

            myFunction(x) // Call listener function at run time

                x.addListener(myFunction) // Attach listener function on state changes

</script>

<!--- Gmap Script --->

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=API KEY&callback=initMap"
  type="text/javascript"></script>

<script type="text/javascript">
var geocoder;
var map;
var address = "Bideford,Devon";

function initMap() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeControl: false,
    zoomControl: true,
    disableDoubleClickZoom: true,
    scaleControl: false,
    scrollwheel: true,
    panControl: false,
    streetViewControl: false,
    draggable : true,
    overviewMapControl: false,
    mapTypeControlOptions: {
      styles: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: false,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles:[
    {
        "featureType": "all",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "saturation": 36
            },
            {
                "color": "#c9bd88"
            },
            {
                "lightness": 40
            },
            {
                "visibility": "on"
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "labels.text.stroke",
        "stylers": [
            {
                "visibility": "on"
            },
            {
                "color": "#000000"
            },
            {
                "lightness": 16
            }
        ]
    },
    {
        "featureType": "all",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 20
            }
        ]
    },
    {
        "featureType": "administrative",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 17
            },
            {
                "weight": 1.2
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 20
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 21
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.fill",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 17
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "geometry.stroke",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 29
            },
            {
                "weight": 0.2
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 18
            }
        ]
    },
    {
        "featureType": "road.local",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 16
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 19
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "geometry",
        "stylers": [
            {
                "color": "#000000"
            },
            {
                "lightness": 17
            }
        ]
    }
]
  };
  map = new google.maps.Map(document.getElementById("map"), myOptions);
  map2 = new google.maps.Map(document.getElementById("map2"), myOptions);
  if (geocoder) {
    geocoder.geocode({
      'address': address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
          map.setCenter(results[0].geometry.location);
          map2.setCenter(results[0].geometry.location);

          var infowindow = new google.maps.InfoWindow({
            content: '<b>' + address + '</b>',
            size: new google.maps.Size(150, 50)
          });

          var iconBase = 'https://daks2k3a4ib2z.cloudfront.net/597f0a54250f3500013ebc97/5992e4b5e91d6100019b55c5_'
          var marker = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map,
            title: address,
            icon: iconBase + 'gmap_icon_bg.png',
          });
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
          });

          var iconBase2 = 'https://daks2k3a4ib2z.cloudfront.net/597f0a54250f3500013ebc97/5992e4b5e91d6100019b55c5_'
          var marker2 = new google.maps.Marker({
            position: results[0].geometry.location,
            map: map2,
            title: address,
            icon: iconBase + 'gmap_icon_bg.png',
          });
          google.maps.event.addListener(marker2, 'click', function() {
            infowindow.open(map2, marker2);
          });

        } else {
          alert("No results found");
        }
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
}
//google.maps.event.addDomListener(window, 'load', initialize);

   </script>

先谢谢，杰米