Google Maps Styling API. Adjust transparency/opacity - javascript

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.

Related

Overlay div on top of JavaScript element

I would like to overlay a div(1) with a background image over the top of another div(2) which contains JavaScript (in this case Google maps API v3). Is this possible?
I've tried messing with z-index no luck, and I cannot use absolute positioning as i rely on the div(1) to position other div's.
A brief example can be found here - _
Trying to get the _ speech bubble to overlay the Google map.
Firstly, a code example would be a good idea, because there are a lot of details we need to know. (for example. what other divs rely on div(1)'s position?)
You cannot overlay divs in the box-model or inline(model).
You can try using negative margin to move the div(1) over div(2), but this is not the elegant solution.
You should reconsider using absolute positioning, as it's clearly the preferable solution.
I would suggest placing the div(1) with the background image below a semi-transparent Google maps container, because then you could still have access to the Google Maps Controls. This could be accomplished by using the opacity and z-index CSS properties on both containers.
Here is a JS fiddle with a live demo using the Google Maps API: jsfiddle.net/Xk87Y/

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.

Google Maps v3 Marker shadow z-index

I replaced marker shadow for background image of icon, so it will look like a frame of the image. And it looks fine. The problem is that somehow shadows has the same z-index so if two markers are together we can't see the frame (other image covers it). Because every icon has grater value of z-index than shadow. How can I change this?
The marker-shadows are always placed inside a different overlay(overlayShadow) , so you will not have any chance to move a shadow in front of any marker.
There may be different options, for example you can ommit the shadow and create a second marker using the shadow-image.

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.

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/

Categories

Resources