Estou tentando desenhar uma rota entren pontos (lat, lan) usando o Google Maps v3. Para fazer isso eu estou usandoDirectionsService que me fornece uma rota, então eu estou empurrando essas coordenadas para umMVCArray e, em seguida, desenhando esse caminho usando umPolyline.

Aqui está um jsfiddle demonstrando essa parte do código aqui.

HTML:

<div id='map'></div>

CSS:

#map{
    width:400px;
    height:400px;
}

JavaScript:

$(function () {
    //The list of points to be connected
    var markers = [
        {
            "title": 'Duero',
            "lat": '40.480243',
            "lng": '-3.866172',
            "description": '1'
        },
        {
            "title": 'Reyes Catolicos',
            "lat": '40.477997',
            "lng": '-3.870865',
            "description": '2'
        },
        {
            "title": 'Guadarrama',
            "lat": '40.478998',
            "lng": '-3.878755',
            "description": '3'
        }
    ];

    var map;

    var mapOptions = {
        center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
        zoom: 15  ,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var path = new google.maps.MVCArray();
    var service = new google.maps.DirectionsService();

    var infoWindow = new google.maps.InfoWindow();
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var poly = new google.maps.Polyline({
        map: map,
        strokeColor: '#F3443C'
    });
    var lat_lng = new Array();

    path.push(new google.maps.LatLng(markers[0].lat, markers[0].lng));
    for (var i = 0; i < markers.length; i++) {
        if ((i + 1) < markers.length) {
            var src = new google.maps.LatLng(markers[i].lat, markers[i].lng);
            var des = new google.maps.LatLng(markers[i+1].lat, markers[i+1].lng);

            poly.setPath(path);
            service.route({
                origin: src,
                destination: des,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
            }, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                        path.push(result.routes[0].overview_path[i]);
                    }
                }
            });
        }
    }
});

Devo obter um conjunto de linhas retas, conectando os pontos (lat, lan) especificados na variávelmarkers, com a largura e a cor especificadas. Mais especificamentePoint 1 sendo conectadosomente paraPoint 2 que por sua vez está conectado aPoint 3

Com o código no violino, eu gostaria de ver o seguinte:

Eu recebo a imagem anterior, mas nem sempre. Se você atualizar, algumas vezes você conseguirá isso, o que acredito ser o resultado da adição de uma linha extra conectando os pontoscomo o corvo voano entanto, sendo um comportamento inconsistente que estou lutando para encontrar a fonte, simplifiquei o exemplo: você tem uma matriz de vértices o menor possível e, tanto quanto posso ver, o caminho que está sendo traçado deve ser o mesmo, já que os dados são os mesmos. É certo que eu nunca mergulhei na API do Google Maps com grande profundidade, então o código fonte é principalmente o resultado da cópia e colagem de amostras on-line, principalmenteeste que também sofre do mesmo problema.

Isso significa que eu posso estar usando uma versão desatualizada do Google Maps, inicializando-a incorretamente ou qualquer outro problema básico ou configuração incorreta. Ou, por outro lado, pode haver um problema com o cliente, digamos, a versão mais recente do Mac Chrome, pois aparentemente não está acontecendo no Chrome para Android no meu telefone (Nexus 5, mais recente, estoque)