Menu
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
436
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=false
decode 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
182
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...
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
