We have two textboxes, in two text boxes giving the location names and converting in to latitude and longitude values. And pass the values to the below function. First time Direction loaded successfully, second time modify the text box value, It will overwriting the direction, of the previous. Its not clearing the previous loaded directions. I want to clear the direction and load the new direction. Please help.
var directionsService = new google.maps.DirectionsService();
var directionsDisplay;
function loadDirections(start,end)
{
directionsDisplay = new google.maps.DirectionsRenderer();
if (start && end)
{
resultsDiv.update(''); // So we clear the div out ourselves
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.IMPERIAL
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
directionsDisplay.setMap(map.map);
directionsDisplay.setPanel(resultsDiv);
}
}
Move this line:
directionsDisplay = new google.maps.DirectionsRenderer();
... out of loadDirections().
Otherwise you will use a new instance of the DirectionsRenderer at each function-call, what will not overwrite the route created by an instance used in a previous call.
Related
I have some troubles with the Geocoder from Google Maps.
The main idea is, that I have a list with estates (flat, house, ...) in it and I want to search for Points of Interest (POIs; university, cafe, etc.) nearby the estates with some given range. There is no problem, it works fine.
BUT what I want to do now is, to "delete", or better said, make the markers invisible, which have no Points of Interest in the given range nearby.
In the code below you will see, that I have the geocode in a for loop, and for every estate which it gets it sets the POIs. Now I want to give over the estates which it uses at this time, checks if there are results nearby, if not it should set the marker of the estate on map to null. The problem is, that I can't give over the id of the estate, so I can set the marker to null with this specific ID.
Right now it works partially, but it always deletes the markers randomly. (Currently it is done with some counter to delete the index... but I want to delete it with the id).
So, the main question is, how can I hand over the current ID of the estate from the for loop into the callback and delete the marker with the same ID?
To understand the code i should say that "immo" or "immobilien" is the german word for estates.
Here's the code:
function geocodePoi(geocoder, resultsMap) {
var poiCat = document.getElementById("poi").value;
poiList.push(poiCat);
var address = document.getElementById('address').value;
var poi = document.getElementById('poi').value;
var radius = document.getElementById('range').value;
var poiArray = [];
poiArray.push(poi);
var latlng;
geocoder.geocode({'address': address}, function (results, status) {
if (status === google.maps.GeocoderStatus.OK) {
resultsMap.setCenter(results[0].geometry.location);
latlng = results[0].geometry.location;
latlngDic = {lat: latlng.lat(), lng: latlng.lng()};
infowindow = new google.maps.InfoWindow();
for (i = 0; i < immobilien.length; i++) {
currentImmo = immobilien[i].id;
currentImmoList.push(currentImmo);
var service = new google.maps.places.PlacesService(map);
service.nearbySearch({
location: new google.maps.LatLng(immobilien[i].longitude,
immobilien[i].latitude),
radius: radius,
types: poiArray
}, callback);
}
}
else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
function callback(results, status) {
if (status === "ZERO_RESULTS") {
setMapOnAllImmo(null, count);
count = count + 1;
}
if (status === google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
count += 1;
}
}
I'm using this service https://developers.google.com/maps/documentation/javascript/directions to create a route between two markers.
The problem is that when I run the function to create the path, he enters me two markers by default from google maps (the beginning and end) when I had created the markers with different style.
Result: at each point have my marker and the marker's default google maps above.
How can I hide the marker created by google?
The code I'm using is:
function makePathToMarker(position1, position2) {
var request = {
origin: new google.maps.LatLng(myLocation.split(",")[0],myLocation.split(",")[1]),
destination: new google.maps.LatLng(position1, position2),
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
var directionsService = new google.maps.DirectionsService();
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
When instatiating the DirectionsRenderer, set suppressMarkers to true.
directionsDisplay = new google.maps.DirectionsRenderer(
{
suppressMarkers: true
});
Here's the reference
Depends of what you need
directionsDisplay.setOptions({
suppressPolylines: true,
suppressMarkers: true
});
I am trying to move my marker (icon) from one location to another very smoothly. I am very near to do this. I want to do something like this link in API v3.
Now, I have got all the lat/long from two locations, but still no smooth effect. Then I decided to get all lat/long between two lat/long, for example I got 1000 lat/long between two locations. Now I want lat/long between the first lat/long to the second lat/long of that 1000 lat/longs, that gives me more lat/long. Here is my code.
var map, ren, ser;
var data = {};
var marker;
function goma() {
map = new google.maps.Map(document.getElementById('mappy'), {'zoom':6, 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'center': new google.maps.LatLng(22.05678288577881, 72.30236816615798)});
ren = new google.maps.DirectionsRenderer( {'draggable':true} );
ren.setMap(map);
ser = new google.maps.DirectionsService();
google.maps.event.addListener(ren, 'directions_changed', function(event){
var waypoints = ren.directions.routes[0].legs[0].via_waypoints;
});
ser.route({
'origin': new google.maps.LatLng(22.3000, 70.7800),
'destination': new google.maps.LatLng(23.0333, 72.6167),
'travelMode': google.maps.DirectionsTravelMode.DRIVING},
function(res,sts) {
if(sts=='OK')
ren.setDirections(res);
})
}
function run(i,j) {
if(i!=0 || j!=0) {
marker.setMap(null);
}
if(i<=ren.directions.routes[0].legs[0].steps.length) {
if(j==ren.directions.routes[0].legs[0].steps[i].path.length) {
j=0;
i++;
} else {
j++;
}
}
marker = new google.maps.Marker({
position: ren.directions.routes[0].legs[0].steps[i].path[j],
map: map
});
marker.setMap(map);
setTimeout(function() {run(i,j);}, 2000);
}
It works but not as I want. I just want smooth effect and also I'd like to find the distance I have passed and speed. Thank you.
I've calculated a route with the same begin and end point with the maps api.
Because the begin and end point are the same, the first marker is overlapped by the last marker. Now I want only the last marker removed.
I only know how to hide them all with:
directionsDisplay.suppressMarkers = true;
Is there a way to loop through the markers and remove the last one?
this is the code I use for the directions:
function calcRoute(waypts) {
var start = waypts[0].location;
var end = waypts[0].location;
var request = {
origin:start,
destination:end,
waypoints:waypts,
optimizeWaypoints: true,
provideRouteAlternatives:false,
travelMode:google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.suppressInfoWindows = true;
directionsDisplay.suppressMarkers = true;
directionsDisplay.setDirections(response);
console.log(status);
}else{
alert('SATUS:'+response.status);
}
});
}
Try this
In initialise
directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
then
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var route = response.routes[0];
var start =route.legs[0].start_location;
var end =route.legs[0].end_location;
addMarker(end);
addMarker function
function addMarker(pos){
var marker = new google.maps.Marker({
position: pos,
map: map,
icon: 'images/your image'
}
)
}
I have not tested this but you should get the idea
I am using the Google Maps API v3, and I have implemented a directions rendered based on a marker drag end function. But if you drag the marker again then the original set of directions are not removed.
The map is generated based of a geocoding request and autocomplete textbox for source and the destination is static. This all works fine. I have read the API documentation and it says use the .setMap(null); option but it is not clearing the directions, and I believe this is because I am not regenerating the map. My code for the rendering of the directions is below:
google.maps.event.addListener(markersrc, 'dragend', function () {
geocoder.geocode({ 'latLng': markersrc.getPosition() }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var request = {
origin: markersrc.getPosition(),
destination: markerdst.getPosition(),
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
directionsDisplay.suppressMarkers = true;
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directions_panel"));
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
});
});
Anyone have any idea how I can get the original directions cleared?
It seems to me that each time you drag the marker, you recreate the DirectionsDisplay and DirectionsService. Instead I think you need to create those as global variables, which only get updated by the dragend event listener.