can we create map with two locations addresses without center of map - google-maps

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

Related

How to get the lat and lng of dragged waypoint

I am making this app where I let the user draw a waypoints route with google maps directions service and currently I am working on the edit route page - that is where the user can drag the waypoints of the route to reorder them. I am having trouble getting the lat and lng of the currently dragged waypoint.
How can I access the lat/lng of the dragged waypoint object on drag end?
This is my code:
<script type="text/javascript">
var rendererOptions = {
draggable: true
};
var phpway = <?php echo json_encode($phpway); ?>;
var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
var directionsService = new google.maps.DirectionsService();
var map;
var waypts = [];
for(var i = 0; i < phpway.length; i+=2){
waypts.push(new google.maps.LatLng(Number(phpway[i]), Number(phpway[i+1])));
}
var start = waypts[0];
var end = waypts[waypts.length-1];
var mywaypts = [];
var pointsArray = [];
for (var i = 1; i < waypts.length-1; i++) {
mywaypts.push({
location:waypts[i],
stopover:true});
}
var australia = new google.maps.LatLng(-25.274398, 133.775136);
function initialize() {
var mapOptions = {
zoom: 7,
center: australia
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directionsPanel'));
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
//computeTotalDistance(directionsDisplay.getDirections());
calcRoute();
});
calcRoute();
}
function calcRoute() {
console.log(start);
var request = {
origin: start,
destination: end,
waypoints: mywaypts,
optimizeWaypoints: true,
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);
</script>
In the 'directions_changed' event handler, process through the "new" directions returned from:
directionsDisplay.getDirections(). The start/end locations of each leg are the waypoints (note that the end of the first leg will be the same point as the start of the second).
google.maps.event.addListener(directionsDisplay, 'directions_changed', function () {
document.getElementById('waypoints').innerHTML = "";
var response = directionsDisplay.getDirections();
var route = response.routes[0];
var path = response.routes[0].overview_path;
var legs = response.routes[0].legs;
for (i=0;i<legs.length;i++) {
document.getElementById('waypoints').innerHTML += legs[i].start_location.toUrlValue(6) +":";
document.getElementById('waypoints').innerHTML += legs[i].end_location.toUrlValue(6)+"<br>";
}
});
fiddle
Inspect var dirs = directionsDisplay.getDirections();, maybe using console.log(dirs); to get a glance at the request format.
You will find the origin under dirs.request.origin, the destination under dirs.request.destination and the waypoints under dirs.request.waypoints.
To find the waypoint you have just ended dragging, keep the previous request (there should always be one, even before the first drag, since you first load the the route to be edited) and search for the differences in between this previous request and the current one via a simple iteration through the 'set of waypoints'. I suspect that there should be only one difference you find between the two (no matter if you introduce a new waypoint or you move an already existing one). That is your last dragged waypoint.

Hide polyline from A to B using in Google Map api v3

I am displaying google map with code below, I want to hide Polyline between A to B. All answers on google talk about creating an array and then doing array.setmap(null). can I hide polyline without using arrays. In other case, how should I use array to hide polyline using code below.
Edit: I need marker A and B to be shown
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var time;
function initialize() {
var rendererOptions = {
map: map,
draggable: true
}
// Instantiate a directions service.
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
// Create a map and center it on islamabad.
var islamabad = new google.maps.LatLng(33.7167, 73.0667);
var mapOptions = {
zoom: 13,
center: islamabad
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = document.getElementById('MainContent_txtFrom').value;
var end = document.getElementById('MainContent_txtTo').value;
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);
If you want to render the directions but hide the polyline, use the DirectionsRendererOptions suppressPolylines.
function initialize() {
var rendererOptions = {
suppressPolylines: true,
map: map,
draggable: true
}
// Instantiate a directions service.
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
As shown in the demo below, you can remove polylines by two means:
setting the option suppressPolylines to true in directionsDisplay, your google.maps.DirectionsRenderer by using
directionsDisplay.setOptions({
suppressPolylines: true
});
This will preserve the start- and end-point markers.
The method setOptions(options:DirectionsRendererOptions) changes the options settings of DirectionsRenderer after initialization.
use directionsDisplay.setMap(null); to remove all directions rendering, but this includes markers, so if you do that you will need to add extra markers to the map.
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var time;
var pointA = new google.maps.LatLng(48.86, 2.35);
var pointB = new google.maps.LatLng(33.7167, 73.0667);
function initialize() {
var rendererOptions = {
map: map,
draggable: true
}
// Instantiate a directions service.
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
// Create a map and center it on islamabad.
var islamabad = new google.maps.LatLng(33.7167, 73.0667);
var mapOptions = {
zoom: 13,
center: islamabad
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var start = pointA;
var end = pointB;
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);
}
});
};
function removeRoute() {
directionsDisplay.setOptions({
suppressPolylines: true
});
// this "refreshes" the renderer
directionsDisplay.setMap(map);
};
function removeRouteNull() {
directionsDisplay.setMap(null);
};
google.maps.event.addDomListener(window, 'load', initialize);
#map {
height: 280px;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<button onclick="removeRoute()">Remove route (suppressPolylines)</button>
<button onclick="removeRouteNull()">Remove route (setMap(null))</button>
<button onclick="initialize()">Undo all</button>
<section id="map"></section>
If you refer to this answer: Google Maps v3 directionsRenderer.setMap(null) not working to clear previous directions you should see what you're looking for.
You do not need to use an array as you're implementing the directionsRenderer object. If you declare this globally (Edit Which I now see you have already) (so that you only have one instance at any given time) then you can simply use directionsDisplay.setMap(null) to remove previous directions rendered.
If you want to render the markers from the response but hide the polyline I suppose the simplest (but I would imagine by no means cleanest) way would be to simply alter the opacity on the polyline object:
var myPolylineOptions = new google.maps.Polyline({
strokeColor: '#FF0000',
strokeOpacity: 0.00001,
strokeWeight: 0
});
And then assign it to your renderer:
directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions: myPolylineOptions});

integrate google map direction using sencha touch

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.

Find out distance between two points using Google map API based on medium (Road,Air,Ship)? [duplicate]

I have used the google map API to plot a way point on google map
I referred to the the following page:
https://developers.google.com/maps/documentation/javascript/directions
'Using Waypoints in Routes section' and modified it a bit so as to plot only 3 points on the map.
The following is my javascript code.
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var initialloc = new google.maps.LatLng(12.971599, 77.594563);
var mapOptions = {
zoom : 6,
mapTypeId : google.maps.MapTypeId.ROADMAP,
center : initialloc
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var lat = new Array();
var lon = new Array();
var start = new google.maps.LatLng(12.971599,77.594563);
var mid = new google.maps.LatLng(12.971558,77.594552);
var end = new google.maps.LatLng(12.971558,77.594552);
var waypts = [];
waypts.push( {
location : mid,
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);
var route = response.routes[0];
}
});
}
which works perfectly fine if the 3 locations are within same country, ie they have a road map.
My question is how to plot the map when the location are in different continents eg India and Australia?
Can anyone please help.
Thanks in Advance.
The problem is not about different continents, but whether the routing engine's database has information about all the countries between your start and endpoints, including car ferries. You can see that the same occurs in maps.google.com . Here's an intercontinental route from Europe to India, but if you try to move the B marker to the US or Canada, it doesn't get a route because it doesn't know a ferry across the Atlantic.
You can see what countries have coverage in this spreadsheet.

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