Parsing Json to display polyline/markers with google maps v3
I'm using Jquery getJs开发者_高级运维on() 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
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 $.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.
I have something similar on my site (http://www.cyclistsroadmap.com) for the route finder.
If using Googles routefinder, you can use the DirectionsObject that comes back. When I am using the data that I have stored in a database I just send it back as a 2d array containing all the lat,lng co-ordinates. (I just do a regular AJAX call, not the $.getJSON call though. The AJAX returns a JSON string.
精彩评论