disable clicking on javascript element beneath mask - javascript

I have the following problem;
I have a circle (square div made round with css3) where I want to put a clickable Google Maps map in it. So what I did is;
load the Google Maps element in my page
give the div where Google Maps is loaded in a mask
-webkit-mask-image: url(../images/maps_mask.png);
-webkit-mask-repeat: no-repeat;
looks great! but when i click in the corners (which are hided because of the mask) I can still drag the Google Maps map around !
And I don't want this!
Is there a simple solution for this?
kind regards,
Carl

You could try to catch all mouse-events that land onto the google map, calculate (by position) if the hit is outside of the visible area and cancel them if they do.

Related

How can i disable the ctrl key when zooming out/in on google maps in wix ? and how to add an image to be part of the google map/s?

This is my site : https://rhodan.wixsite.com/chocolade/radar-on-google-maps
I used the Wix editor to add image from my hard disk to this page and used also to add the google maps to this page.
but I have two problems:
how to disable the ctrl key when using the mouse wheel to zoom out/in in the google maps?
I want to use only the mouse wheel and when i try to use only the mouse wheel I'm getting this message I need to use the ctrl key + the mouse wheel and I want to disable and remove that message and only using the mouse wheel to zoom out/in.
the second problem is how can I make the image that I loaded to the page to be part of the google maps I mean now if I try to drag the google map with the mouse on the image part it won't let me only on the parts of the map without the image. the image is not moving with the map when I drag the map to any direction it's like the image is above the map and not part of it.
for example, to make something like this. not using this just the idea:
https://www.weather2day.co.il/rain-radar-google#radar

How to customize Gmap?

I am using Gmap on my website and I notice that i sets position:relative on the #map. How do I change this? I don't want any positioning on the #map div. I looked over the gmaps.js and couldn't find it.
Another problem is how to make the gmap load in satellite mode by default instead of map?
Also can I get rid of all the other things I get by default - zoomer, arrows, text at the bottom right etc. I just want a clean map in satellite mode.

How can I make a google map marker and shadow bounce together?

In Google maps API v3 I add a marker and a shadow. I'm using this as a bit of a hack because I have 2 elements to my marker (type and status) so I use the shadow option to display my second image. When the user highlights a marker, I bounce it for one second. All that works fine except that the clever Google programmers have made made the marker bounce upwards and the shadow bounce at 45 degrees (approx 1.30 on the clock face).
The question: is it possible to make both images bounce upwards, so they are together?
I think using custom icons where the shadow is "glued" into the same image is the easiest solution:
http://jsfiddle.net/jRkFp/ (click on the marker)
http://code.google.com/apis/chart/infographics/docs/dynamic_icons.html (see the Pins section)
I think I have seen the image files for the default marker somewhere if you must use those.

Display PNG over Google Maps without creating dead spot?

I'm overlaying a (mostly transparent) PNG on Google Maps using CSS, but it's creating a large dead spot on the map where the user can't drag the map.
Could anyone suggest how to get round this?
The obvious solution would be to use a marker overlay, but I can't do this - see Keep Google Maps marker in centre of map while dragged?
Thanks!
Try adding pointer-events:none; to the CSS for the overlay image, and see if this allows you to click through the image to the map. I tested this in Mozilla Firefox 6. You can click through the semi-transparent image and select the text:
http://jsfiddle.net/tJQWx/

Bing Maps custom NavBar textbox?

I'm interested in adding a textbox (and button) to the Default navigation bar in Bing Maps v7.
My intent is to add a place-name geocoder to help the user quickly zoom to a specific area on the map. (This is a service provided by Bing Maps API, I just need help adding the box to the control.) I can, but don't have to, use jQuery.
The website http://pietschsoft.com/post/2010/12/18/Bing-Maps-Ajax-7-Add-Custom-Navigation-Bar-Buttons-using-jQuery.aspx actually has some really great sample code showing how to add a button to the bar, though I can't seem to get a textbox to work properly. My suspicion is that Bing Maps is hijacking all of my key-presses to use for panning, etc., but I'm not positive.
Has anybody had any luck in doing this?
Thanks!
I solved the problem by putting an another div with the same background color and height, floating left at an x-offset of the width of the original navbar. The keypresses were being hijacked - it seems they've stolen all keyboard input for any elements that exist within the "Microsoft.Map" div. My div is one level higher up.
Here's how it turned out:
And if anyone's interested, the default height and color for the Bing Maps v7 navbar is 26px, #FAF7F5.

Categories

Resources