Display PNG over Google Maps without creating dead spot? - javascript

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/

Related

Show simple image on Google Map API

I want to show a simple image on my map like a rectangle with the Top left corner and the Bottom right corner.
To be able to do the following:
With the "green part" being an png image (So a rectangle, with transparent and visible parts).
How can i perform that using the Google Map API ? I didn't find the resource on the documentation.
Thanks
I finally found the answer, you need to place your image with two marker.
Check this answer: https://stackoverflow.com/a/20254806/5384382

Google Maps Styling API. Adjust transparency/opacity

I understand that Google Maps Styling API can be used to configure the display of the Map on a device. I wanted to know whether it is possible to make this view transparent (or in my case more "translucent").
I want to draw the entire map as a kind of an overlay, with an average opacity so as to appear as a translucent overlay over the background. Is that possible?
Based on my Google Maps documentation, there wasn't a styling property for transparency.
I solved this by changing the opacity of the google maps style element.
google.maps.event.addListenerOnce(map, 'idle', function() {
$('.gm-style').css("opacity", 0.65)
});
This isn't a perfect solution since the entire map gets more transparent - the background and the font/roads. I would prefer a way to make the background more transparent than the important information (roads/text) for a sharper contrast.
A better solution would be welcome.

Map image with zoom in and zoom out as well as marker on different position of image

I am having trouble in developing mobile-web application. I want to allow users to upload map as an image of any location and other will tag or add marker on different position of it. I want want this functionality with zoom in and zoom out. I am able to do this without zoom in and zoom out. Can any body help me to achieve this by adding zoom in and zoom out on image with tags.
Have a look here https://github.com/can3p/iviewer/wiki. it is jquery component that you can use and has examples of zooming -in and -out with the coordinates and markers.

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.

disable clicking on javascript element beneath mask

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.

Categories

Resources