This is going to be a very simple question.
Is there a way of using <script> .... </script> within a Leaflet marker popup ? If not, is there a way around it (ie is there a way to save what the script returns and implement that return in the marker popup) ?
You may be mixing 2 actions: loading the script and calling the rateYo() function
Loading the script has nothing particular ...
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>
Then you must call the function when the popup opens:
var marker = L.marker([51.5, -0.09]).addTo(mymap)
.bindPopup("I am a popup.<div id=\"rateYo\"></div>");
marker.id = something;
marker.on('popupopen', function (e) {
// the id of the clicked marker is e.target.id
// retrieve the rating for this id and use it in the rateYo() call
$("#rateYo").rateYo({
rating: 3.6,
starWidth: "15px"
});
here is an example: https://plnkr.co/8PZIgd2g4Da6AHhWvC2o
Related
Hey guys I have a set of Markers that are getting created dynamically on a .each loops like so.
$.each(data, function(index, element) {
markerArr[element.id] = L.marker(map.unproject([element.LocationX,element.LocationY],map.getMaxZoom()-4)).addTo(map);
});
My question is how to open the popup for each popup on click and show the unique ID inside the popup?
I am able to do this if I were to declare each Marker with a unique name like so.
var marker1 = L.marker([158,395]).addTo(mapl);
var marker2 = L.marker([158,410]).addTo(mapl);
marker1.bindPopup("Kanye West");
marker1.on('click', function (e) {
this.openPopup();
});
marker2.bindPopup("50 Cent");
marker2.on('click', function (e) {
this.openPopup();
});
But I need to be able to open all Markers that are in the array instead.
Tried something like this with no luck
markerArr[this].on('click', function (e) {
this.openPopup();
});
Any help would be greatly appreciated.
Thank you.
You don't need to write the click event handler yourself. If you call marker.bindPopup("hello"), the popup will open automatically on click.
I am dealing with Google Maps here and javascript. I have an existing marker on my Google map and I can click on it and it displays a div. If I click it again, the div disappears. I gave this marker a specific, unique id.
There is also a Polygon on the map. I want when the user clicks on the polygon that the click event is activate for a marker that I will reference by the marker's id.
Is this possible? If so, let's say that the id of the marker is U123. How would I do this?
Here is the code I use to add an event to the polygon click:
google.maps.event.addListener(assetPolygons[polygon_count],'click', function (event) {new google.maps.event.trigger('U123', 'click');});
U123 is the name of the marker id. The above is not working.
var marker = new google.maps.Marker(markerOptions);
marker.setValues({id: 1}); // v3
marker.metadata = {type: "point", id: 1}; //v2 or v3
I guess the better way to do this is to store your marker in a global var and then do
$(".something").click(function(){
new google.maps.event.trigger( marker, 'click' );
// Here marker is a global var so accessible everywhere.
});
Two seconds in google found How to trigger the onclick event of a marker on a Google Maps V3?
The only difference in the function that was stated to work, wich is:
google.maps.event.trigger(markers[i], 'click');
and yours that i can see is the new, try removing it
I built a function that loops through the assetMarkers array that stores each marker. This works:
function ClickMarker(u) {
for (i=0;i<assetMarkers.length;i++) {
if (assetMarkers[i].id == u) {
google.maps.event.trigger(assetMarkers[i], 'click');
i = assetMarkers.length;
}
}
}
In the above function, the variable u is the id of the marker in the array assetMarkers (which is the array storing the map markers). When I create the marker, I set the id using marker.setValues({id: 'U123'}); where U123 is the id of the marker.
I have to loop through the assetMarkers array to find the one I am looking for.
I was hoping, the equivalent of document.getElementById(u) would exist in Google Maps so that I would not have to loop through the array. It would be great, Google API guys, if we programmers could do something like this:
google.maps.event.trigger(google.maps.getElementById(u), 'click');
Thanks for everyone's input! It was very helpful as I am a newbie to Google Maps.
I am using leaflet.js to display markers on a OSM map.
The problem is, that the first time a marker is clicked, the popup opens normally, but on a second click on the same marker the popup does not open anymore.
PS: Anywhere else in the code I close popups (with the closePopup() function). In the block below i even commented out the explicit closing of other popups once a marker is clicked.
PPS: My application runs on Ruby on Rails (ruby-1.9.3, Rails 3.2.16), and uses leaflet-rails (0.7.2)
bindListeners = function(marker){
marker.on('click', function(evt) {
//resize all markers' icons to default size
for (i=0;i<markersOfTheMap.length;i++) {
resizeMarkerIcon(markersOfTheMap[i], false);
}
//map.closePopup();
var infoBoxContent = buildInfoboxHtml(marker);
marker.bindPopup(infoBoxContent, {className: 'click-popup'}, {closeOnClick: false});
resizeMarkerIcon(marker, true);
marker.openPopup();
var popup = marker.getPopup(); // returns marker._popup
popup._isOpen = true;
console.log("is popup open? " +popup._isOpen); // true
popupsTestArray.push(popup);
console.log(popupsTestArray); // popup_isOpen is false...
});
I also faced the same issue. I am pasting here my piece of code. Hope It will help you out to sort out your problem.
marker.on('click', function (e) {
if (e.target._popup == undefined) { // same as e.target.getPopup()
$.getJSON(url, { entityObject: e.target.options.alt }, function (infoBoxContent ) { //e.target.options.alt contains entity Id from which we will get Infobox window content.
e.target.bindPopup(infoBoxContent).openPopup();
});
}
else {
marker.openPopup();
}
});
In If condition we fetch data from server side and bind it to marker popup.
And in Else condition there after same marker is clicked again we will show content from client side.
This code works fine me. If you have any queries then we can discuss here.
I wish to center a google map by clicking on a div within the page that is not part of the map. I tried this but it did not work
$('#myDiv').click( function() {
map.panTo(36.549362,-98.613281);
});
and i also tried this
$('#myDiv').click( function() {
map.setCenter(36.549362,-98.613281);
});
I think it should be something like:
$('#myDiv').click( function() {
map.setCenter(new GLatLng(36.549362,-98.613281));
});
ie. you have to make a LatLng object first and pass that, instead of the raw coordinates.
I don't know what version of GMaps you're using but check the documentation.
v3 Map doc, here you can see setCenter takes a LatLng.
You have to set is up as a new LatLng
var point = new google.maps.LatLng(36.549362,-98.613281);
$('#resetMapDiv').click( function(event) {
map.panTo(point);
});
I use Mapbox for a dynamic map on a website. It works really well except, I have a sidebar which list the pins with a little more description and an image. I want to make it so when I click on that sidebar, it would fire the click event of that marker on the map.
I used to do this all the time with Google Maps but now I'm stuck because even in the case that I can keep the instance of the marker, I cannot fire the click on it for some reason. It simply does nothing (maybe I need to re-bind the click event on it but I don't know how with mapbox)
I've encountered a few questions about this on Google and SO but none bring a real answer to that question except "keep the instance" which isn't always possible in some cases.
So basically I have a jQuery click event like this:
var marker = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [lng, lat]
},
properties: {}
};
if (isPin) {
marker.properties = pinStyles.pin;
} else if (isWinery) {
marker.properties = pinStyles.winery;
} else {
marker.properties = pinStyles.user;
}
marker.properties.title = locationName;
marker.properties.description = pin.description;
var markerObject = L.mapbox.markerLayer(marker);
// Add to cluster
markers.addLayer(markerObject);
$('#marker_list a.marker_item:last').click(function() {
var geoJson = markerObject.getGeoJSON();
markerObject.fire('click'); // does nothing (openPopup makes "Uncaught TypeError: Object [object Object] has no method 'openPopup' " so I guess I'm not doing it right)
});
And I have this (click event for mapbox marker):
map.markerLayer.on('click', function(e) {
map.setView(e.layer.getLatLng(), map.getZoom());
});
Anyone has an idea about wether 1) fix the non-firing event OR 2) make an HTML link fire a mapbox marker click event OR .openPopup?
Thanks and have a nice day!
MapBox's marker layer is a collection of Leaflet markers. You can create an href to a function that look for a particular marker based on it's layer id.
map.markerLayer.getLayers() returns an array of layer objects that contain both a _leaflet_id and the method togglePopup.
Try matching your href call to the leaflet id and then fire map.markerLayer.getLayers()[i].togglePopup()
Let me know if this helps.