Removing routes rendered on a Google Map - javascript

I'm trying to do something that I gather has been done quite a few times before, although I'm having some difficulty accomplishing it.
I have a webpage that displays three Google Maps.
For each of these google maps, I have a text box that accepts a post code / zip code, and a "get directions" button.
Clicking on each of these buttons uses the google.maps.DirectionsService object to display ONE set of directions in ONE panel centered at the bottom of the page.
My issue arises when I try to find a new route by searching again. As you can see in the image below, both routes are rendered.
I have one marker at the end which is in a markers collection.
I've read a few times now about how you can loop through this array and use marker.setMap(null) to clear this marker.
However, I can't seem to clear the actual routes after each specific search.
Has anybody had any problems with clearing markers from multiple maps?
Do you have to totally reset the map in some way?
If you have to clear markers, at what point in the lifecycle of the process should you do it so that your new journey appears after the search, but the old one is removed?

I use the same google.maps.DirectionsService object for all three Google maps, and they all call the same method to calculate directions, but passing in their own map object as a parameter.
function calcRoute(startPoint, location_arr) {
// Create a renderer for directions and bind it to the map.
var map = location_arr[LOCATION_ARR_MAP_OBJECT];
var rendererOptions = {
map: map
}
if(directionsDisplay != null) {
directionsDisplay.setMap(null);
directionsDisplay = null;
}
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
The gist being that if directionsDisplay != null, we not only pass null to setMap, we also nullify the whole object afterweards, and I found this fixed it.

I dont know the answer.... most likely all u need to do is depending on circumstances:
// put the codes after direction service is declared or run directionsService //
directionsDisplay.setMap(null); // clear direction from the map
directionsDisplay.setPanel(null); // clear directionpanel from the map
directionsDisplay = new google.maps.DirectionsRenderer(); // this is to render again, otherwise your route wont show for the second time searching
directionsDisplay.setMap(map); //this is to set up again

This is the only part you need:
// Clear past routes
if (directionsDisplay != null) {
directionsDisplay.setMap(null);
directionsDisplay = null;
}

This works for me
// on initiate map
// this listener is not necessary unless you use listener
google.maps.event.addListener(directionsRenderer, 'directions_changed', function () {
if(directionsRenderer.directions === null){
return;
}
// other codes
});
// on clear method
directionsRenderer.set('directions', null);

Related

How Can I animate Bing map pushpins based on a live GPS feed

I have looked over the bing maps documentation trying to find an answer to my question. I would prefer to do everything using the bing maps api and not have to add a third party library if possible.
Question: How can I animate a pushpin to make a smooth transition from one set of gps coordinate(longitude/latitude) to another in order to simulate smooth movement of a Pushpin on Bing maps?
Question: can deleting an entire object out of the map.entities array waste enough resources to cause performance issues? If so how can I change the pushpin latitude and longitude properties without deleting the entire object?
Sample code of trying to change the pushpins properties without deleting the object out of the array. This code does not work… I am unsure why it is not working?
map.entities.get(theIndexOfThePushPin)._location.latitude = newLat;
map.entities.get(theIndexOfThePushPin)._location.longitude = newLon;
I create a pushpin like so - This works fine
map.entities.push(new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(lat, lon), {
text: text,
visible: true,
textOffset: new Microsoft.Maps.Point(0, 5)
}));
Pseudo code for my recursive angular $http call
function BusMoveGPSRefresh() {
$http.get(resourceURL)
.then(function (data) {
if ('if pushpins have not been created') {
//create pushpins...
}
} else {
//delete pushpins out of the array and then recreate them
//with updated lon/lat. Or just update existing objects lon/lat properties if possible?
}
}
BusMoveGPSRefresh();//after everything is done then go get more info and start again. recursion...
}, function (reason) {// if fail than do
console.log(reason);
console.log("This Is not Working!!! Dang!!");
});
}
Any insight into the problem would be greatly appreciated! Thanks!
I could not find a simple answer for adding animation. I did find a site that gave a step by step tutorial on a more in-depth answer on how to animate pushpins.
Answer: 1 -- tutorial on how to animate bing map pushpins
https://blogs.bing.com/maps/2014/08/07/bring-your-maps-to-life-creating-animations-with-bing-maps-javascript/
Answer: 2 -- this is how to update the pushpin location without deleting the pushpin object out of the entities array.
Instead of deleting the entire pushpin object find the pushpin index and then use the property "setLocation()" and then add a new location.
//check to make sure that the lat and lon have
//changed if it is still the same location do nothing. else update
if (map.entities.get(indexOfPushpin).getLocation().latitude != lat
|| map.entities.get(indexOfPushpin).getLocation().longitude != lon) {
map.entities.get(indexOfPushpin).setLocation(new Microsoft.Maps.Location(lat, lon));
}

Edit existing Google Maps element

For a website I'm using Google Maps to add polylines to a map to display a route. Some routes consist of multiple legs (stages) and I'm trying to add the polylines 'on request'. So only if a user chooses to show a leg, it will draw the polyline. Also the user might choose a completely different route and this new set of polylines should be drawn on the map as well.
My problem is that I can't seem to figure out or find how to select an existing map. I start out by creating a map using the following code:
qMap = new google.maps.Map(document.getElementById(mP.target), mapOptions);
mP.target contains a string with the canvas id and mapOptions is just a object with some options, nothing special.
So I do all kind of stuff with qMap, like adding markers, drawing polylines etc. And this shouldn't just be done at map initiation, but also when the user wants to add something. qMap isn't a global variable and I rather not have it being a global either.
I've tried qMap = google.maps.Map(document.getElementById(mP.target)) and other similar methods. With no success. I'm hoping you can help me out finding a way to this without global variables! Thanks!
There are a couple of things you could try.
1) Wrap your code in an immediately invoked function. This way any variables are contained within the function's scope and don't escape to pollute the global variable space which I guess is your main concern.
(function () {
var mapGlobal = new google.maps.Map(target, options);
function thatDoesSomething(){
// do something with mapGlobal
}
}());
2) Use a static object which might be handy for organising your code.
var Map = {
map: new google.maps.Map(target, options),
thatDoesSomething: function () {
// do something with this.map
}
};
3) Or combine them.
(function () {
var Map = {
map: new google.maps.Map(target, options),
thatDoesSomething: function () {
// do something with this.map
}
};
}());

Need to redraw a map with new data (in conjunction with CartoDB.js)

I seem to be having some trouble with reinitializing a Leaflet map object. I am running an init() function that starts by initializing a map, adding a tilelayer and layer with polygons, and then adding sublayers which color the polygons according to a ST_Intersects query. The issue is that this function is tied to an AJAX call that is caused by a click event but does not update the data according to the new parameters sent to the map. I don't think I am explaining this very well, so here is a bit of my code:
success: function(data) {
init(data);
}
function init(data){
// initiate leaflet map
alert("start");
var map = L.map('cartodb-map').setView([40.750028, -73.926768], 11);
alert("map made");
//create sublayers, etc
}
What happens is that the first time init is run, both 'start' and 'map made' alerts work, and the map is made according to the data. Any further calls to init simply alerts with "start" and "map made" is never alerted so I believe the problem is with reinitializing the leaflet map. What should I do to fix this?
Not sure the problem without seeing more of your code, but you could try calling map.remove(); the second time around. So:
if (map) {
map.remove();
// add in new map initialization here
} else {
var map = ...
}

Google Map Marker with custom numbering

I have a Google Maps marker function that successfully creates markers on a map like this:
// A function to create the marker and set up the event window
function createMarker(point,html) {
var marker = new GMarker(point,{title:html});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
Here is a tinyurl of the exiting code: http://tinyurl.com/b8f9b4l
Using this solution: Google maps: place number in marker?
I've updated this line of code but it is not numbering. What am I doing wrong?
var marker = new GMarker(point,{title:html,icon:'icon: \'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld='+ (position) +'|FF776B|000000',});
The icon property just needs to be the url. You don't need the extra "icon:", and you should drop the extra comma at the end (IE seems to throw an exception when it finds a dangling comma). Also, the parenthesis you don't need - but probably aren't hurting anything.
{
title:html,
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=' + position +'|FF776B|000000'
}
I see where you got the idea. Idk why s/he got a point for that. The extra "icon:" messes it up.
Try this as a test, it should make sure you don't have any problems with the variables inside the url.
{
title:html,
icon: 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=4|FF776B|000000'
}

remove route with google map

I got a small app that use the Direction Service feature of Google Map. It is working well, I can change routes, but I have a small problem, where a user could go back to a list of markers after tracing a route.
I can't find a way to delete routes with google map. For markers I store them and do setMap(null), do not see a way here...
You could also use:
directionsDisplay.setDirections({routes: []});
In this way, you can keep using one map with one renderer for all routes.
if you are using DirectionsRenderer to display the routes, you can call setMap(null) on it too. That way you delete the displayed route.
Using the example code here
http://code.google.com/apis/maps/documentation/javascript/examples/directions-simple.html
just call
directionsDisplay.setMap(null);
The other answers did not work for me. I found a solution from this question
define directionsDisplay only 1 time(outside of the click-handler)
This is the fix
// Clear past routes
if (directionsDisplay != null) {
directionsDisplay.setMap(null);
directionsDisplay = null;
}
Since on each call, new instance of DirectionRenderer created thats why each new instance is unaware of previous instance.
Move
var directionsDisplay = new google.maps.DirectionsRenderer();
to the global(at the top where all other Global variables have been initialized.)
By doing so, each time you would be using single instance of DirectionRenderer.
I had similar problem, I tried with directionsDisplay.setMap(null); but it didn’t work.
The problem was the directionsDisplay object which I created was declared locally.
I changed it to global and every time the function is called, it will use the same global directionsDisplay object and make changes to it. This will definitely remove the previous route displayed on same object.
set strokeWeight: 0 then polyline will hide
It's important - at least it was in my case - that while directionsDisplay can be declared globally the instance has to be created after the map object otherwise it gave a reference error
var map;
var directionsDisplay;
function initMap() {
map = new google.maps.Map(...);
directionsDisplay = new google.maps.DirectionsRenderer(...);
}
function yourFunction() {
// your code
directionsDisplay.addListener(...);
}

Categories