Merge branch 'master' of git://github.com/HPNeo/gmaps

Author: Juan Pablo Scaletti

README.md

@@ -8,6 +8,10 @@ Visit the examples in [hpneo.github.com/gmaps](http://hpneo.github.com/gmaps/)
 Changelog
 ---------
 
+0.1.8.10
+-----------------------
+* Better GMaps.Route methods
+
 0.1.8.9
 -----------------------
 * Fix typo in Polyline events

examples/examples.css

@@ -11,6 +11,9 @@ body{
   -webkit-box-shadow: 0px 5px 20px #ccc;
   box-shadow: 0px 5px 20px #ccc;
 }
+#map.large{
+  height:500px;
+}
 
 .overlay{
   display:block;

examples/travel_route.html

@@ -33,10 +33,16 @@
         $('#forward').click(function(e){
           e.preventDefault();
           route.forward();
+
+          if(route.step_count < route.steps_length)
+            $('#steps').append('<li>'+route.steps[route.step_count].instructions+'</li>');
         });
         $('#back').click(function(e){
           e.preventDefault();
           route.back();
+
+          if(route.step_count >= 0)
+            $('#steps').find('li').last().remove();
         });
       });
       map = new GMaps({
@@ -58,12 +64,18 @@
   <h1>GMaps.js &mdash; Travel route</h1>
   <div class="row">
     <div class="span16">
-      <div id="map"></div>
+      <div id="map" class="large"></div>
     </div>
     <div class="span5">
-      <a href="#" class="btn" id="get_route">Get route</a>
-      <a href="#" class="btn" id="back">&laquo; Back</a>
-      <a href="#" class="btn" id="forward">Forward &raquo;</a>
+      <div class="row">
+        <a href="#" class="btn" id="get_route">Get route</a>
+        <a href="#" class="btn" id="back">&laquo; Back</a>
+        <a href="#" class="btn" id="forward">Forward &raquo;</a>
+      </div>
+      <div class="row">
+        <ul id="steps">
+        </ul>
+      </div>
     </div>
   </div>
 </body>

gmaps.js

@@ -806,8 +806,9 @@ GMaps = function(options){
 GMaps.Route = function(options){
   this.map = options.map;
   this.route = options.route;
-  this.path = this.route.overview_path;
-  this.steps = this.path.length;
+  this.step_count = 0;
+  this.steps = this.route.legs[0].steps;
+  this.steps_length = this.steps.length;
 
   this.polyline = this.map.drawPolyline({
     path: new google.maps.MVCArray(),
@@ -816,19 +817,20 @@ GMaps.Route = function(options){
     strokeWeight: options.strokeWeight
   }).getPath();
 
-  this.polyline.push(this.route.overview_path[0]);
-  this.path_length = this.polyline.getLength();
-
   this.back = function(){
-    if (this.path_length > 0){
-      this.polyline.pop();
-      this.path_length--;
+    if (this.step_count > 0){
+      this.step_count--;
+      for(p in this.route.legs[0].steps[this.step_count].path)
+        this.polyline.pop();
     }
   };
+
   this.forward = function(){
-    if (this.path_length < this.steps){
-      this.polyline.push(this.path[this.path_length]);
-      this.path_length++;
+    if (this.step_count < this.steps_length){
+      for(p in this.route.legs[0].steps[this.step_count].path)
+        this.polyline.push(this.route.legs[0].steps[this.step_count].path[p])
+
+      this.step_count++;
     }
   };
 };