CODEWITHSUNDEEP
google-maps
looneydoodle
looneydoodle

Reputation: 369

Adding transparent overlay on google map

I was looking at apartment listings when I came across this,

enter image description here

And I am wondering how it is achieved?

EDIT:

Found the image overlay using inspect element. Question is, is there an api to do things like this?

Upvotes: 4

Views: 5177

Answers (2)

Stan Quinn
Stan Quinn

Reputation: 503

The answer would be no. There's no API for adding fixed images over a google map. Why? Because it's the standard behavior for any div (if you want to mimic what they did, just put a div after the map div and position it absolutely...in this case top:0 and left:0 with 100% width and a gradient or static image as a background). You can place any div over any other div, even if it contains a google map. Now there are api's for placing items INSIDE the map...these drawings can be just about anything, but they require a lat/long boundary because they are inside the map. There are also map controls you can place on the map....similar to a fixed div, BUT it has a certain flow inside the map, so if you have a map terrain dropdown and you click it, if that dropdown overlaps another map control, that map control will move down.

Upvotes: 0

Stefan Kovachev
Stefan Kovachev

Reputation: 89

You can implement a custom map type with the help of the ImageMapType object. You can implement it to returned a darkened/half-transparent images for the map tiles. You can then overlay this map type over the normal one like so.

Upvotes: 2

Related Questions