Develop Reference

Wrong pop up gets opened on marker click

I have a lot of markers so i cluster them. I got problem where i want to remain my pop up open when user zoom out from the cluster and i found this solution
https://jsfiddle.net/sghL4z96/65/
Leaflet Markercluster: Exempt marker from clustering
it works fine. But the problem is when the markers are too close on the cluster itself
and when i try with this same solution i got this result
https://jsfiddle.net/s2mnvL5w/3/
where when i click on the cluster two markers show up.For example if i click on the left one i get pop up with text one.When i close this popup,i try again to open the left marker and then i get pop up with text two which is wrong.Instead i get one.Where is my mistake and hopw the solution can be adjusted to the markers with very near coordinates.
clustered.on('popupopen', function(e) {
console.log('open');
const m = e.popup._source;
clustered.removeLayer(m);
unclustered.addLayer(m);
m.openPopup();
});
unclustered.on('popupclose', function(e) {
console.log('close');
let m = e.popup._source;
unclustered.removeLayer(m);
clustered.addLayer(m);
m.closePopup();
});
UPDATED - THE FULL SOLUTION
https://jsfiddle.net/s2mnvL5w/24/

This is because you remove the layer from the clustered group. After adding it again to the group it has a new order.
You can do something like this:
let popup;
const mkMarker = function(lat, lng, txt) {
const m = L.marker(L.latLng(lat, lng));
m.addTo(clustered);
m.popupText = txt;
m.on('click',(e)=>{
var marker = e.target;
var latlng = marker.getLatLng();
var offset = [0,0];
if(marker._preSpiderfyLatlng){
latlng = marker._preSpiderfyLatlng;
}else{
offset= marker.options.icon.options.popupAnchor;
}
popup = L.popup({offset: offset}).setContent(marker.popupText).setLatLng(latlng).addTo(map)
})
return m;
};
And remove the popupopen / close listener function

How to add a click event to any of my markers which i have stored in an array

I'm working with leaflet js and I have an array in which i store my markers which are automatically added to the map after the location of the user has been obtained.
problem is that i want to add an onclick listener so that any marker that is clicked will run a function.
please help me out cuz i'm stuck right now.
//objects for markers
var allMarkers=[];
var AllMarkers = L.layerGroup(allMarkers);
var Allpoints=[{
"latitudes":9.4258946,"longitudes":-0.8842213, "names":"first", "eastings":556568, "northings":446445, "description": "aijaskj jnrkajra skjanjanek ", "elevations": 5668
},
{
"latitudes":9.4254946,"longitudes":-0.8812213, "names":"second"},
{
"latitudes":9.4054946,"longitudes":-0.8802213, "names":"third"},
{
"latitudes":9.4754946,"longitudes":-0.8712213, "names":"fourth"},
];
//automatically plot all previous markers
var point = L.point(9.2754946, -0.8912213);
q = 0;
while(q< Allpoints.length){
//create Marker here
_newMarker = L.marker(
[Allpoints[q].latitudes, Allpoints[q].longitudes],
{title: Allpoints[q].names,
riseOnHover: true,
} ).addTo(mymap);
allMarkers.push(_newMarker);
q++
}
//function to send back the details of the clicked marker to a paragraph in my index.htm
//PROBLEM
L.marker('click', markers, showMarkerDetails) //however the code immediately above does not work
function showMarkerDetails(){
$("#returnControlName").html(controlName);
$("#returnControlLocation").html(`${controlLat.toFixed(4)} , ${controlLong.toFixed(4)} `);
$("#returnControlEastings").html(controlEastings);
$("#returnControlName").html(controlNorthings);
$("#returnControlName").html(controlElevation);
$("#returnControlName").html(controlDescription);
}

With L.marker() you add new markers / points to the map, you can't add events like that to them. (L.marker('click', markers, showMarkerDetails) )
Change your code to:
//automatically plot all previous markers
var point = L.point(9.2754946, -0.8912213);
q = 0;
while(q< Allpoints.length){
//create Marker here
_newMarker = L.marker([Allpoints[q].latitudes, Allpoints[q].longitudes],
{title: Allpoints[q].names,
riseOnHover: true,
}).addTo(mymap);
_newMarker.informations = Allpoints[q]; // save the data to the marker to read it later out
_newMarker.on('click',showMarkerDetails); // add click event to the markers
allMarkers.push(_newMarker);
q++
}
function showMarkerDetails(e){
var layer = e.target // get the clicked marker
var infos = layer.informations;
console.log(infos.description);
$("#returnControlName").html(controlName);
$("#returnControlLocation").html(`${controlLat.toFixed(4)} , ${controlLong.toFixed(4)} `);
$("#returnControlEastings").html(controlEastings);
$("#returnControlName").html(controlNorthings);
$("#returnControlName").html(controlElevation);
$("#returnControlName").html(controlDescription);
}

How to get count of Markers within circle radius in Google Maps API v3

I have a Google map where I populate with multiple markers, I then add a addListener for right click event.
On a right click, I add a temp marker with a circle radius of 50000 meters,upon dropping this marker, I would like to get the count of markers that fall within the radius.

Thanks, I should have posted some code up front, but managed to resolve it on my own. as per below.
var loc1 = location; //Marker Radius Co-ords
var loc2 = new google.maps.LatLng(latSplit, lonSplit); //Marker Co-ords
var diff = (google.maps.geometry.spherical.computeDistanceBetween(loc1, loc2));
if (diff < circle.getRadius()) {
alert(loc2 + " Inside Radius");
} else {
alert(loc2 + " Outside Radius");
}

Google Maps with cluster of markers and their info window

I have a cluster of Google map marker’s. I am showing Google maps in a ModalPopupExtender on a button click. After map is loaded with marker’s I want to pop up info window on mouse over of marker’s. how can I keep the details of info window of each marker when map is loading with marker’s?.
$('#map-canvas').fadeIn('slow', function() {
google.maps.event.trigger(map, 'resize');
for (var i = 0; i < asGridselectedRows.length; i++) {
var row = asGridselectedRows[i];
var Latitude = asGridMasterTable.getCellByColumnUniqueName(row, "Latitude");
var Longitude = asGridMasterTable.getCellByColumnUniqueName(row, "Longitude");
var messno = asGridMasterTable.getCellByColumnUniqueName(row, "MessNo");
var messnumber = messno.innerHTML.substring(6, messno.innerHTML.length - 7);
var Lat = Latitude.innerHTML.substring(6, Latitude.innerHTML.length - 7);
var Long = Longitude.innerHTML.substring(6, Longitude.innerHTML.length - 7);
var myLatLng = new google.maps.LatLng(Lat, Long);
map.setCenter(myLatLng);
map.setZoom(13);
marker = new google.maps.Marker({
map: map
});
if (messnumber == '00')
{
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
}
else
{
marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
}
marker.setPosition(myLatLng);
marker.setVisible(true);
}
});

You need to build the info window as part of the event listener. See the example given in the answer here: Changing data in the info window with Google Map markers
You can add attributes to each marker so that these can be referenced in the hover event. In your case it looks like you could simply use the messno as an attribute and then reference your data table with the marker info in

Google Maps: remember id of marker with open info window

I have a Google map that is showing a number of markers. When the user moves the map, the markers are redrawn for the new boundaries, using the code below:
GEvent.addListener(map, "moveend", function() {
var newBounds = map.getBounds();
for(var i = 0; i < places_json.places.length ; i++) {
// if marker is within the new bounds then do...
var latlng = new GLatLng(places_json.places[i].lat, places_json.places[i].lon);
var html = "blah";
var marker = createMarker(latlng, html);
map.addOverlay(marker);
}
});
My question is simple. If the user has clicked on a marker so that it is showing an open info window, currently when the boundaries are redrawn the info window is closed, because the marker is added again from scratch. How can I prevent this?
It is not ideal, because often the boundaries are redrawn when the user clicks on a marker and the map moves to display the info window - so the info window appears and then disappears again :)
I guess there are a couple of possible ways:
remember which marker has an open info window, and open it again when the markers are redrawn
don't actually re-add the marker with an open info window, just leave it there
However, both require the marker with an open window to have some kind of ID number, and I don't know that this is actually the case in the Google Maps API. Anyone?
----------UPDATE------------------
I've tried doing it by loading the markers into an initial array, as suggested. This loads OK, but the page crashes after the map is dragged.
<script type="text/javascript" src="{{ MEDIA_URL }}js/markerclusterer.js"></script>
<script type='text/javascript'>
function createMarker(point,html, hideMarker) {
//alert('createMarker');
var icon = new GIcon(G_DEFAULT_ICON);
icon.image = "http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png";
var tmpMarker = new GMarker(point, {icon: icon, hide: hideMarker});
GEvent.addListener(tmpMarker, "click", function() {
tmpMarker.openInfoWindowHtml(html);
});
return tmpMarker;
}
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GSmallMapControl());
var mapLatLng = new GLatLng({{ place.lat }}, {{ place.lon }});
map.setCenter(mapLatLng, 12);
map.addOverlay(new GMarker(mapLatLng));
// load initial markers from json array
var markers = [];
var initialBounds = map.getBounds();
for(var i = 0; i < places_json.places.length ; i++) {
var latlng = new GLatLng(places_json.places[i].lat, places_json.places[i].lon);
var html = "<strong><a href='/place/" + places_json.places[i].placesidx + "/" + places_json.places[i].area + "'>" + places_json.places[i].area + "</a></strong><br/>" + places_json.places[i].county;
var hideMarker = true;
if((initialBounds.getSouthWest().lat() < places_json.places[i].lat) && (places_json.places[i].lat < initialBounds.getNorthEast().lat()) && (initialBounds.getSouthWest().lng() < places_json.places[i].lon) && (places_json.places[i].lon < initialBounds.getNorthEast().lng()) && (places_json.places[i].placesidx != {{ place.placesidx }})) {
hideMarker = false;
}
var marker = createMarker(latlng, html, hideMarker);
markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers, {maxZoom: 11});
</script>

You should probably create all your markers at an initial stage with your createMarker() method, and store the returned GMarker objects inside an array. Make sure to set the hide: true property in GMarkerOptions when you create your markers, so that they would be created as hidden by default.
Then instead of iterating through places_json.places, you could iterate through your new GMarker array. You would be able to get the coordinates of each marker with the GMarker.getLatLng() method, with which to check if each marker lies within the bounds.
Finally simply call GMarker.show() for markers that lie within the bounds, or GMarker.hide() to hide them.
You would eliminate the expensive destruction/creation of markers on each map movement. As a positive-side effect, this will also solve your GInfoWindow problem.

If you're using that many markers, make sure you use GMarkerManager. It's designed for many markers, with only a few visible at once.
http://mapki.com/wiki/Marker_Optimization_Tips