Google Maps API 3 - 如果是移动设备则禁用

Question

希望在移动设备上浏览时禁用 Google 地图。如果浏览器窗口为 600 像素或以下，当前正在运行 CSS 以隐藏 div。

@media only screen and (max-width: 600px) {
    .mapCanvas {
        display: none;
    }
}

如果浏览器是 600px 或更小，如何禁止 JS 查询 Google Maps API？

这样即使地图没有显示，它也不会查询 API 服务器。

<div id="mapCanvas"></div>
<script>
    function initMap() {
        var map;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
            mapTypeId: 'roadmap'
        };

        // Display a map on the web page
        map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
        map.setTilt(50);

        // Multiple markers location, latitude, and longitude
        var markers = [ <?php echo $js_markers; ?>

        ];

        // Info window content
        var infoWindowContent = [ <?php echo $js_content; ?>

        ];

        // Add multiple markers to map
        var infoWindow = new google.maps.InfoWindow(), marker, i;

        // Place each marker on the map  
        for( i = 0; i < markers.length; i++ ) {
            var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
            bounds.extend(position);
            marker = new google.maps.Marker({
                position: position,
                map: map,
                title: markers[i][0]
            });

            // Add info window to marker    
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infoWindow.setContent(infoWindowContent[i][0]);
                    infoWindow.open(map, marker);
                }
            })(marker, i));

            // Center the map to fit all markers on the screen
            map.fitBounds(bounds);
        }

        // Set zoom level
        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
            this.setZoom(7);
            google.maps.event.removeListener(boundsListener);
        });

    }
// Load initialize function
google.maps.event.addDomListener(window, 'load', initMap);
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=???&callback=initMap"></script>

Answer 1

如果是移动设备，请不要包含 google maps API JS 文件

有点像

if (typeof window.orientation !== 'undefined') { ... }