Direction arrow does not show, but polyline is showing in google map

Question

I am trying to draw the direction arrows for my poly line. My code does not show arrows but plots every markers with info windows and the poly line using my data set. I want to add arrows like this. http://jsfiddle.net/nX8U8/2/ Here is my code with .done function of ajax callback.

Can someone explain me what was the wrong I done.

var path1 = []; var poliLine;

function getData(){

    $.ajax({
        url: '/filter',
        dataType:'json',
        type: 'POST',
        data: {'mmsi':$('input[name=mmsi]').val(),'from': $("input[name='from']").val(), 'to': $("input[name='to']").val()}

    }).done(function(data) {
        initMap();
        console.log(data.length);
        console.log(data);
        $.each(data, function(index, obj){
            console.log( obj.latitude +  " - " +obj.longitude   );
            //console.log("helloooo");
            var pos = {lat: obj.latitude, lng: obj.longitude};
            path1.push({lat: parseFloat(obj.latitude), lng: parseFloat(obj.longitude)});

            contentString = "<p>" +obj.last_received_date+ "<br>"+obj.last_received_time+"</p>";
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            var circleIcon = {
                path: google.maps.SymbolPath.CIRCLE,
                fillColor: '#600d48',
                fillOpacity: 0.8,
                scale: 2,
                strokeColor: '#600d48'
            };
            var pathMarker = new google.maps.Marker({
                position: pos,
                icon: circleIcon,
                map: map
            });
            pathMarker.addListener('mouseover', function() {
                infowindow.open(map, pathMarker);
            });
            // assuming you also want to hide the infowindow when user mouses-out
            pathMarker.addListener('mouseout', function() {
                infowindow.close();
            });

        });
        var lineSymbol = {
            path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
        };

        var polylineoptns = {
            strokeOpacity: 0.8,
            strokeWeight: 3,
            path: path1,
            strokeColor: '#FF0000',
            strokeOpacity: 1.0,
            map: map,
            icons: [{
                icon: lineSymbol,
                repeat: '70px',
                offset: '100%'
            }],
        };
        polyline = new google.maps.Polyline(polylineoptns);

        path1 = [];

    }).always(function() {

    }).fail(function(jqXHR, textStatus, errorThrown) {
        alert('Error: ' + errorThrown);
    })

}

Show source
| javascript   | laravel   | php   | ajax   | google-maps   2016-11-08 11:11 0 Answers

Answers ( 0 )

◀ Go back