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
});
Related
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.
I've got a Google Maps widget working on an .xhtml page served by a JSF2 project in Java. The map displays, and I have a function for adding markers that works just fine. However, any attempt to use Geocoder seems to result in the returned status of 'ERROR'. Google Maps API mentions no such error status amongst its five possible candidates for return values of the 'status' variable.
Followng is a .js file deployed, and the offending function in question is codeAddress(). Similar code to codeAddress() works elsewhere online that I can find, so it must be something to do with the circumstances under which its being called. Given that the map displays just fine, and I can place markers, my expectation is that my session is just fine. This leaves me puzzled :( Does anyone know what 'ERROR' could come from??
var map;
var marker;
var geocoder;
function placeMarker(location) {
if (!marker) {
marker = new google.maps.Marker({
position: location,
map: map
});
} else {
marker.setPosition(location);
}
map.setCenter(location);
var field = document.getElementById("portCreate:coordinate");
field.value = "POINT (" + location.lat() + " " + location.lng() + ")";
}
function initialize() {
var mapOptions = {
center : new google.maps.LatLng(55.761123, 13.084717),
zoom : 5,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById("map"), mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
setMarker(document.getElementById("portCreate:coordinate"));
geocoder = new google.maps.Geocoder();
}
function setMarker(field) {
if (field.value) {
var regex = /POINT.+?([-0-9\.]+).+?([-0-9\.]+)/;
var matches = regex.exec(field.value);
placeMarker(new google.maps.LatLng(Number(matches[1]), Number(matches[2])));
}
}
function codeAddress(address) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
} else {
alert("Geocode was not successful for the following reason: " + status + "\nFor address " + address);
}
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?key=<API key here>&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
After having this same problem today I've remembered that instead of doing a link to the API I downloaded the code as .js. After changing it to a link it works agains. I think Google updates the script regurlaly, if it had any version conflict they return the ERROR status.
The documentation for javascript/geocoding shows 'ERROR' as a possible result:
"ERROR" indicates that the request timed out or there was a problem contacting the Google servers. The request may succeed if you try again.
I had the same problem. I was working with ASP .Net application. After I changed the ASP .Net button control to HTML input Button, it is working now. Not sure where the problem is.
<input type="button" value="Geocode" onclick="codeAddress()">
I was troubleshooting a similar issue, where I was able to recreate the ERROR status by canceling the google API http request before it returned a response.
Users search my map with the Google places API which adds markers to my map. I have a click event inside each markers infowindow to get directions to that marker.
How do I pass the coordinates of the selected marker to my google directions service request?
So far I declared var placeLoc = null; as a global variable. I defined placeLoc=place.geometry.location; inside my create marker function. Then I have:
function calcRoute() {
var start = myLatLng;
var end = placeLoc;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.BICYCLING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
The function renders directions to the wrong marker. I am guessing that it is just giving directions to the first marker in the array returned after the search and not the actual marker I selected. How do I provide the directions request the coordinates of a selected marker?
Below is the code that places the search results into the place variable:
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
// alert("getPlaces returns "+places.length+" places");
for (var i = 0; i < gmarkers.length; i++) {
gmarkers[i].setMap(null);
}
gmarkers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var place = places[i];
createMarker(place);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
// if (markers.length == 1) map.setZoom(17);
});
Something like this?
function createMarker(options) {
var marker = new google.maps.Marker(options);
google.maps.event.addListener(marker, 'click', function() {
placeLoc = marker.getPosition();
calcRoute();
});
return marker;
}
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.