how to: when marker is clicked - dim the map and show a big div instead of an infobox on top of the map with information

Question

I have a Google Map with filterable markers and info-boxes containing simple information about each marker( when you click them ), but was wondering if this is possible:

When you would click on a marker - instead of a default info-box a big div appears on top of the map with tabs which shows all the possible data I will provide about a marker via JSON ( images, links, pictures ).

How would you approach about implementing this functionality?

Answer 1

In your loop to add markers, add something like this:

google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
           ... your code ...
        }
     })
)

In your code you need to determine the map size and put a translucent DIV over top, then show your own HTML absolutely-positioned DIV inside the map's weapping element.

Answer 2

you can also change the map style when clicked in the marker.

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
       map.set('styles', markerSelectedStyles);
    }
 })

)

You need to create your own version of a darker map.

Maps Style Wizard

And create a style like this for instance:

var markerSelectedStyles = [ {
"stylers": [
  { "invert_lightness": true }
]}
]