Карта полилинии, остановка рисования

Question

Версия Google maps: 3.37.1 Тестовая модель: iphoneX, IOS 12.4 Чародейская магия2, Android 9.0

нажмите кнопки, чтобы изменить дату и нарисовать карту
шаг: 1.Нажмите «точка1» -> «точка2» -> «точка3» -> «точка2». 2. карта остановит рисование.
Мы попробовали на панели инструментов устройства Chrome Toggle для имитации мобильных устройств, это работает. Мы также выяснили, если мы уменьшаем область отображения карты, эта проблема не будет возникать так часто. К настоящему времени мы установили карту, отображающую полноэкранный режим на мобильном устройстве, но проблемы с iOS встречаются чаще, чем с Android.

    var googleMap,
        googleMapLoaded,
        markers = [];

    var point1 = [{
        lat: "39.90419989999999",
        lng: "116.4073963",
        name: 1
    }, {
        lat: "47.790148349999996",
        lng: "64.48786675",
        name: 2
    }, {
        lat: "55.6760968",
        lng: "12.5683372",
        name: 3
    }]
    var point2 = [{
        lat: "55.6760968",
        lng: "12.5683372",
        color: "#FF0000",
        name: 4
    }, {
        lat: "41.38506389999999",
        lng: "2.1734035",
        color: "#FF0000",
        name: 5
    }, {
        lat: "41.90278349999999",
        lng: "12.4963655",
        color: "#FF0000",
        name: 6
    }, {
        lat: "47.497912",
        lng: "19.040235",
        color: "#FF0000",
        name: 7
    }, {
        lat: "50.0755381",
        lng: "14.4378005",
        color: "#FF0000",
        name: 8
    }]
    var point3 = [{
        lat: "47.6062095",
        lng: "-122.3320708",
        color: "#FF0000",
        name: 85
    }, {
        lat: "48.5342662",
        lng: "-123.0171242",
        color: "#FF0000",
        name: 84
    }, {
        lat: "48.993723",
        lng: "-122.7471191",
        color: "#FF0000",
        name: 83
    }, {
        lat: "48.0795365",
        lng: "-123.1018438",
        color: "#FF0000",
        name: 82
    }, {
        lat: "45.62722589999999",
        lng: "-122.6727305",
        color: "#FF0000",
        name: 81
    }]
    var points = []
    var polylines = []

    function initMap() {
        // Create the map.
        var mapOptions = {
            center: {
                lat: 39.90419989999999,
                lng: 116.4073963
            },
            zoom: 2

        };
        googleMap = new google.maps.Map(document.getElementById('mapCanvas'), mapOptions);
    }

    /**
     * Clears markers and directions from the map.
     */
    var clearMap = function() {
        while (markers.length > 0) {
            markers.pop().setMap(null);
        }
        clearMapDirections();
    };

    /**
     * Clears the directions from the map.
     */
    var clearMapDirections = function() {
        while (polylines.length > 0) {
            polylines.pop().setMap(null);
        }

    };
    var showMapMarkers = function(points) {
        // clear map
        clearMap();

        var mapPosition;
        // add points and compute bounds
        mapBounds = new window.google.maps.LatLngBounds();
        var i = 0;
        for (i = 0; i < points.length; i++) {
            var pointData = points[i];
            mapPosition = new window.google.maps.LatLng(pointData.lat, pointData.lng);

            var marker = new google.maps.Marker({
                position: {
                    lat: Number(pointData.lat),
                    lng: Number(pointData.lng)
                }
            })
            marker.setMap(googleMap);
            markers.push(marker);
            mapBounds.extend(mapPosition);
        }

        // calculate the center / bounds of the map view
        if (points.length === 1) {
            googleMap.setCenter(mapBounds.getCenter());
            googleMap.setZoom(10);
        } else {
            googleMap.fitBounds(mapBounds);
        }
        routeAndDisplayDirections(points)
    };
    /*
     * Polyline
     */
    var routeAndDisplayDirections = function(points) {

        if (points.length > 1) {
            // render a route for the points

            var gmapPoints = [];
            var i;
            for (i = 0; i < points.length; i++) {
                gmapPoints.push(new window.google.maps.LatLng(points[i].lat, points[i].lng));
            }
            var lines = new window.google.maps.Polyline({
                path: gmapPoints,
                geodesic: true,
                strokeColor: '#FF0000',
                strokeOpacity: 0.57,
                strokeWeight: 4
            });
            lines.setMap(googleMap);
            if (googleMap === googleMap) {
                polylines.push(lines);
            }
        }
    }

    $("#btn1").on("click", function() {
        showMapMarkers(point1)
    })
    $("#btn2").on("click", function() {
        showMapMarkers(point2)
    })
    $("#btn3").on("click", function() {
        showMapMarkers(point3)
    })