I have some problems with upgrading google maps v2 in v3.
Follow code is v2:
function routing(target, width, lenght, name, zip, city, street) {
if (GBrowserIsCompatible()) {
if (counter > 0) {directions.clear()};
counter++;
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
directionsPanel = document.getElementById("route");
directions = new GDirections(map, directionsPanel);
var startpoint = name+', '+zip+' '+city+', '+street
if (target == 'messe') {
directions.load("from: "+startpoint+"#"+width+","+lenght+" to: Messe, 50679 #T_koeln#, Deutz-Mülheimer Straße 40#50.9473327,6.98312820000001");
};
if (target == 'airport') {
directions.load("from: "+startpoint+"#"+width+","+lenght+" to: Flughafen Koeln, 50679 #T_koeln#, Kennedystraße#50.8782914,7.122399800000039");
};
}
}
here is the v3 code:
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
function routing(target, width, lenght, name, zip, city, street) {
if (counter > 0) {directionsDisplay.setMap(null)};
counter++;
var mapOptions = {
zoom: #zoomfaktor_detail#,
center: new google.maps.LatLng(width, length),
overviewMapControl: true,
overviewMapControlOptions:{opened:true},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("route"));
var startpoint = name+', '+zip+' '+city+', '+street
if (target == 'messe') {
end = 'Messe, 50679 #T_koeln#, Deutz-Mülheimer Straße 40#50.9473327,6.98312820000001';
start = startpoint+"#"+width+","+lenght;
request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
}
if (target == 'airport') {
end = 'Flughafen Koeln, 50679 #T_koeln#, Kennedystraße#50.8782914,7.122399800000039';
start = startpoint+"#"+width+","+lenght;
request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
}
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
Why does it not function? Has someone an idea?
It isn't working because the route can't be found and the directions service is returning an error which is (or was) being silently ignored.
I suspect the problem is the "#" in your start and end addresses. Remove them (and the text after them), give the directions service valid addresses (or give it the coordinates as a google.maps.LatLng object).
Related
I am exploring Google maps APIs. I have a web service which returns the GeoJSON object in response. I want to render it on the Google maps. I tried below API;
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
This gives us the GeoJSON for given start and end in request parameter. I am trying to get the GeoJSON response from my service and instead of Google data, I am trying to render my own response.
The data returned from my custom service is in the same format as Google.
The data returned from Google service is in the form like
I have constructed the object same is Google DirectionsService Response.
Please check details below;
https://developers.google.com/maps/documentation/javascript/directions#DirectionsResults
"routes":[{"bounds":{"northeast":{"lat":30.2844454,"lng":-97.7040698},"southwest":{"lat":30.2121885,"lng":-97.7506593}},"copyrights":"Map
data ©2014 Google","legs":.... Steps....}
EDIT:
I tried another option with addGeoJson() API as;
function loadGeoJsonString(geoString) {
var geojson = JSON.parse(geoString);
map.data.addGeoJson(geojson);
zoom(map);
}
JSON string which I am using is validated by jsonlint.
Something like this?
directionsDisplay = new google.maps.DirectionsRenderer();
var Basingstoke = new google.maps.LatLng(51.2949612, -1.0643864);
var mapOptions = {
zoom:7,
center: Basingstoke
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
var point1 = new google.maps.LatLng(51.2941293,-0.9139252);
var point2 = new google.maps.LatLng(51.3250339,-0.8050919);
var wps = [{ location: point1 }, { location: point2 }];
var org = new google.maps.LatLng ( 51.2949612, -1.0643864);
var dest = new google.maps.LatLng ( 52.3069282, -0.7540226);
var request = {
origin: org,
destination: dest,
waypoints: wps,
durationInTraffic: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var newRoute = response.routes[0].legs[2].duration.value;
directionsDisplay.setDirections(response);
alert ('Travel Time: ' + newRoute + ' seconds');
}
else
alert ('failed to get directions');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
I am using this function: getDirection(glat,glon,acity) Using this function I have to draw a route from a city to the glat and glong [latitude and longitude] position. I was finished with everything but I dont know how to set variable acity as origin.
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var default_latitude=22.5936840;//12.9715987;
var default_longitude=78.962880;//77.5945627;
var myOptions =
{
center: new google.maps.LatLng(default_latitude,default_longitude),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapp"),myOptions);
var latlng=new google.maps.LatLng(glat,glon);
$('#mapDiv1').modal({closeClass: "mapCloseImg1"});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("panel"));
var request = {
origin: [WANT TO PUT ACITY AS ORIGIN BUT DONT KNOW HOW]
destination:latlng,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
``In my requirement,I have a set of way points passed as json object to map. From those waypoints , the start and end have to shown in alphabets and the in-between markers should be in numbers. How can I implement this scenario?
Also I found that google maps support a max of 8 wayspoints and one start and end .Is there any way to add more waypoints to my map? I am using google maps DirectionsService for waypoint renderng.
The code I used is
function calcRoute() {
var start = wayPointArray[0];
var end = wayPointArray[1];
var waypts = [];
for (var i = 2; i <= wayPointArray.length-1; i++) {
waypts.push({
location: wayPointArray[i],
stopover: true
});
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
directionsDisplay.setMap(map);
}
wayPontArray contains all lats and long for the waypoints. The first and second will be the start and end respectively and all others are the waypoints. The start and end should be in alphabets ie A and B. The in between waypoints should be in numbers.
Thanks in advance
Boney.
If you know the coordinates of your waypoints, you can use custom markers with numbers or lettersas labels as in this example:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|FF0000|000000'
});
I am new to the Google Maps API and so far I have run into many issues.
I am trying to map waypoints from latlng coords determined by an array of checkboxes.
Here is my js file in full:
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var waypts = [];
var start = new google.maps.LatLng(41.850033, -87.6500523);
var end = new google.maps.LatLng(40.850033, -87.6500523);
function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(41.850033, -87.6500523)
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
}
function calcRoute()
{
var checkboxArray = document.getElementsByName("waypoints[]");
for (var i = 0; i < checkboxArray.length; i++)
{
if (checkboxArray[i].checked)
{
var lat = parseFloat(checkboxArray[i].attributes["lat"].value);
var lng = parseFloat(checkboxArray[i].attributes["lng"].value);
waypts.push({
location: new google.maps.LatLng(lat, lng),
stopover: true
});
}
}
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
console.log("mapping...");
if(status == google.maps.DirectionsStatus.NOT_FOUND)
{
console.log("Could not one or more of locations");
}
});
The map shows up and "mappings..." pops in the console when the page loads. When I press the calcRoute submit button nothing happens. I have logged the lat/long and the waypt object so I know they are getting to that point but it seems the route is never recalculated, etc.
I really just need a basic demo on this but the only one I have found is which I have used for almost everything but I get no results:
Google Example Directions Waypoints
Currently your script never will show any route, because you are missing the call of directionsDisplay.setDirections() to print the route.
You also should should put the call of directionsService.route() into the calcRoute-function.
fixed code:
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var start = new google.maps.LatLng(41.850033, -87.6500523);
var end = new google.maps.LatLng(40.850033, -87.6500523);
function initialize()
{
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(41.850033, -87.6500523)
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
}
function calcRoute()
{
var checkboxArray = document.getElementsByName("waypoints[]");
var waypoints=[];
for (var i = 0; i < checkboxArray.length; i++)
{
if (checkboxArray[i].checked)
{
var lat = parseFloat(checkboxArray[i].attributes["lat"].value);
var lng = parseFloat(checkboxArray[i].attributes["lng"].value);
waypts.push({
location: new google.maps.LatLng(lat, lng),
stopover: true
});
}
}
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if(status == google.maps.DirectionsStatus.OK)
{
//print the route
directionsDisplay.setDirections(response);
}
else
{
console.log('something went wrong',status);
}
});
}
</script>
There isn't a great deal of information about how your Javascript relates to the page HTML. But this line
var checkboxArray = document.getElementsByName("waypoints[]");
should probably be
var checkboxArray = document.getElementsByName("waypoints");
assuming that all your checkboxes have the name waypoints.
What is inside the quotes should exactly match the name of the checkbox elements, so if each checkbox has the name waypoint (because each checkbox marks a single waypoint, this is a possibility) then you should use .getElementsByName("waypoint") to find all elements which have that name.
I am trying to display multiple routes on same map but am unable to do so.
No matter what I do I get only one route.
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) {
directionsDisplay.setDirections(response);
}
});
}
Any pointers will be helpful.
I had the same problem. This thread on a Google group for Google maps shows how to do it.
The author (a Google employee), wrote this:
You should be able to create two DirectionsRenderer objects, each that
use the same map and different DirectionsResults.
var map = new google.maps.Map(document.getElementById("map_canvas"));
function renderDirections(result) {
var directionsRenderer = new google.maps.DirectionsRenderer;
directionsRenderer.setMap(map);
directionsRenderer.setDirections(result);
}
var directionsService = new google.maps.DirectionsService;
function requestDirections(start, end) {
directionsService.route({
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
}, function(result) {
renderDirections(result);
});
}
requestDirections('Huntsville, AL', 'Boston, MA');
requestDirections('Bakersfield, CA', 'Vancouver, BC');
I tried it and it does work.
Did you try as follows?
Here I have captured one path and displayed it. You can do the same by writing pointsArray = result.routes[1].overview_path; besides it and display it in a new loop.
directionsService.route (request, function (result, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections (result);
pointsArray = result.routes[0].overview_path;
var i = 0;
var j = 0;
for (j = 0; j < pointsArray.length; j++)
{
var point1 = new google.maps.Marker ({
position:pointsArray [j],
draggable:false,
map:map,
flat:true
});
}
}
});