CODEWITHSUNDEEP
google-maps-api-3
jemz
jemz

Reputation: 5143

putting only symbolpath icon in current position

I am trying to put symbol path icon on the current position of the route,but the icon did not show on the map.

 var carPath = new google.maps.MVCArray();
 for ( var i = 0; i < path_start.length; i++) {
   if(i === 0) {
      carPath.push(path_start[i]);
     carPolyline.setPath(carPath);
   } else {
      setTimeout((function(latLng) {
      return function() {
        new google.maps.Marker({
                            map: map,
                            icon:{
                                path:google.maps.SymbolPath.FORWARD_CLOSED_ARROW,

                                scale:3,
                                strokeColor: 'white',
                                strokeWeight: 1,
                                fillOpacity: 0.8,
                                fillColor: 'orange',
                                offset: '100%'

                            },
                            position: path_start[i],

                        });
           carPath.push(latLng);
        };
      })(path_start[i]), 100 * i);
    }
   }

Thank you in advance.

http://jsfiddle.net/jemz24/kSKGs/3/

Upvotes: 0

Views: 1230

Answers (1)

geocodezip
geocodezip

Reputation: 161374

The name of the variable that holds the google.maps.LatLng object you need inside the anonymous function is latLng, not path_start[i]

working fiddle

Change:

    new google.maps.Marker({
                        map: map,
                        icon:{
                            path:google.maps.SymbolPath.FORWARD_CLOSED_ARROW,

                            scale:3,
                            strokeColor: 'white',
                            strokeWeight: 1,
                            fillOpacity: 0.8,
                            fillColor: 'orange',
                            offset: '100%'

                        },
                        position: path_start[i]
                    });

to:

    new google.maps.Marker({
                        map: map,
                        icon:{
                            path:google.maps.SymbolPath.FORWARD_CLOSED_ARROW,

                            scale:3,
                            strokeColor: 'white',
                            strokeWeight: 1,
                            fillOpacity: 0.8,
                            fillColor: 'orange',
                            offset: '100%'

                        },
                        position: latLng
                    });

More likely what you want updated fiddle

Add the icon to the polyline, don't make it a marker.

var lineSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
   var carPolyline = new google.maps.Polyline({
        map: map,
        geodesic : true,
        strokeColor : '#FF0000',
        strokeOpacity : 1.0,
        strokeWeight : 2,
        icons: [{
          icon: lineSymbol,
          offset: '100%'
        }],
    });

Upvotes: 1

Related Questions