Parsing Json to display polyline/markers with google maps v3

[paddy]

I'm using Jquery getJson() to generate a json to be displayed on the
google maps 3 api.
I would like to display the poly line as per the :
[polyline-simple example](http://code.google.com/apis/maps/
documentation/javascript/examples/polyline-simple.html)

function initialize() {
var myLatLng = new google.maps.LatLng(0, -180);
var myOptions = {
zoom: 3,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};

var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

var flightPlanCoordinates = [
new google.maps.LatLng(37.772323, -122.214897),
new google.maps.LatLng(21.291982, -157.821856),
new google.maps.LatLng(-18.142599, 178.431),
new google.maps.LatLng(-27.46758, 153.027892)
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});

flightPath.setMap(map);
}


JQuery:

$.getJSON("routefinder", { "lat1": lat1 , "lng1": lng1 , "lat2":
lat2 , "lng2": lng2 }, function(json) {
var poly = new google.maps.Polyline({
path: json,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});

poly.setMap(map);
});


the Jquery $.getJSON returns a string with polyline coordinates in
the [new google.maps.LatLng (lat, lng) ] format: [ new
google.maps.LatLng(53.369567, -6.323699), new
google.maps.LatLng(53.367705, -6.317386),new
google.maps.LatLng(53.337705,-6.917386), new
google.maps.LatLng(53.397705,-6.47386)];

But no line is generated, Can i return a json array containing
google.maps.LatLng objects ? Or what would be the best method to
display a polyline from a json. Or can generate a DirectionsResult
object and return it as a json ?
thanks
Paddy

[Davide Cremonesi]

Are you saying that the json object returned from your endpoint is a
string an not a LatLng array?

function(json) {
> var poly = new google.maps.Polyline({
> path: json,

can you log the typeof that object?
Please also note that the PolygonOptions property is named paths and
not path.

Hope it helps,
Davide

[William Choy]

JSON is just return a string (not an array) so you just need to use
the Javascript eval() function to parse/executes that string to form
the array of LatLng.

>
>         $.getJSON("routefinder", { "lat1": lat1 , "lng1": lng1 , "lat2":
> lat2 , "lng2": lng2 }, function(json) {
>         var poly = new google.maps.Polyline({

>           path: eval(json), // LIKE THIS

>           strokeColor: "#FF0000",
>           strokeOpacity: 1.0,
>           strokeWeight: 2
>         });
>
>        poly.setMap(map);
>         });
>

But I hate this because it will blindly execute any String as
Javascript.

Better way is to pass just the Lat Longitude as Data and create the
google.maps.LatLng.

"locations": [
{
"Lat": "53.369567",
"Lng": "-6.323699",

},
{
"Lat": "53.367705",
"Lng": "-6.317386"

},
{
"Lat": "53.367705"
"Lng": "-6.917386",

},
{
"Lat": "53.367705",
"Lng": "-6.47386)",

}
]

$.getJSON(routefinder,
function(data){
var myPath = new Array();
$.each(data.locations, function(i,location){
path.push(new google.maps.LatLng(location.Lat,
location.Lng))
});

var poly = new google.maps.Polyline({

path: myPath,