Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I would like to create a map, that shows a vehicle traveled path. The map should shows arrowhead for each turning.

I need to show the map like this.

I can create the map by following code

 var flightPlanCoordinates = [
        new google.maps.LatLng(10.51178,76.197739),
        new google.maps.LatLng(10.512117,76.261253),
        new google.maps.LatLng(10.554309,76.322365),
        new google.maps.LatLng(10.56646,76.372833)
    ];
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      strokeColor: '#04770C',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

    flightPath.setMap(map);

I am using Google Maps API V3.

share|improve this question
    
how to remove these arrow heads?? –  user17459 Apr 23 '13 at 10:34
add comment

1 Answer 1

up vote 2 down vote accepted

The sample Google Map but updated for v3 is:

  // Creates markers with corresponding triangle icons
 ArrowHandler.prototype.create = function(p1, p2, mode) {
   var markerpos;
   var g = google.maps;
   if (mode == "onset") markerpos = p1;
   else if (mode == "head") markerpos = this.usePixelOffset(p1, p2);
   else if (mode == "midline") markerpos = g.geometry.spherical.interpolate(p1, p2, .5);

   // Compute the bearing of the line in degrees
   var dir = g.geometry.spherical.computeHeading(p1, p2).toFixed(1);
    // round it to a multiple of 3 and correct unusable numbers
    dir = Math.round(dir/3) * 3;
    if (dir < 0) dir += 240;
    if (dir > 117) dir -= 120;
    // use the corresponding icon
    var icon = this.addIcon("dir_" +dir+ ".png");
    var marker = new g.Marker({position: markerpos,
     map: map, icon: icon, clickable: false
    });
    if (mode == "head") {
     // Store markers with 'head' arrows to adjust their offset position on zoom change
     marker.p1 = p1;
     marker.p2 = p2;
     // marker.setValues({ p1: p1, p2: p2 });
     this.arrowheads.push(marker);
    }
  };

 ArrowHandler.prototype.load = function (points, mode) {
    for (var i = 0; i < points.length-1; i++) {
      var p1 = points[i],
      p2 = points[i + 1];
      this.create(p1, p2, mode); 
    }
 };

Example: http://www.wolfpil.de/v3/arrow-heads.html

share|improve this answer
    
Thanks @Mapperz, this help me lot, I have been searching 2 days for this code... –  Ashok KS Dec 12 '12 at 9:20
1  
I searched using Google (Advanced) took 2 minutes... Cheat Sheet googleguide.com/advanced_operators_reference.html –  Mapperz Dec 12 '12 at 14:50
    
Ohh Great...... –  Ashok KS Dec 13 '12 at 4:51
    
Hello @Mapperz, i would like to plot all the coordinates and show the direction only in certain points, for eg. want to plot 100 coordinates and show the directions only each 10 coordinates, can it be done by this code ??? –  Ashok KS Jun 22 '13 at 6:43
    
i got it, edited the js function, thx –  Ashok KS Jun 22 '13 at 8:52
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.