I'm using the Infobox plugin for Google Maps V3 API (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html)
Is there anyway too close the infobox when the user clicks outside the infobox like on the map?
it's actually way easier if you have your infowindow as a global variable, or at least hold one variable that represents the single infobox you want to add at a convenient place.
edit: just to clarify: it should not be window.myInfoBox for example. With global I mean a single point where you reference your infobox
google.maps.event.addListener(map, 'click', function() {
if(infowindow){
infowindow.close();
}
});
that's all :-)
You will want to use addListener()
http://code.google.com/apis/maps/documentation/javascript/events.html#EventListeners
You can adapt the code found here:
google.maps.event.addListener(_point.popup, 'domready', function() {
//Have to put this within the domready or else it can't find the div element (it's null until the InfoBox is opened)
$(_point.popup.div_).hover(
function() {
//This is called when the mouse enters the element
},
function() {
//This is called when the mouse leaves the element
_point.popup.close();
}
);
});
Src:
Google Maps API v3 Event mouseover with InfoBox plugin
You can detect a map click with this:
google.maps.event.addListener(map, 'click', function() {
});
Infobox API:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html
This maybe useful for you..
var inside = false;
$('#foo').live('mouseenter',function(){
inside=true;
}).live('mouseleave', function(){
inside=false;
});
$("body").mouseup(function(){
if(!inside) $('#foo').remove();
});
Related
So I have a Google Maps API event listener for on click the map. But I don't think the variable scope is working.
google.maps.event.addListener(map, 'click', function (event) {
$scope.closeBox();
});
$scope.closeBox = function () {
$scope.showBox = false;
}
If I have $scope.showBox = true on the map and click the map it doesn't close. $scope.showBox is an ng-class that shows/hides the information box.
I just added a $scope.$apply() call and it worked
After some recent update on google Maps Javascript V3 API, I noticed that contextmenu started being shown when i make a rightclick on a marker. Basically the code is
google.maps.event.addListener(marker, 'rightclick', function (event) {
foo(marker);
});
I have already tried the option
google.maps.event.addListener(marker, 'rightclick', function (event) {
deleteMarker(marker);
event.stop();
return false;
});
But the context menu still continue to appear. I also put this on the whole map
$("#map").contextmenu(function (e) {
e.preventDefault();
e.stopPropagation();
return false;
});
And, rightly, contextmenu doesn't appear when clicking on map. How can I stop if also on marker rightclick?
This is an example for the issue: https://jsfiddle.net/rnxLum5j/
Had the same issue and solved it by deferring execution of showing dialog using timeout.
In your fiddle change the google.maps.event.addListener to
google.maps.event.addListener(map, 'rightclick', function (ev) {
setTimeout(ShowContextMenuGoolge, 0, ContextMenu, ev);
});
I also have this problem.
I think this is a bug of google maps 'rightclick' event.
I tried to stop propagation and cancel bubbling, but DOM 'contextmenu' event still firing on the open 'context-menu' element!
My solution stopping the event from firing on the context menu element.
var mapCanvas = document.getElementById("map_canvas");
$(mapCanvas).on('contextmenu', '.custom-context-menu', function (e) {
e.stopPropagation();
e.preventDefault();
return false;
});
This is an example for the bug: https://jsfiddle.net/rnxLum5j/
At the end i solved disabling the context menu on the div in which the map was in instead of the map itself.
I'm trying to write a custom event handler for CTRL + click in Leaflet. My problem is that the click location given by the map is different from the click location in the event handler, e.g. LatLng(51.49174, -0.11639) from the map click becomes LatLng(51.50938, -0.126) in the handler. The click locations match exactly if the map is the only thing on the page. Adding some other div elements above the map (like an <h1> title) makes the clicks not match. Panning the map also makes the click locations not match.
I'm wondering if I attached my L.DomEvent.on() correctly. Following the Leaflet Handlers tutorial, my code looks like
L.CtrlClickHandler = L.Handler.extend({
addHooks: function() {
L.DomEvent.on(document, 'click', this._captureClick, this);
},
removeHooks: function() {
L.DomEvent.off(document, 'click', this._captureClick, this);
},
_captureClick: function(event) {
if (event.ctrlKey) {
console.log('control click registered at layer '
+ map.layerPointToLatLng(new L.point(event.layerX, event.layerY)));
}
}
});
// add this to all maps
L.Map.addInitHook('addHandler', 'ctrlClick', L.CtrlClickHandler);
Here's a live example on JSFiddle.
I'm using Leaflet 0.7.7 due to some other dependencies in my code. Upgrading to Leaflet 1.0.1 makes it match better (e.g., LatLng(51.49868, -0.1018) vs. LatLng(51.4987, -0.1018)) but the two locations still are not exactly the same.
Am I attaching the L.DomEvent to the correct thing? Should that be attached to the map div somehow, as opposed to document?
Edit: Thanks to #AlexParij for the suggestion. I realized that panning the map also makes the clicks not match, with or without div elements above the map. This happens for Leaflet 1.0.1 as well as 0.7.7. I've tried every combination I can think of, combining different event locations (event.layerX, event.pageX, event.clientX, event.offsetX, event.screenX, and event.x) with projection methods layerPointToLatLng and unproject but none of them match the map click. Now I'm really confused... Fiddle with these different options and Leaflet 1.0.1: https://jsfiddle.net/c4tkyewz/
TL; DR: use map.mouseEventToLatLng() in a custom handler.
#AlexParij was correct; I was not using the correct definition of the layer points and container points. Inside the handler, event is different from Leaflet's internal mouse event (where the location is available from e.latlng).
I looked through Leaflet's core to find the answer. Getting the location from event requires taking the Mouse Event -> Container Point -> Layer Point -> latLng. Thankfully, the Leaflet developers already programmed a nice function for this: mouseEventToLatLng().
/*
* This is a custom handler to check if someone has control clicked
* the map and print the location of the click
*/
L.CtrlClickHandler = L.Handler.extend({
addHooks: function() {
L.DomEvent.on(document, 'click', this._captureClick, this);
},
removeHooks: function() {
L.DomEvent.off(document, 'click', this._captureClick, this);
},
_captureClick: function(event) {
if (event.ctrlKey) {
// translate mouse event to lat/lng (note: `mouseEventToLatLng()`
// calls Leaflet's `mouseEventToContainerPoint()` followed by
// `containerPointToLayerPoint()` and finally `layerPointToLatLng()`)
var latlng = map.mouseEventToLatLng(event);
console.log('Handler detected CTRL + click at ' + latlng);
}
}
});
// add this to all maps
L.Map.addInitHook('addHandler', 'ctrlClick', L.CtrlClickHandler);
Live example with Leaflet 1.0.1: https://jsfiddle.net/c4tkyewz/1/
Also tested with Leaflet 0.7.7.
As a bonus, to access the CTRL key directly from Leaflet's native handling of the click event map.on('click', function(e) {});, use e.originalEvent.ctrlKey.
On this website:
http://www.crunchpanorama.com/
you use the google maps zoom control slider to zoom and recluster markers. I want to capture this event as well and perform actions accordingly.
Problem is when reading google docs, all I could find is the zoom_changed event of map. However, this event is not only called when changing zoom using slider, but also when clicking marker (which zooms into marker). So zoom_changed will not help me:
google.maps.event.addListener(map, 'zoom_changed', function () {
...
I want to be able to target the zoom change on the control slider specifically. How can I go about this?
Maybe there's a workaround similar to this:
var self = this;
google.maps.event.addListener(marker, 'click', function() {
// Set a boolean variable to true to indicate a marker/cluster has been clicked
self._markerClicked = true;
});
google.maps.event.addListener(map, 'zoom_changed', function() {
// Check the boolean variable and run your code if it's false
if ( !self._markerClicked ) {
// Take action here
} else {
// Reset variable back to false
self._markerClicked = false;
}
});
Ran into this recently. This is the best solution I have found if you want to capture when the map default zoom buttons are clicked. This assumes that the zoom buttons are the only ones in the div map container.
$("#id-container-name").on("click", "button", whateverfunction());
Just as the Title implies, I just added a "center_changed" listener to my map and the function is running more than once. I'm assuming it's because the center of the map is changing a bunch of times before the map comes to a rest, but I thought that that's what "drag" was for and that "center_changed only fires once after it comes to a rest??? The only reason I know its firing a bunch of times is because I have a drop shadow on the icon and it gets darker and darker over about two seconds before its completely black. If anyone needs my code, its below.
google.maps.event.addListener(map, 'center_changed', function() {
var zoomLevel = map.getZoom();
if (zoomLevel > 7) {
clearAll();
addmarker1();
addmarker2();
addmarker3();
addmarker4();
}
else {
clearAll();
}
});
These two functions fire only after your map comes to a rest
If you want your function to execute only when user drags(not programmatically) then use...
google.maps.event.addListener(map, 'dragend', function(){...}
But if you want your function to execute even when dragged, zoom changed programmatically(e.g. setZoom , fitBounds), then use...
google.maps.event.addListener(map, 'idle', function(){...}