0

I am trying to reproduce the third example of that page https://developers.google.com/maps/customize but using my own route and so far i don't have much luck.

The problem is using "setDirections" it gets the path from google's api but i am creating a hiking route with my own long, lat and do't really know own to deal with that part.

Here is where i got so far http://dev.oneshot.nc/www.megarando.nc/html/map.html

j0k
  • 22,600
  • 28
  • 79
  • 90
user10078
  • 681
  • 7
  • 7

1 Answers1

0

setDirections are fine: according to the official documentation, they can be either strings (to be resolved by Google's geocoder Engine on serverside implicitly), or LatLong objects, yours is fine.

origin: LatLng | String,
destination: LatLng | String,

https://developers.google.com/maps/documentation/javascript/directions#DirectionsRequests

However, I guess you want to use just the display logic, as you have a full path defined. Then directions are not necessarily for you, consider using Polylines instead ( https://developers.google.com/maps/documentation/javascript/overlays#PolylineArrays ).

Use any kind of graph visualizer ( Google Charts: https://developers.google.com/chart/ or Raphael JS ( http://g.raphaeljs.com/ or http://raphaeljs.com/analytics.html ) for the elevations.

To answer your comment, try something along this (based on https://developers.google.com/maps/documentation/javascript/overlays#Polylines): 

var routePath = new google.maps.Polyline({
    path: kids,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
});

routePath.setMap(map);
elevationPath = kids;
recalcHeight();
});

As I see, first, a route request is made between two points. A route is a set of paths, so for each path, it'll collect the points and put them into a unified array (or a single "path"), and asks for a so-called facade function to draw the Polylines of the route.

After it collected the points, it'll call the elevation service, to tell the elevations along the path, and when this returns, it can draw the chart with the chart API.

However, you already have the path, and you have only a single path: you only have to tell Google Maps to draw the Polylines based on your path (in variable kids), and tell the elevation service to return the elevations for the points along that path.

Aadaam
  • 3,579
  • 1
  • 14
  • 9
  • My question is surely a little confusing. I know that setDirection is fine and that i need polyline. But i have no idea what to do from line 196 in map.js to use my polyline instead of setDirection. Apart from that my columnchart from google is working just fine showing the right data. – user10078 Jul 22 '12 at 22:54