I'm using the Google Maps v3 library, with the Multi-Marker library which extends the functionality of Google Maps for super fast adding of map marker icons to a map.
I can't figure out how to remove a single, individual map marker using the multi-marker library linked above.
Does anyone have any ideas how I'd do this using the multi-marker library (and/or Google Maps)? I've tried contacting the lead developer of the project but am not getting a response.
Thanks for any help.
Also, linked is more information on this library
http://blog.redfin.com/devblog/2010/07/introducing_multimarker_the_fastest_way_to_add_many_hundreds_or_thousands_of_markers_on_google_maps.html
UPDATE:
I have linked example code of what I'm doing. I want to dynamically remove specific map marker icons (overlays) but am struggling on how to do that. Any advise would be very appreciated. Thanks
Live example:
http://multimarker.googlecode.com/svn/trunk/fast-marker-overlay/maps-v3/example/clickable.html
Normaly, using only the google maps api, to remove an overlay from the map you would need to call the setMap(null) method on the overlay.
As I can see, the Multi-Marker library uses an array to hold all the markers and creates an overlay to show on the map, an overlay that contains the markers. To remove one, it should work to remove the marker from the array (you need to know its position in the array) and redraw the overlay.
Edit:
You need something similar to function clearOverlays() { var i = overlays.length; while (i--) { var overlay = overlays[i]; if (overlay) overlay.setMap(null); delete overlays[i]; } }
But you'll need to know the position in the array of the marker you want to delete. The function will look like this:
function clearOneOverlay(var position) { var overlay = overlays[position]; if (overlay) overlay.setMap(null); delete overlays[position]; }
try this: remember which marker you click and then remove it later
consider following code(Google Maps v2)
var current_marker;
GEvent.addListener(marker, "click", function() {
current_marker = marker;
});
//remove later
current_marker.setMap(null);
Related
Hi all I am creating an Angular 6 project and I am looking to implement asset tracking utilizing google maps api. However, I was wondering if AGM-Map supports everything Google Maps Api does such as heatmaps, and asset tracking because I can only seem to find basic placing markers and circles on a map.
I will say the majority of the functionality of the Google Maps is in AGM, if not you can get your questions answered in the official forum. Also, there are a lot of dependencies that people created to fill this functionalities that were missing.
Here's a small demo, showing how to use the map and showing how to use a marker from the map. This map will add a new marker wherever you click on the map and if you click on a marker it will erase it.
https://stackblitz.com/edit/angular-google-maps-demo-d9iec2
HTML
<agm-map
[latitude]="lat"
[longitude]="lng"
[zoom]="zoom"
[disableDefaultUI]="false"
[zoomControl]="false"
(mapClick)="mapClicked($event)">
<agm-marker
*ngFor="let m of markers; let i = index"
(markerClick)="eraseMarker(m)"
[latitude]="m.lat"
[longitude]="m.lng"
[label]="m.label">
</agm-marker>
</agm-map>
TS
eraseMarker( marker: Marker) {
const positionArray = this.markers.indexOf(marker);
this.markers.splice(positionArray, 1);
console.log(this.markers);
}
Also reference this for the heat map:
https://www.npmjs.com/package/agm-overlays
https://github.com/SebastianM/angular-google-maps/issues/1423
https://www.npmjs.com/package/agm-heatmap
So I am creating a map using Leaflet and Mapbox with multiple overlays and base maps. Currently I have a layers control where these are separated and you can only show one base map at a time, but all the overlays can be shown at once.
However, I have two overlays which interfere with each other and I would like to make it so that if one is checked in the control, the other is unchecked and vice versa. Is there any way to do this?
I am anticipating something like this, but am open to any suggestions.
var layer1 = L.mapbox.tileLayer('mapid1');
var layer2 = L.mapbox.tileLayer('mapid2');
var layerControl = L.control.layers(baseMaps, {"L1": layer1, "L2": layer2}).addTo(map);
map.on("overlayadd", function(e) {
if (e.name === "L1"){
L.layers.control.uncheck(layer2);
} else if (e.name === "L2") {
L.layers.control.uncheck(layer1);
};
});
Thank you!!
Working fiddle.
I don't know if there's an easier way. It seems the library doesn't offer many options to manipulate the L.control.layers overlays.
What I'm doing is firing a click on the conflicting overlay. To achieve this, a little DOM manipulating is needed. You can store an id reference when creating overlay's label.
I know how to add a layer with markers, which I can toggle on/off and how to add GeoJSON layer to my map.
But I can't mix these functions.
I need to create a toggling layer from GeoJSON (polyline layer).
Is it possible to get what I need without any external plug-ins or scripts?
GeoJSON Layers and Markers can be used together without problem.
To be able to toggle your layers, you need to catch some sort of click event from something you can click on, for example a button.
From my research what I found is if you need a custom button, it is not so quick to implement yourself, so you might need to use one of the available plugins.
If you still do not want to build a button or use a plugin, you could for example set a click event on the map itself, which toggles the GeoJSON layer on and off.
I took the GeoJSON example from the leaflet website and changed it so it toggles the GeoJSON layer on and off:
var geoLayer = L.geoJson([
// ...
]);
map.on('click', function() {
if(map.hasLayer(geoLayer)) {
map.removeLayer(geoLayer);
} else {
map.addLayer(geoLayer);
}
});
Hope that helps..
Edit:
I changed the example to use the layer control of leaflet.js
which is much better...
var baseLayers = {
"Markers": markerLayer,
"GeoJSON": geoLayer
};
L.control.layers(baseLayers).addTo(map);
Didn't know about this ;)
If you want checkboxes instead of radiobuttons, use this instead
L.control.layers(null, baseLayers).addTo(map);
http://codepen.io/anon/pen/qEaEBg
I host a leaflet map and want to link to certain marker on that map from an a-element outside the map. I want the marker to behave like it was clicked, when the link is clicked.
Clicking on
My Link
should activate my marker
L.marker([52.121935,11.627137], {icon: photomarker}).addTo(map)
.bindPopup("<b>This is a marker</b>") ;
How can I achieve that? I got a hint, that it can be done with
marker.fire('click')
but I dont get it. Where should I put that? I am pretty new to javascript...
You can see the whole map here: http://bit.ly/VtFXFN
save reference
var t = L.marker([52.121935,11.627137], {icon: photomarker}).addTo(map)
.bindPopup("<b>This is a marker</b>");
in a
My Link
I have a Map with custom style and its working great,
I was wondering if I can somehow control the location of the map using some links in my page,
suppose I have 2 locations, I want to have
Location1
&
Location2
Then when I click on Location 1 map goes to that location , and same story for location 2, is it possible with jquery?
It would also be great if I can add a custom marker to each location too.
Thanks.
Yes, you can even do it without jquery, the panto method is what you want to use, https://developers.google.com/maps/documentation/javascript/reference#Map basically, just add a call to a predefined function into your anchor onclick event (or use a click handler in jquery to wire it up).
using jquery, you would need something like:
$("#location1").click(function(){
var pos = new google.maps.LatLng(-25.363882, 131.044922),
g_map.panTo(pos); //reference to globally defined google maps object
});
Here is a simple example from the google api documentation that can easily be retrofitted using the hints I have provided above:
https://google-developers.appspot.com/maps/documentation/javascript/examples/event-simple
if your instance of map is named "map", you can use:
Location1