for a small project I am working on, I need to be able to place a marker on a leaflet.js powered image-map and update the position of this marker, if it gets dragged. I use the following code to try this, but it fails.
I get the error 'marker not defined'. I don't know why it's not working - maybe you guys could help me out? ;)
function onMapClick(e) {
gib_uni();
marker = new L.marker(e.latlng, {id:uni, icon:redIcon, draggable:'true'};
map.addLayer(marker);
};
marker.on('dragend', function(event){
var marker = event.target;
var position = marker.getLatLng();
alert(position);
marker.setLatLng([position],{id:uni,draggable:'true'}).bindPopup(position).update();
});
In the code snippet above, marker is not defined at the time the event handler is added. Try the following where the dragend listener is added immediately following the creation of the Marker:
function onMapClick(e) {
gib_uni();
marker = new L.marker(e.latlng, {id:uni, icon:redIcon, draggable:'true'});
marker.on('dragend', function(event){
var marker = event.target;
var position = marker.getLatLng();
console.log(position);
marker.setLatLng(position,{id:uni,draggable:'true'}).bindPopup(position).update();
});
map.addLayer(marker);
};
You were also missing a bracket at the end of your new L.Marker() line.
You also put position into an array in the call to setLatLng but it is already a LatLng object.
Related
i'm new to javascript, hope you'll forgive me my bad if i'm doing something wrong.
In fact, i've allready found a solution for my problem, but i don't get how exactly get it into my own code.
Google Maps API - bouncing marker issue
Unfortunately i can't just comment it because i'm new on stackoverflow.
My Problem:
I'm working on a map with several markers on it. If i click on a marker, i want it bouncing and switching its color by a different icon i set. All fine till this point, but at the moment all markers i clicked won't stop bouncing. I want the marker bouncing, till i click another marker. At this point the "old" marker should stop bouncing and just the new one start.
//Marker Icons
var unvisitedMarker = 'img/m1.svg';
var activeMarker = 'img/m2.svg';
var visitedMarker = 'img/m3.svg';
//Add Marker Function
function addMarker(props) {
marker = new google.maps.Marker({
position: props.coords,
map: map,
icon: unvisitedMarker
});
//Opens marker information
var marker.addListener('click', function() {
document.getElementById("paperContainer").style.top = '40vh';
document.getElementById("locationBar").style.top = 'calc(40vh - 2em)';
map.panTo(marker.getPosition());
//Panby the map-position
map.panBy(0, 350);
//Set active Marker Icon
marker.setIcon(activeMarker);
//Set Marker Animation
marker.setAnimation(google.maps.Animation.BOUNCE);
});
}
So i got this code from the other Thread i linked from user "doublesharp":
// track marker that is currently bouncing
var currentMarker = null;
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
document.getElementById('loc-info').innerHTML = html;
// remove the bounce from the "old" marker
if (currentMarker) currentMarker.setAnimation(null);
// set this marker to the currentMarker
currentMarker = marker;
// add a bounce to this marker
marker.setAnimation(google.maps.Animation.BOUNCE);
});
}
I don't know exactly how to implement this in my owm code. And further - how do i get realized to switch the icon after it stoped bouncing to the "visitedMarker"?
Thank you very much in advance!
The idea of that solution is to keep a reference to the clicked marker and modify that marker when a new one is clicked.
This is what I mean:
var currentMarker = null; // Define this variable preferably in the global context.
....
marker.addListener('click', function() {
if(currentMarker){ // Check if there is already an active marker
currentMarker.setAnimation(null);
currentMarker.setIcon(visitedMarker);
}
currentMarker = marker;// Keep a reference to this marker because it will became active.
document.getElementById("paperContainer").style.top = '40vh';
document.getElementById("locationBar").style.top = 'calc(40vh - 2em)';
map.panTo(marker.getPosition());
//Panby the map-position
map.panBy(0, 350);
//Set active Marker Icon
marker.setIcon(activeMarker);
//Set Marker Animation
marker.setAnimation(google.maps.Animation.BOUNCE);
});
I tried this following source code:
map.on('popupopen', function(e) {
var identifyMarker= e.popupopen._source;
});
I just referred some guides from other sources that _source can identify the marker.
But when I run this source code, there is an error which is came from "_source".
So is there any other ways to identify leaflet's marker? Is it _source is not compatible with current version?
As you see in the doc, Marker has a getPopup() while Popup does not have a getMarker()
When you bind the popup to a marker, you have to keep this information in the popup object.
var marker = L.marker([lat, lng]);
var popup = L.popup().setContent("blabla");
var popup.marker = marker;
marker.bindPopup(popup);
The you can get access to the marker in the popupopen event (note e.popup and NOT e.popupopen)
map.on('popupopen', function(e) {
var identifyMarker = e.popup.marker;
});
I am trying to create a function to be called by Button that drops a marker at the center of the mapView and allows it to be draggable until a button with id="doneMarkerbtn" has been clicked to disable dragging.
My following code was able to drop a marker at the center of the mapView. However, the marker is not draggable at all. Hope someone can look at my code and help me with this. Thanks.
Additional Info: This code is on a .js file which I import both at the <head> and <body> of my html. Import twice due to some other functions that requires it at different part of the html. Also note that this code is to be used for a Cordova/Phonegap app.
/* Draws marker on center of mapView and allow user to edit by dragging until done */
function drawMarker() {
//Extend the Default marker class
var PinMarker = L.Icon.Default.extend({
options: {
iconUrl: 'img/marker.png', //directory of pin image
iconSize: [26,40] //[width,height] of pin image in pixels
}
});
var pinMarker = new PinMarker();
var marker = L.marker(map.getCenter(), {icon: pinMarker, draggable: true}).addTo(map); //drop marker on center of mapView
marker.on('dragend', function (e) { //event activates at the end of a drag
var coords = e.target.getLatLng(); //gets new latlng of marker
var lat = coords.lat;
var lng = coords.lng;
var latlng = lat+","+lng;
marker.bindPopup(latlng).openPopup().update(); //popup showing dragend latlng
});
var stopDrawButton = document.getElementById('doneMarkerbtn'); //set #doneMarkerbtn as stopDrawButton
stopDrawButton.addEventListener('click', function(){ //when stopDrawButton clicked
marker.dragging.disable(); //disable dragging on marker
});
}
I am trying to create two maps, with two Markers (one marker on each map).
On dragging the marker, its position is updated in the DIV element in the page. And on moving the map, the marker is moved to the center of the map and the DIV element is again updated.
I have created functions to make the respective changes. To identify which marker or map is to be checked or moved, I pass the map or marker variable in the function.
However, the map showing weird behavior. On trying to drag a marker, it gets attached to my mouse pointer and is never dropped on the map and no event is triggered.
Also, moving the map does not do anything.
If I declare the function separately for each marker or map in the form
addListener(marker, 'drag', function() { //some code });
it works perfectly fine.
Not sure what is going wrong.
Here is the code snippet:
//add a listener for the marker movement
google.maps.event.addListener(marker_start, 'drag', handleMarkerDrag(marker_start, 1));
google.maps.event.addListener(marker_end, 'drag', handleMarkerDrag(marker_end, 2));
//add a listener for the map
google.maps.event.addListener(map_start, 'dragend', handleMapDragend(map_start, marker_start, 1));
google.maps.event.addListener(map_end, 'dragend', handleMapDragend(map_end, marker_end, 2));
and the functions which handle the events:
function handleMarkerDrag(marker, x)
{
//get the current location of the marker
var marker_pos = marker.getPosition();
//convert lat-lang datastructure into individual latitude and longitude
var lat = marker_pos.lat();
var lng = marker_pos.lng();
//now update the content in the html page
if(x == 1)
{
document.getElementById("longitude_start").innerHTML = lng+'<input type="hidden" name="longitude_start" value='+lng+'>';
document.getElementById("latitude_start").innerHTML = lat+'<input type="hidden" name="latitude_start" value='+lat+'>';
}
else
{
document.getElementById("longitude_end").innerHTML = lng+'<input type="hidden" name="longitude_end" value='+lng+'>';
document.getElementById("latitude_end").innerHTML = lat+'<input type="hidden" name="latitude_end" value='+lat+'>';
}
}
function handleMapDragend(map, marker, x)
{
//get the current location of the marker
var marker_pos = map.getCenter();
//set marker to the enter of the map
marker.setPosition(marker_pos);
//convert lat-lang datastructure into individual latitude and longitude
var lat = marker_pos.lat();
var lng = marker_pos.lng();
//now update the content in the html page
if(x == 1)
{
document.getElementById("longitude_start").innerHTML = lng+'<input type="hidden" name="longitude_start" value='+lng+'>';
document.getElementById("latitude_start").innerHTML = lat+'<input type="hidden" name="latitude_start" value='+lat+'>';
}
else
{
document.getElementById("longitude_end").innerHTML = lng+'<input type="hidden" name="longitude_end" value='+lng+'>';
document.getElementById("latitude_end").innerHTML = lat+'<input type="hidden" name="latitude_end" value='+lat+'>';
}
}
If I declare the function separately for each marker or map in the form it works perfectly fine. Not sure what is going wrong.
The difference is that the first attempt provides a function as argument, but the other attempt(that fails) is a function-call(which will be executed immediately).
Wrap the function-call into an anonymous function:
//add a listener for the marker movement
google.maps.event.addListener(marker_start, 'drag', function(){handleMarkerDrag(marker_start, 1);});
google.maps.event.addListener(marker_end, 'drag', function(){handleMarkerDrag(marker_end, 2);});
//add a listener for the map
google.maps.event.addListener(map_start, 'dragend', function(){handleMapDragend(map_start, marker_start, 1);});
google.maps.event.addListener(map_end, 'dragend', function(){handleMapDragend(map_end, marker_end, 2);});
Each time I click on the map a new marker is placed on the map. The problem is that I need only one marker and if I click several times, each time a new marker is added.
How do I change the code so only one marker is placed and when the map is clicked again it changes its location?
Here is my code so far:
function clicked(overlay, latlng) {
var icon3 = new GIcon();
icon3.image = "marker.png";
icon3.iconAnchor = new GPoint(15, 40);
var marker2 = new GMarker(latlng, { icon: icon3, draggable: true, title: 'Drag me' });
map.addOverlay(marker2);
}
I would recommend keeping an instance of marker2 outside of the clicked function, then if marker2 is null, make and add a new one like you are now, otherwise call marker2.setLatLong(latlng); to update it's location.
Untested example code:
var marker2;
function clicked(overlay, latlng) {
if (marker2 == null) {
var icon3 = new GIcon();
icon3.image = "marker.png";
icon3.iconAnchor = new GPoint(15, 40);
marker2 = new GMarker(latlng, { icon: icon3, draggable: true, title: 'Drag me' });
map.addOverlay(marker2);
}
else {
marker2.setLatLong(latlng);
}
}
You will need to implement some sort of check to see if the marker has already been placed. One option would be to keep a list of markers already added and check that list for a marker at a specific point before calling the functions to add the marker to the map. If you need a code sample, let me know.
Well, dont bother, I figured it out myself. I just used map.clearOverlays(); before the marker is pplaced and that solved the problem.