integrate google map direction using sencha touch - google-maps

i am new in sencha touch.
i have integrated google map using sencha touch and display marker on user current location.
now, i want to display direction from source address to destination address on map.
the sample like this,
https://maps.google.com/maps?saddr=21.220901,72.829056&daddr=20.915907,72.871628
i want display only map view with direction path.
how to display direction between two places on goole map using sencha toch ?

here is code,
function directionMap(src,dest){
// alert('calling');
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
zoom:10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsDisplay.setMap(map);
var request = {
// origin: '21.220901,72.829056',
// destination: '20.915907,72.871628',
origin: src,
destination: dest,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
just call directionMap function with source and destination it will draw path on map.

Related

Can we draw custom routes on Google maps?

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);

can we create map with two locations addresses without center of map

I need to create a Google Map with the two addresses of the route that I want to display on Google Map. I do not have the center. Does Google Map calculate the center based on the two addresses or it is mandatory to specify a center?
You can use any dummy location while initializing the map. If you know the coordinates of the two points you can use LatLngBounds to ensure that both points are shown on the map.
var bounds = new google.maps.LatLngBounds();
bounds.extend(latlng1);
bounds.extend(latlng2);
map.fitBounds(bounds);
This code takes both the points and ensures that the google map viewport includes both these points while displaying. Hence you do not need to calculate the center.
If you are using the Gooogle Maps Javascript API v3 directions service, that centers the map to show the entire route by default.
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = 'Chicago, IL';
var end = 'St Louis, MO';
var 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);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
working example

Info WIndow with Map for the Clicked Marker

I am working on Google Map v3.
I need to display Map in infowindow on click of route marker.
Currently, my code displays adrress of the corresponding marker.
In the attached image, on click of Marker "B", small Map is opened with marker "B" centered.
Please let me know if anyone have any inputs.
Thanks,
Sharath
Below is my code snippet....
waypoints array contains the 2 points 2 display (origin and destination)
// Code starts from here...
var origin = waypoints[0];
var destination = waypoints[1];
var mapOptions = {
center: new google.maps.LatLng(-25, 133),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
var directions = new google.maps.DirectionsService();
directions.route({
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.METRIC
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setPanel(document.getElementById ("drivingDirections"));
directionsDisplay.setMap(map);
directionsDisplay.setDirections(result);
}
});

How to load markers from XML file with directions API in Google Maps

I'm trying to load markers from XML file on a map used for outputing directions. Basically, it's the combination of two demos found on Google's documentation pages.
Directions: https://google-developers.appspot.com/maps/documentation/javascript/examples/directions-panel
XML: http://gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/downloadurl_info.html
I have first created the directions map and then tried to add XML file that contains markers.
I'm probably making a simple mistake, but since I'm not good with js and coding, can't find what. There are no errors displayed, only a blank page.
Here is my current code:
<script>
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(41.850033, -87.6500523)
};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
var control = document.getElementById('control');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP].push(control);
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
downloadUrl("http://gmaps-samples-v3.googlecode.com/svn/trunk/xmlparsing/moredata.xml", function(data) {
var markers = data.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var marker = createMarker(markers[i].getAttribute("name"), latlng);
}
});
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);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Here is the (non-working) jsFiddle: http://jsfiddle.net/ajJ3u/
Problems from a quick review:
you are creating the map twice.
you don't have a createMarker function. If that call came from one of the examples, you missed bringing it to the new map.
downloadUrl is subject to a cross-domain security restriction. If your page is not running in the "http://gmaps-samples-v3.googlecode.com" domain, it won't work. You need to access xml from the same domain as the page is running in or use a proxy.
Example of directions from/to markers from xml (translated to v3 from Mike Williams' v2 tutorial

How to give numbers to markers in google maps

``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'
});