Develop Reference

How to close an info bubble when there is a click outside the info bubble and marker - HERE maps API

I have been trying to close an info bubble when the map only is clicked, but I can't achieve it.
I have tried the following
this.map.addEventListener("tap", this.handleMapClick);
private handleMapClick(evt: Event) {
this.clearOpenInformationBubble();
}
However, the tap event is triggered even when maps objects are clicked meaning that the info bubble remains closed when I click a marker.
I have also tried to add a 'blur' event listener to the bubble element, but that doesn't seem to work
const bubble = new H.ui.InfoBubble(evt.target.getGeometry(), {
content: ...
});
this.ui.addBubble(bubble);
bubble.getElement().focus()
bubble.getElement().addEventListener('blur', evt => {
this.clearOpenInformationBubble();
})
I was wondering if there is a way to listen for an event triggered by a map ONLY tap.
Here's a similar implementation in Google maps.
google.maps.event.addDomListener(map, "click", function() {
alert('Map clicked')
});

I think I'd try the answer here. In this answer, they wanted to close any other open infobubbles first. I believe if you remove the event listener on your group, keep the one on your map, and always remove open infobubbles you would be good. Then add logic to see if the event target value has data and show an infobubble.
This assumes your doing infobubbles based on markers having a data object associated with them.
Edit:
I was able to get this to work - again assuming your use case is markers to infobubbles.
map.addEventListener('tap', evt => {
ui.getBubbles().forEach(bub => ui.removeBubble(bub));
if(!evt.target.getData) return;
// for all objects that it contains
var bubble = new H.ui.InfoBubble(evt.target.getGeometry(), {
// read custom data
content: evt.target.getData()
});
// show info bubble
ui.addBubble(bubble);
});

You can check the event target in the callback function.
If it is the map, then only you close the InfoBubble:
this.map.addEventListener("tap", this.handleMapClick);
private handleMapClick(evt: Event) {
if (evt.target === this.map) {
this.clearOpenInformationBubble();
}
}
```

Google Maps V3 - Prevent Context Menu on Right Click on Marker

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.

AngularJS $location doesn't work with google.maps.event listener

I initialize a google map within a angularJS controller and add a listener to map event
google.maps.event.addListener(map, 'dragend', MapMoveAround);
......
function MapMoveAround() {
console.log($location.url());
$location.path('/other_path');
console.log($location.url());
}
The console shows the url is changed when I trigger the google map event, but I stay at the old page. If I change $location.path('/other_path') to
window.location.replace('/#/other_path')
it will go the new page, but "Back" button won't work.
Can anyone provide an AngularJS solution for it?

Run angular code through events will not run the digest cycle, in this case you need to run it manually using $scope.$apply() in order to getting work your $location changes.
Code
google.maps.event.addListener(map, 'dragend', MapMoveAround);
......
function MapMoveAround() {
console.log($location.url());
$scope.$apply(function(){
$location.path('/other_path');
})
console.log($location.url());
}

following code also working fine for ...
google.maps.event.addListener(map, 'dragend', MapMoveAround);
......
function MapMoveAround() {
console.log($location.url());
$timeout(function() {
$location.path('/other_path');
}, 500)
console.log($location.url());
}

google maps zoom control event

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());

Close Infobox when clicking on the map

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();
});