I am using Google Maps API to provide a form in a custom Map Overlay, similar to a native InfoWindow. I used an example by google to create a custom overlay, using their OverlayView Prototype.
Eventually this overlay doesn't have the same behaviour InfoWindow has regarding editing. Interacting with the window results in interaction with the map. One can neither select text in the window nor edit an input-field. Events are delegated to the map.
I already tried to play around with z-index, which won't work.
In their example you can't select text either - therefore you might have a look at their source.
It actually is a question of event propagation. Google provides another less obvious example which solves the problem:
http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.5/src/infobox.js
---> UPDATE 01/2015
Ian added another example that blocks propagation of all map events in comments.
Related
I have a project using the Google Maps JS API and I'm loading data onto it using the loadGeoJSON method. I also add a click listener to the map's data object.
In that click listener handler, I extract the mouseEvent which tells me the x,y that the user clicked as well as if they were holding down shift/alt/ctrl. Something changed recently though because I can't detect shift/alt/ctrl any more. They are always false.
Any help would be greatly appreciated. This fiddle should show more clearly what I'm talking about, just click on one of the 'google' letters.
fiddle
I use the following code (I quote parts of it) to post markers on a google map by right click to a point.
google.maps.event.addListener(map, 'rightclick', function(event) {
// code for open bubble for new marker
});
I need to open the bubble, also when someone do a long press tap on his tablet. Basically I need to make the application usable also for tablet/mobile users.
I read about jQuery plugins that handle touch events, but I don't know how to use them. I need a simple solution based on the code above (to run the "//code" which open the bubble.
Well, you can use the tabHold function on jQuery, with the click event in Google Maps JS API v2.
The taphold function in jQuery, can get the tab and hold action on tablet. But it does not return a lat lng to us.
For lat lng, we can grab it from the Google Maps Onclick function.
So we can combine the two like the following:
1. let tabhold set a flag, to indicate that this click function is from tabhold
2. on the onclick function, check if this current click event is from tabhold, if so, perform the action.
I have a quick demo on jsfiddle, I just copied and pasted some code so it looks kind of ugly. But hopefully it helps.
I Have a div section named 'MapPanel' in which I defined the Google Earth Plug-in.
I have a form next to it and I wish that on a certain event the "focus" of the web page will be on the Google earth so that for example that I can move the map with the arrows.
I have tried $("#MapPanel").focus() without success.
The GEWindow object has a focus() method for this purpose.
You would call it like so, where ge represents the GEPlugin object.
ge.getWindow().focus();
I'm using OpenLayers and I'm having a problem with select feature functionality:
When there is an EditingToolbar added to the map, the SelectFeature control isn't working properly. It doesn't select the feature, it can only highlight it.
I guess that's because the click of the DrawFeature Control and the SelectFeature Control interfere.
The only solution I managed to come up with is to deactivate the EditingToolbar.
This is the eaxmple that I use to find a solution to the problem. I simply add an EditingToolbar to the map from my console and try to debug from there:
http://openlayers.org/dev/examples/highlight-feature.html
How can I solve this problem without deactivating the EditingToolbar?
Thank you for your time and kind concern.
The way I figured out how to do it is to do:
editing_toolbar.controls[2].deactivate();
Now I can select the features that I need.
Of course, editing_toolbar is the reference to the EditingToolbar object and the control is chosen at random; in reality you need to check all controls and find the one that is active, and then deactivate it.
I am using the Bing Maps AJAX Control 7.0
I would like to add a custom event handler to the pushpins that are part of a driving route.
I know how to add custom events to map entities I have created myself and have a reference to. But the entities that make up a driving route are created internally and automatically added to the map. Is there a way I can attach and event handler either before or after they are added to the map?
Specifically I would like to add a custom onmouseover event to the waypoint pushpins that are on the driving route so that a custom icon is displayed when hovered over. I have read a suggestion to add a css class with pseudo :hover selector to the pushpins through the typeName property in the PushpinOptions but this does not work. The AJAX control itself uses the javascript event to change the icon image on mouse over, so setting the background css property on :hover never works, it gets covered up by the default hover icon.
I need to add a custom onmouseover event to the driving waypoint pushpins so that I can display a custom icon and disable the default behaviour. How do I do this? Thanks.
The only solution I can think of is to examine the HTML output of the drive route pushpins and hack their event bubbling. I examined the HTML of the drive route pushpins, and with V7 ajax api their id all seem to start with the prefix DDWaypointPushpin. So the hacky solution will be to find these pushpins in the DOM and override the default event handlers on them somehow. For example, if you wanted to prevent the default behavior of the mouseover event on the pushpins, you can match the id string using jquery and bind to the mouseover event, and prevent it from bubbling up.
$("div[id*='DDWaypointPushpin']").bind('mouseover', function (e) {
//$(this) will match your pushpin div, do whatever you want with it
// Stop the event from bubbling up, so the default MS mouseover behavior is prevented
e.stopPropagation();
});
If you want to display a custom icon, in your mouseover handler look for the <img> element under $(this), and change its src attribute to whatever you like.
I have discovered that there is an undocumented property of the PushpinOptions object - hoverIcon
I added some code to the directionsUpdated event of the DirectionsManager object that iterated through the entities on the map. I looked at the Waypoint entities and saw they have both _icon and _hoverIcon internal properties. As there is an icon property in the PushpinOptions I checked to see if a hoverIcon property could be used as well, and it can!
As far as I know the hoverIcon property is not documented. But this is a much easier way and probably the proper way to add a custom hover image to a pushpin.
It would help if this was reported to Micorsoft so they can update their documentation. I have never reported a documentation error to Microsoft before so if you know the best way to do this please let me know.