is it possible to show hand cursor on mouseover KMLLayer in Google Maps 3?
I see the two solutions (but it seems that they cannot be used):
handle mouseover event for KMLLayer and change cursor in CSS
handle mouseover event for Map and check if cursor's location is contained by KMLLayer
Do you have any other ideas?
Thanks
The kml polygon cannot have a mouseover event so 1. is not possible.
As for second i really don't see an easy way out.
If you could change the format of the data to something else than kml things would be way better.
You can't have mouseover event, but you can set a click listener onto the layer, which will show the hand cursor.
var layer = new google.maps.KmlLayer('http://...');
google.maps.event.addListenerOnce(layer, 'click', function () {
// do nothing here
});
Now whenever you mouse over an area defined in the KML it will show the cursor. You can also obtain the location of the mouse (if the user clicks on the KML Layer) because that will generate a KmlMouseEvent which will contain the LatLng of the point they clicked. It will also tell you information about which KML Placemark they clicked. You can then do your calculations here to see if it's contained by the KML Layer you want...
From what I know you can enable/disable cursor pointer in google maps v3 over kml by the option clickable:
var kml = new google.maps.KmlLayer(
kmlUrl,
{
suppressInfoWindows: true,
preserveViewport: true,
map: null,
clickable: false
}
);
Related
Problem
My segment works like this. When I drag the map around (Google Maps Javascript API), I want a circle rendered at map centre to disappear. When the dragging is done, I want the circle to move to the new centre BEFORE becoming visible again.
What ends up happening is that the circle becomes visible and then jerks over to the new position, even though I have them one before the other (set position, then change the visibility.)
Attempt
Here is the code that I was using for this segment:
control.getCircle().setCenter(latLng(latitude, longitude));
control.getCircle().setVisible(true);
Where latLng is a wrapper function I made to get LatLng object and control is the control object from angular-google-maps.
Even though setCenter is first, the circle still becomes visible before it is moved. Is there anything I can do about this? I have tried to wrap it in a promise, callbacks, etc. but nothing seems to do the trick.
Thanks!
Try with listeners on event center_changed , event idle or event dragstart
google.maps.event.addListener(map, 'center_changed', function() {
control.getCircle().setCenter(latLng(latitude, longitude));
});
google.maps.event.addListener(map, 'dragstart', function() {
control.getCircle().setVisible(false);
});
google.maps.event.addListener(map, 'idle', function() {
control.getCircle().setVisible(true);
});
I have a map with a heatmap utilizing the google visualization heatmap layer
jsfiddle here
If I try and add a normal map marker it fails with an uncaught type error somewhere in the google api.
The marker.setMap(map) line seems to happen, (inspecting the marker, it has a map property) but whatever this triggers on the map itself seems to fall over.
I've tried unsetting the heatmap layer before setting the marker, even tried not initialising the heatmap layer with the same results.
I'm beginning to think that by including the visualisation library I am losing the ability to add a map marker. If this is the case has anyone come across a workaround?
You initially create the marker without a map-property, currently the marker will appear when you click somewhere (not only on the marker), because the lnk-variable will be set to document, not to the link:
var lnk = $(document, '.marker_toggle')
but it should be only:
var lnk = $('.marker_toggle')
Demo: http://jsfiddle.net/doktormolle/Avxap/
I'm creating marker and circle around 500 area. When user will be out of the boundary by drag the map another circle will create within same area of new generated marker. Issue is that its creating circle around previous generated marker instead of current generated marker.
You can check here:
http://jsbin.com/exiram/1
Can anyone help me please?
Pay atention with the events in tme map. for every pan "drag the map" you make a new marker in center of the map and a new circle for that marker.
probaly, you have a listener that capture all mouse events and call the code to make markers and circles.
you can make 2 buttons in your page, one to make a marker and other to make a circle.
Im a little bit busy to post a full answer so please excuse my psudo code
Somthing like this will work !
var map; // OUR MAP OBJECT
var circle; //OUR CIRCLE
var center; // lat long holder
google.maps.event.addListener(map, 'drag', function() {
center = getCenter();
circle.setCenter(center);
});
In the Google Maps API v3, how can I get the waypoint markers from the DirectionsRenderer in order to add click events to them (such as a delete menu).
Until a better solution can be found here is the work around that I have employed. The basic idea is to put your own marker on top of the waypoints and bind a click event listener to your marker. I have made a jsfiddle demonstrating the idea.
It definitely isn't perfect, but with a custom icon instead of the default marker it could look sort of natural.
Another way, which doesn't involve putting new markers on the map, would be to detect DOM click events on the map widget. The idea is simple. When a click is detected:
convert all waypoints' LatLng coordinates to coordinates on the screen (or, in fact, on the map widget) using MapCanvasProjection
calculate distances between waypoints and the point clicked. If user clicked close enough to any of the waypoints (the distance is lower than the radius of a waypoint icon) - display a menu for that point
I coded a complete solution in java for gwt. It should be pretty straightforward to get it translated into javascript.
Instead of creating a click event on a waypoint, you can create it on a marker, and assign it a high z-index so it overlays the waypoint.
Create the single markers and assign the a high z-index
marker = new google.maps.Marker({
map:map,
position: new google.maps.LatLng(1.99, 2.99),
});
marker.setZIndex(999);
Add a listener to the markers
google.maps.event.addListener(marker, 'click', function(event){
alert(marker.title);
});
And now create the waypoints.
Link: http://www1.qhoach.com/
When you drag, this map is panned... But if you drag on KML features (icon with circle), nothing happens
First of all,in your application there are four level of maps including the vector layer you mentioned with circle icons in your question.
0: "Đường Sá" ||---> Overlay Tiles
1: "Vệ Tinh" ||---> Overlay Tiles
2: "TMS Overlay" ||---> Markers ~ Icons
3: "KML" ||---> Vector
Analysis:
Starting with zero to last one,only vector seems to be the last one,others stays as overlay tiles.In order to come this problem we have to focus on marker layer,namely features (icons).
As you have seen on map,click event for map has been triggered when you try to drag the map around.You can't drag because event registration is working for marker layer first not for the map.That means in order to drag the map,moving mouse(drag) after click must follow.Since you're trying this on vector layer,there is no chance to pass the event to overlay layers.
Solution:
I propose you two ways to achieve this bug-type problem.
Let this be the long way
There is a control in OpenLayers known as SelectFeature inherited from Handler.Feature.This control generally allows vector feature from a given layer on click on hover.Which means this handler can respond to mouse event related to any drawn features.Only callbacks are associated with features,needing one of them click.Now all we have to do is to fall click event back to as we pan for overlay tiles.
var selectFeat = new OpenLayers.Control.SelectFeature(
vector, {toggle: true, clickout:false});
selectFeat.handlers['feature'].stopDown = false;
selectFeat.handlers['feature'].stopUp = false;
map.addControl(selectFeat);//instance of map
selectFeat.activate();
Once this control is activated you have to ensure your layers to pass events through another layer.To do that,simply
layer.events.fallThrough = true;//both for vector and marker layers
After all these actions we made so far,one last thing left to do:
That's switching the order of markers and kml layer.
And this should be the easiest way
That's z-index on layers.You can check in above sequence of layers that the layer which has highest id has also highest z-index.
layer.setZIndex(...any number...);
In addition to this solution,easy way allows only you to drag through map,when all sudden clicking features of icons may lost without long way,so it's your choice to leave them behind.
Mouse events do not want to propagate through an svg Vector overlay to layers underneath.
The solution above demands all marker HTML layers have higher zindex than all Vector SVG layers.
The following CSS provides a potential/partial work-around, propagating events through the svg element, but only where there is no vector elements within the svg overlay:
/** Hack so mouse events propagate(bubble) through svg elements, but not the
images within svg */
.olLayerDiv svg {
pointer-events: none;
}
.olLayerDiv svg * {
pointer-events: auto;
}
Combine the above CSS while adding fallThrough:true to all OpenLayers events objects within maps, layers, and controls.
// map events
var map = new OpenLayers.Map(div, { fallThrough:true } );
// layer events
var lvec = new OpenLayers.Layer.Vector( .... );
lvec.events.fallThrough = true
map.addLayers([lvec])
// all map controls
var ctrl = new OpenLayers.Control.SelectFeature( lvec, {...
fallThrough: true, autoActivate:true });
map.addControl( ctrl )