Google maps directions using stored results
I am trying to put together an app where I can query googles directions service, store the results to build up a cache then render the directions as I need them.
I can get the direction data back and store it in the database just fine, and thats all good, now when I go to render the directions over the map my javascript really lets me down. (strData) is a string containing the json formatted directions from the database.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="map.aspx.cs" Inherits="panto" %>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example开发者_如何学运维: Directions Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
var myOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: chicago
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
directionsDisplay.setDirections(<%= strData %>);
}
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
alert(response);
directionsDisplay.setDirections(response);
}
});
}
</script>
</head>
<body onload="initialize()">
<div>
</div>
<div id="map_canvas" style="top:30px;"></div>
</body>
</html>
The firefox error console reports the error
Error: g[Xb] is not a function
Source File: http://maps.gstatic.com/intl/en_gb/mapfiles/api-3/5/11/main.js
Line: 109
any help would be greatly appreciated
To render directions result from Google Web Service (vs from JavaScript API), we can use the encoded path in the result.
add the geometric library to decode the path:
http://maps.google.com/maps/api/js?libraries=geometry&sensor=falsedecode the path and render the polyline
var rideCoordinates = google.maps.geometry.encoding.decodePath(results.routes[0].overview_polyline.points); var ridePath = new google.maps.Polyline({ map: map_object, path: rideCoordinates, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 3 });set the bounds of the map
var ne = new google.maps.LatLng(results.routes[0].bounds.northeast.lat, route.bounds.northeast.lng); var sw = new google.maps.LatLng(results.routes[0].bounds.southwest.lat, route.bounds.southwest.lng); map_object.fitBounds(new google.maps.LatLngBounds(sw, ne));
HTH
When you serialize the object all methods will disappear. g[Zb] is not a function, really means cannot find the the method 'getSouthWest' on property 'bounds'.
If you would get the results and then recreate the objects like this: results.routes[0].bounds = new google.maps.LatLngBound(results.routes[0].bounds); Then atleast that first error message would be fixed...
加载中,请稍侯......
精彩评论