Develop Reference

Leaflet JS Map: Popup on MouseOver opens in incorrect location

I'm using Leaflet jS for a map and it works well except for a requirement to popup the name of the country when hovering over a country on the map.
On using the following code
layer.on({
mouseover: function over(e) {
layer.bindPopup(L.popup().setContent(feature.properties.name));
layer.openPopup();
},
mouseout: function out(e) {
layer.closePopup();
},
});
The Country name does pop up however it's slightly off in int's location. For example the US when hovered over the popup opens in the Pacific west of Mexico. All popups are slightly off from where the hover has occurred.
Do you know how the popups can be set to popup always directly on the country?
Thanks in advance for any help on this.

While not explicitly documented, when you bindPopup on a Leaflet path (vector) Layer, it will position the popup tip on the Layer "center", i.e. the middle compared to its bounds.
In your case with USA, the Layer is probably a multipolygon that includes Hawaii. That shifts the Layer bounds far to the South West, leading to a layer "center" off Mexico.
You could compute a more sensible "center" for your use case, and set the popup position explicitly on map rather than binding it to a Layer (center).
However you will probably in some cases (typically for small Layers) hit the classic usability issue of blinking mouseover popup: if the popup is open under the mouse, a mouseout event fires, which closes your popup. Then a new mouseover event fires, which opens a new popup, etc.
The usual workaround is to use a Leaflet Tooltip instead, for which you do not need to implement the mouseover/mouseout stuff yourself. And you can use the sticky option to position it next to the mouse cursor, to get rid of any center computation.
If true, the tooltip will follow the mouse instead of being fixed at the feature center.

How do you configure HERE Maps Javascript to automatically set the required zoom value?

I'm using HERE Maps for Javascript in my Angular application.
I have a search functionality implemented, where the user can type in a location, the search API would provide suggestions and once the user selects a location, the map would automatically focus/center the selected location.
All works fine, except the zoom.
I want the map to zoom the map dynamically, based on the selection. For example, if the user selects a country like 'India', the zoom value would be much lesser to show the whole of India, or if the user selects an airport, say 'New Delhi Airport', the zoom value would be higher, to focus just the airport.
How do we do this with HERE Maps Javascript? Any ideas?

Take a look at the method setLookAtData that applies on the map viewmodel:
map.getViewModel().setLookAtData({
bounds: userSelectedGeometry
});
When you use setLookAtData with only the bounds property specified, it sets the center of the bounds as a the map center, and automatically calculate the required zoom that fits the bounds of the selected geometry (e.g. India, New Delhi Airport, ...) within the map viewport.
See the API Reference

How to stop flickering of Markers on mouseover and onmouseout events in react-google-maps?

I'm using React.js and react-google-maps to implement this. I'm trying to display the InfoWindow on Hovering any Marker and hiding when mouse leaves the Marker.
Here's the link for code. (https://codesandbox.io/s/loving-microservice-88oop)

It's quite simple actually.
Let's go through this together.
You are hovering the element
The element gets visible, you are now with your mouse cursor over the element
Because you are now no longer hovering the marker (you are now actually hovering the popup) the popup get's hidden.
Now that the popup is hidden you are basically starting from 1) again
How to prevent this:
Option 1: Change your hover so that it's also applied to the popup and not just for the marker
Option 2: Change the markers position. You can do this by changing this line (line 36 in your example):
position={{
lat: selectedPark.geometry.coordinates[1] + 0.0500,
lng: selectedPark.geometry.coordinates[0]
}}

I solved this by using pixelOffset option available as props. In the other answer, It was using lat as offset but when we zoom, it no longer persists in that position.

Google Maps Not Loading Image and Marker

This is my gmaps avscript code, i print maps as many as my data database, these gmaps are inside at collapsed div:
var maps = {!! $maps !!};
var googlemaps = [];
$.each(maps, function( key, item ) {
googlemaps[key] = new GMaps({
div: '#gmaps-' + key,
lat: item.latitude,
lng: item.longitude,
width: '100%',
height: '100%',
});
googlemaps[key].addMarker({
lat: item.latitude,
lng: item.longitude,
width: '100px',
draggable: false,
title: 'Marker'
});
googlemaps[key].setCenter( item.latitude, item.longitude );
googlemaps[ key ].setZoom( 15 );
});
The div by default is collapsed, after i open the div and show the gmaps, it's just showing blank grey maps, i try drag my map to search my marker, it only view a little part of the gmaps panel at the top left.
after i resize my browser the marker finaly can drag to center of panel but still grey.
I zoomed out/in and the image loaded, the image only loaded when i zoom in and out.
I really confused searching so many answer but not solving my problem.
Please help me..

When the map div, or it's parent, or it's parent parent (any predecessor) has display:none style, and you create the map, the map view won't initialize properly. You have to trigger resize event on map for it to reinitialize the map view.
In GMaps the google.maps.Map object is accessible using .map attribute, so your code will have to look something like this:
google.maps.event.trigger(googlemaps[key].map, "resize");
Remember to trigger it AFTER the div is visible. To be sure you can put the resize trigger into a timeout, when they click the div to display.
Side note: I am not sure if you are aware, but every map you create is a separate API call so to have multiple maps results in lot of separate API calls and if you don't have maps for business license you can hit limits pretty fast.

Get / set a map image mouse location

I need to develop asp.net webApplication from scratch without using google map api, that set location on a map image when user selects any location, and set any image map locator on the current location that user has selected it.
More clear, its like google map. I display a map for user and then user selects any location to build his/her house for example, then on mouse leave i set an selector image for that location "like the red arrow on google map", and save the selected image pixels, on Get process of user data i put that image selector on the location user has previously selected.
I need any article that could help me on that and tools that can supports me, Thanks.

Assuming jQuery:
Observe the related mouse-event(e.g. click), it will have the properties pageX and pageY(the mouse-coordinates relative to the document).
The offset of the "map" you will get via offset()
So the click-coordinates(what you have to store) related to the map will be:
x: event.pageX-mapOffset.left
y: event.pageY-mapOffset.top
To draw the marker(red arrow or something) you must calculate the offset from the click-coordinates(A default-maps-marker is anchored at center/bottom).
Substract the height and the half width of the marker from the click-coordinates to get the correct position.
Result: http://jsfiddle.net/doktormolle/jth8fdy4/