I created some markers on google map and pushed them in an array called 'markers', I deleted them with setMap(null), but know I need to re-add those markers, but I don't know how, I have all the objects in the array.
So loop over the array, calling marker.setMap(map);
Related
I have a Google Map object available on my window object like so:
var map = window.site.map.el;
That Map also also has a bunch of markers placed on it, I'd like to hide a Marker on that Map where the marker's place_id property is equal to "123" for example.
However I don't see a function I can call on the Map class that will return me an array of all markers placed on the map that I can then loop through and hide depending on the marker's place_id.
Google maps does not provide a way to get all Markers, you need to do it yourself
while adding marker to the map keep it in array
var myMarkers = [];
....
for(...) {
var marker = new google.maps.Marker({...});
myMarkers.push(marker);
}
Than you can hide any marker, just by setting map to null
myMarker[i].setMap(null);
Or bring it back
myMarker[i].setMap(map);
I created a prototype for a project I'm working on, in which the user should create various markers in a map, be able to remove them, calculate a route with the markers, and go back to manage the markers.
I used some code found here in geocodezip.com to calculate the route, and wrote some for the markers, etc.
My problem is that once the user calculates the route, no matter how he edits the markers, when clicking the button to calculate the route, the map only returns the route with the markers that were there on the first time he clicked the button. And the strangest thing is that I checked the coordinates that are being passed to the script that generates the route and the function is sending the markers as it should, but no matter the coordinates sent, it only works correctly on the first time.
Js Fiddle: https://jsfiddle.net/1kmg2u65/2/
The code is really really long so it's all in the Fiddle, but this is what it does:
1. User clicks on map, generate marker, marker goes to an array
2. If user deletes marker, it becomes null in array, to maintain the indexes
3. 'Clean' markers array receives all the markers in order, without the items that are null
4. A function is called with all the markers, this function creates the route
5. To manage the markers, a function reload the map just like it was in the start, but render all the markers that already are in the markers array
it works fine if you remove the conditional if (!window.tour) in Tour_startUp function definition.
So here is what I believe is going on.
In the function markMap() you are instantiating new markers that belong to the google map object.
for (var i = 0; i < markerElements.length; i++){ //Loop para gerar os marcadores
if (markerElements[i] != null){
marker = new google.maps.Marker({
position: markerElements[i].position,
map: map,
title: markerElements[i].title
});
}
}
This if fine, but you are not storing that constructed object anywhere. You need to be able to reference that marker to UN-associate it from the map.
At the end of the this for loop you need to add THAT mark to a global array so you can manage it later in the script.
EXAMPLE
// defined at the top of the script
var markerGlobal = [];
for (var i = 0; i < markerElements.length; i++){ //Loop para gerar os marcadores
if (markerElements[i] != null){
marker = new google.maps.Marker({
position: markerElements[i].position,
map: map,
title: markerElements[i].title
});
// push marker onto global array
markerGlobal.push(marker);
}
}
Now we can loop through the array and setMap to null
// un-reference marker from map
markerGlobal[2].setMap(null);
I see you tried to do this with the removeMarker() function, but it doesn't have the handles to the markers already added to the map.
Some Suggestions
If I was you, I would think about refactoring the code to have one multi dimensional object that holds all the markers, their row info, variables etc.
You could take it one step further and create a constructor function that handles the map and its associated markers. It would be most efficient.
Good luck.
Let's say I have the following objects:
var map = new google.maps.Map(...)
var marker = new google.maps.Marker(...);
I can add marker to map with:
marker.setMap(map);
If the marker already exists on the map, and I call marker.setMap(map) again, does the API actually redraw the marker? Or does it know the marker already exists on the map, so it doesn't take any further actions?
I am listening for events and need to either add or remove markers from the map when those events occur. I'm wondering if I can simply keep calling setMap(map) even if the marker already exists without performance suffering significantly, or do I need to be smarter and not call setMap in the first place if the marker is already on the map.
If you don't know the answer, do you have any idea how I could figure this out?
If the marker already exists on the map, and I call marker.setMap(map)
again, does the API actually redraw the marker? Or does it know the
marker already exists on the map, so it doesn't take any further
actions?
The setMap function work on the visibility of the marker... assing to the marker in which map object this marker must be place/visibile..
If you set marker.setMap(null) you don't destroy the marker simply is not more showed in the "map".
when you manage event on marker you can use setMap(null) for make the marker invisible.. if you have previuosly stored the marker object in some var..eg
var store_marker = marker;
you can simply turn it on again doing
store_marke.setMap(map);
You can use array for manage collection of markers
I have a script that adds markers one by one to a map
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51,-117)
});
marker.setIcon(getIconFile(initialIconId));
markers.push(new Array(id,marker)); // id, marker
marker.setMap(map);
later on in the script when I press a custom button I want to be able to change the markers icons. So I grab the marker by the id from the markers array and call:
markers[markerIndex].setIcon(getIconFile(newIconId)); // which returns a string url of the icon
However I receive: TypeError: markers[markerId].setIcon is not a function
I print the markerId and it is valid, I also print the result of indexing the marker markers[markerId] and it returns a marker object. I have no other way to debug this I am lost!
Thanks
It seems like you're pushing an Array into the markers, instead of just one element.
Why not:
markers = []
markers.push(marker)
markers[markerIndex].setIcon(getIconFile(newIconId));
or if you insist inserting an array:
markers.push(new Array(id,marker));
markers[markerIndex][1].setIcon(getIconFile(newIconId));
Is there any way to remove the markers that the directions put on the map? I have 4 locations that show on the map. A green arrow where the user is and 3 locations marked A, B, C. If I click on one it routes between the user's location and the marker. The problem is that google adds a new A & B marker to the map as the start and end of the directions. Now I have a couple A and B markers on the map and it's pretty confusing.
Thanks
In the DirectionsRendererOptions set suppressMarkers to true
This is an old post, but I ran on the same issue. I have map with my own markers, I would select few of them and starting point, then I would show directions with markers A, B, C... The problem was how to remove directions and show my markers again.
Here is what worked for me to remove direction paths with markers (A, B, C, etc..).
directionsDisplay.setMap(null);
directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
RefreshMarkers(); //your function to draw your markers
directionDisplay is declared globally. It's API v3.
Not sure if this is helpful or not. When you create a new GDirection and supply it with a map object, it will automatically draw the polyline to the map as soon as the direction is loaded. This also automatically adds the markers at the start and end of the journey.
I've noticed, however, that if you don't supply the map object initially and instead use the the 'load' event listener to manually add the polyline to the map, you get the line but not the markers.
//Don't supply a map to GDirections()
var direction = new GDirections();
//Make sure {getPolyline:true} is given to the load function
direction.load("here to there", {getPolyline:true});
GEvent.addListener(direction,
"load",
function(){ map.addOverlay(direction.getPolyline()); }
);
This might be easier than finding and removing the markers, especially if you're using the 'load' event listener anyway.
For each marker you want to remove, do
marker.setMap(null);
http://code.google.com/apis/maps/documentation/v3/overlays.html#Markers
Hit menu then layers and on the lower left press clear map. That should clear out everything on the map.
Normally you'd be able to simply do marker.setMap(null), but because the Directions call automatically places the A & B markers on the map, you do not have direct access to them and therefore cannot remove them in this way.