Develop Reference

Set context menu over HERE map

Is it possible to set something like context menu or spoiler over map, using HERE?
If you know, how to do it, please, let me know,i'll appreciate it

You can listen for a 'contextmenu' event on the map instance. Here is an example:
map.addEventListener('contextmenu', function (evt) {
evt.items.push(new H.util.ContextItem({
label: 'Zoom in',
callback: function () {
map.setZoom(map.getZoom() + 1);
}
}));
});

Javascript Google maps drawing events

I'm having a problem with the event listeners provided by Google maps API. The thing is, that some events run, some not. I have a setListeners function which sets the listeners after the polygon overlay is complete. The events I would like to hook are: set_at, insert_at, remove_at and click. Now the click events run correctly, but the others not. What could I do wrong? Here is the code:
self.setListeners = function () {
//this click event runs correctly
google.maps.event.addListener(self.map, 'click', function (e) {
self.clearSelection();
})
console.log(self.drost);
if (typeof self.drost != 'undefined') {
self.drost.addListener('set_at', function (e) {
console.log(e.overlay);
});
self.drost.addListener('insert_at', function (e) {
console.log(e.overlay);
});
self.drost.addListener('remove_at', function (e) {
console.log(e.overlay);
});
//this click also runs correctly
self.drost.addListener('click', function(e){
self.setSelection(self.drost);
})
}
}

The events set_at, insert_at, remove_at need to be added to the path of the polygon, not the polygon itself.
related questions:
Apply event listener to an editable polygon
calculate area of a drawn polygon on google map javascript

Try adding the listener with google.maps.event:
google.maps.event.addListener(self.drost, 'set_at', function() {
console.log('it works!');
});

Make an OverlayView clickable in Google Maps V3

I'm trying to add a mouseover event listener to a Google Maps overlay view. I've been following this question, but can't get the listener to work. This is my code:
InfoWindow.prototype = new google.maps.OverlayView;
InfoWindow.prototype.onAdd = function() {
this.getPanes().overlayMouseTarget.appendChild(this.$content.get(0));
this.getPanes().overlayMouseTarget.parentNode.style.zIndex = 100000;
google.maps.event.addListener(this, 'mouseover', function() {
console.log('MOUSEOVER');
});
};
This doesn't give any errors, but also doesn't do anything on mouseover. I've also tried using this.listeners:
this.listeners = [
google.maps.event.addDomListener(this, "mouseover", function (e) {
console.log('MOUSEOVER');
})
];
but it doesn't help either. What am I doing wrong?

For the domListener to work, you need to attach it to a dom node:
google.maps.event.addDomListener(this.$content.get(0), "mouseover", function (e) {
console.log('MOUSEOVER');
});

JqueryUI Google Map will not Resize unless clicked

I have written a click function that resizes and recenters the map when the map is clicked.
Is there a way to make the function run automatically when the Tab Loads? This is the function.
mapResize = function () {
var mapFirstClick = false;
var center = new google.maps.LatLng(32.565243, -97.130531);
$("#tabs-4").click(function() {
mapFirstClick || setTimeout(function() {
google.maps.event.trigger(map, 'resize');
mapFirstClick = true;
map.setCenter(center);
}, 250);
});
},
You can see how it acts at http://l2technotes.dyndns.org by clicking on the Location tab, the Map does not load correctly but if you Click on the map it resizes and recenters correctly which tells me the click function is working.
As always, any guidance would be greatly appreciated.

First of all: you are using jqueryUI 1.10 . Most of the ressources you'll find on the web refer to 1.8 but there have been some major changes, e.g. in 1.10 there is no longer a show-event, use activate instead:
$('#tabs').tabs({
activate: function (event, ui) {
if (ui.newPanel.attr('id') =='tabs-4') {
ui.newPanel.click();
}
}
});
The documentation for 1.10 you'll find here: http://api.jqueryui.com/1.10/tabs/

Google Map event bounds_changed triggered multiple times when dragging

I have a google map with markers. I want my markers to be refreshed when the map is moved/zoomed...
Google recommend to use the event bounds_changed for that, but when I move the map, the event is triggered for each pixel that I move the map. I want the map to be refreshed only when the user stopped moving the map, i.e. when he released the mouse button after dragging.
How can I do that ?

It turns out it was a reported bug: http://code.google.com/p/gmaps-api-issues/issues/detail?id=1371.
The Google team recommend to use the event "idle". For example :
google.maps.event.addListener(map, 'idle', function() {
});

While the selected answer is best for most circumstances. If you want to control the delay yourself, you can simply use something like;
var mapupdater;
{....}
google.maps.event.addListener(map, "bounds_changed", mapSettleTime);
function mapSettleTime() {
clearTimeout(mapupdater);
mapupdater=setTimeout(getMapMarkers,500);
}

Add a timeout, that runs your code 500ms after the event fires, each time the event fires clear the timeout and create a new one.
google.maps.event.addListener(map, 'bounds_changed', (function () {
var timer;
return function() {
clearTimeout(timer);
timer = setTimeout(function() {
// here goes an ajax call
}, 500);
}
}()));

You should check how a debounce function works. A nice article by Taylor Case define it as follows:
This function is built in order to limit the amount of times a
function is called — scroll events, mousemove events, and keypress
events are all great examples of events that we might want to capture,
but can be quite taxing if we capture them every single time they
fire.
So you define the function somewhere in your code:
function debounce(fn, time) {
let timeout;
return function() {
const args = arguments;
const functionCall = () => fn.apply(this, args);
clearTimeout(timeout);
timeout = setTimeout(functionCall, time);
}
}
Then you just use that function when adding your listener:
google.maps.event.addListener(myMap, 'bounds_changed', debounce(() => { /* Do something here */ }, 250));
It seems that 250 ms is a good frequency to use here.

try using both zoom_changed and dragend

Here is a little snippet that will remove all redundant 'bound_changed' call's:
var timeout;
google.maps.event.addListener(map, 'bounds_changed', function () {
window.clearTimeout(timeout);
timeout = window.setTimeout(function () {
//do stuff on event
}, 500);
}); //time in ms, that will reset if next 'bounds_changed' call is send, otherwise code will be executed after that time is up