Here is my fiddle . Here i have displayed current location and end location by balloons.
And i am trying to put directions between start and end point in the map. In this case no markers for the directions are displayed may be because both shares common location. But the zoom is too great , results in it is not covering start and end point. User have to make double right click to see both start and location.
I have also tried,
new_boundary = new google.maps.LatLngBounds();
new_boundary.extend(new google.maps.LatLng(start));
new_boundary.extend(new google.maps.LatLng(end));
map.fitBounds(new_boundary);
But it is not working. Whats wrong with my map configuration ?
your script breaks (at least for me) at this line:
dir=((Math.atan2(z.lng()-a.lng(),z.lat()-a.lat())*180)/Math.PI)+360
take a look at this line:
z=(step.lat_lngs.length)?step.lat_lngs[1]:step.end_point,
for the first step lat_lngs.length is 1 , so step.lat_lngs[1] is undefined, the call of z.lng() fails with "Cannot call method 'lng' of undefined"
Possible fix for that error:
z=(step.lat_lngs.length>1)?step.lat_lngs[step.lat_lngs.length-1]:step.end_point,
Related to the zoom:
When you wouldn't have disabled the complete UI you would have seen that the result (zoom ) is correct.
The DirectionsRenderer by default will refresh the viewport of the map so that the complete route is visible.
This will be done(the bounds initally set in your script will be discarded).
To have another result(preserve the current viewport, but extend it that also the route is visible), you must:
set the preserveViewPort-option of the DirectionsRenderer to true(default is false)
extend the bounds of the map with the bounds of the route
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.set('preserveViewport',true);
map.fitBounds(map.getBounds().union(response.routes[0].bounds));
//continue with your code
This code is correct for example
Your map change resolution when you add
directionsDisplay.setDirections(response);
setDirections(directions:DirectionsResult) None Set the renderer to
use the result from the DirectionsService. Setting a valid set of
directions in this manner will display the directions on the
renderer's designated map and panel.
Hope, that i understand problem right, English i not my native language
Try to add validation as
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
if(!response.routes[0].bounds.getNorthEast().equals(response.routes[0].bounds.getSouthWest())){
directionsDisplay.setDirections(response);
}
addDirections(response.routes[0]);
}
});
To check if answer contains different point
Related
I want to remove one marker from my Google Map, but I can't seem to get it to work. I find various answers, all telling me to use .setMap(null) on the marker, but I can't seem to get it to work.
$map_canvas = $('#map_canvas');
var youreHere_Marker;
function centerMapToAddress( address ) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if( typeof youreHere_Marker!=="undefined"){
youreHere_Marker.setMap(null);
}
youreHere_Marker = $map_canvas.gmap('addMarker', {'position': results[0].geometry.location.lat()+','+results[0].geometry.location.lng(), 'bounds': true});
}
});
}
I get TypeError: youreHere_Marker.setMap is not a function. To my knowledge this means that the variable youreHere_Marker doesn't have the method .setMap(), but if I do console.log(youreHere_Marker) and inspect the object, I can see the method.
I have more markers on my map, via the MarkerClusterer. Those should remain untouched
I have the feeling I'm close, could someone point me in the right direction?
Edit: I've also tried .setPosition(), same error. I'm assuming I'm using the variable incorrect, but I don't know how to refer to it properly.
Well, i was working with google maps without jQuery, but i think (i'm not sure, but you may try) that you should get your marker with the following code:
youreHere_Marker = $map_canvas.gmap('get', 'markers')[0];
youreHere_Marker.setMap(null);
I'm really not sure that it will do what you want, but there is a possibility that this will work : )
I hope you'll solve you problems.
Thanks. : )
I've a question.
I want to calculate the distance between a current position and a calculated route. I'm using the Google Maps API v3 to calculate the route. I've tried to use google.maps.geometry.poly.isLocationOnEdge, but it didn't worked.
Here is my code:
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK){
var poly = new google.maps.Polyline({
paths:new Array(result.routes[0].overview_path)
});
var currentPosition = new google.maps.LatLng(51.574470000000005, 4.32713);
if(google.maps.geometry.poly.isLocationOnEdge(currentPosition, poly)){
console.log("On route");
}else{
console.log("Not on route");
}
var directionsDisplay = new google.maps.DirectionsRenderer({
polylineOptions: {
strokeColor: color,
strokeWeight: 3
}
});
directionsDisplay.setMap(map);
directionsDisplay.setDirections(result);
}
});
I'm not sure this is the good way to get the result I want.
Can someone help me?
First of all you might want to set the tolerance in the isLocationOnEdge method. Maybe the point is just a little off. The default tolerance is 10^-9 wich is pretty small. See the documentation for more details.
Do you really need the distance to the route? Or is it enough to know if the marker is on your route?
If so you might want to check out this similar question
It is advised there to use the containsLocation() method.
If you really want to calculate the distance, then i have to say this is not possible according to this post
I am trying the following out, based on the example from GoogleMapsv3APIExample:
I have a route from A to B with some markers:
I modify the route by dragging "a transitional waypoint" (shown by a white circle)
I want the markers to be updated to the new route
I adapted the linked example in this gist:
on lines 37-39 I add a listener for the directions_changed event
in recalculateMarkers, I set all markers to null and place them again on the map
it seems that directionsDisplay.directions still contains the old route (before dragging)
the result I get is this:
Any suggestions ?
Thanks!
Problem is in directions_changed event: This event is fired when the rendered directions change, either when a new DirectionsResult is set or when the user finishes dragging a change to the directions path.
When calcRoute() finishes there are two sets of markers created: one from recalculateMarkers() and the other from calcRoute().
Event listener has to be moved to calcRoute() and to be set up in case of route success:
function calcRoute() {
var request = {
origin: 'Sydney, NSW',
destination: 'Broken Hill, NSW',
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
showSteps(response);
google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
console.log('directions_changed');
recalculateMarkers();
});
}
});
}
See example at jsbin.
I am using the Google Maps API v.3 to create a google map with directions very similar to this example by google.
The main difference is that on page load, the google map canvas is set to 100%, and when the user requests directions the map is reduced to 70% (to make room for the directions panel)
When the user gets directions, the directions are displayed as if the map canvas was at 100%, not 70%, essentially cutting off part of the directions. I need the map to reorient / recenter when the direction response is displayed.
You can demo this out here: http://j2designpartnership.com/directions/
When the user types in directions, this function is called: calcRoute()
function calcRoute() {
if (document.getElementById("start").value != "") {
activeSettings();
}
else{
defaultSettings();
}
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
//make the request for our directions
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
var recenter = new google.maps.LatLng(40.440625,-79.995886);
map.setCenter(recenter);
}
The part to pay attention to here is the top conditional that basically changes the width of the map canvas if there is text in the input field.
How do I recenter the map now that the map canvas is smaller?
When the map div changes size trigger the resize event on the map as specified in the documentation
resize | None | Developers should trigger this event on the map when the div changes size:
google.maps.event.trigger(map, 'resize') .
Have developed an app in Sencha Touch V2.This app contains a Mappa panel where there is a map, this map has been populated with markers which corresponds to the various locations(cafes) that are taken from a json file.
The App Map panel functions as follows:
On a marker click the start and end locations textields pops ups, where the user enters the values for the start and end locations, another click to any of the other markers results in, the directions from start and end locations being plotted onto the map.
We need to implement the following functionality:
We need to facilitate the directions of locations entered in google maps plotted onto the map on a button click and also need to recreate the map instance(refresh map) and place existing markers on another button click(map clear button) so as to create a new instance for the user to find directions for different start and end locations.
Problems that we have are:
While defining the handler for the button click resulted in no action being performed(getting directions handler was not functioning).
Inorder to recreate the instance of the map, we had set the map to null but that resulted in a map without markers.
Could anyone please help out in accomplishing the tasks for this app in Sencha touch version 2.
Created this kind of application / functionality long time back.
You can create a floating formpanel and provide the field entries there for source and destination end points.
Then, you could write the below code on tap of "Get Directions" button,
Code snippet :-
tap: function() {
var src = Ext.getCmp('srcField');
var destn = Ext.getCmp('destField');
var mode = Ext.getCmp('travelMode');
var request = {
origin: src.getValue(),
destination: destn.getValue(),
travelMode: mode.getPressedButtons()[0].getText(),
};
Ext.Ajax.request({
url: 'http://maps.googleapis.com/maps/api/directions/json?origin='+src.getValue()+'&destination='+destn.getValue()+'&mode='+mode.getPressedButtons()[0].getText()+'&sensor=false';
method:'post',
success : function(response) {
showDirections(response,request);
}
});
function showDirections(res,req) {
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = Ext.getCmp('googleMapComponentId').getMap();
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
directionsDisplay.setMap(map);
}
});
}