I have a very busy Google Maps app that I have built and I'm trying to create a "buffer zone" around the outside edge of the map so that the google map mands won't put things there. My solution was to create invisible divs and add them to the map as controls, one for each of the edges. This seems to work great as all of the google mands see them and adjust accordingly, and the map appears normally. For example, fitBounds ensures my bounds is not under the invisible layers. For the top where I have a control bar it's a perfect solution, but for the other edges where there is nothing, it creates a problem - I can't click on the map or info windows under these controls as they take the click event.

So I'm looking for one of 2 solutions: 1) can I make my invisible controls pass clicks through to the map, or; 2) is there a better way to pad the edge of the map; something that doesn't involve a much of math every time I want to call a fitBounds or panTo would be preferred as I automate a lot of map motion

Cheers

I have a very busy Google Maps app that I have built and I'm trying to create a "buffer zone" around the outside edge of the map so that the google map mands won't put things there. My solution was to create invisible divs and add them to the map as controls, one for each of the edges. This seems to work great as all of the google mands see them and adjust accordingly, and the map appears normally. For example, fitBounds ensures my bounds is not under the invisible layers. For the top where I have a control bar it's a perfect solution, but for the other edges where there is nothing, it creates a problem - I can't click on the map or info windows under these controls as they take the click event.

So I'm looking for one of 2 solutions: 1) can I make my invisible controls pass clicks through to the map, or; 2) is there a better way to pad the edge of the map; something that doesn't involve a much of math every time I want to call a fitBounds or panTo would be preferred as I automate a lot of map motion

Cheers

• javascript
• google-maps
• google-maps-api-3

3 Answers 3

I managed to solve this.

The best way to add padding to your maps is with invisible controls. It creates the padding that all other map functions obey without any additional coding when call them. Here is how to do it for everyone else who needs this. First.. I create a function to simplify creating the divs.

function createDummyDiv(w, h){
    var out = $(document.createElement('div')).addClass('dummy-div').css('width', w).css('height', h);
    return out[0];
}

Then I add the controls as needed. In this case I have the normal zoom control in the LEFT_CENTER position, so I had to create 2 for the left side. This creates a 10% padding on the left, right and bottom, and a 55px padding at the top under my own control bar.

map.controls[google.maps.ControlPosition.TOP_CENTER].push(createDummyDiv('100%', '55px'));
map.controls[google.maps.ControlPosition.LEFT_TOP].push(createDummyDiv('10%', '45%'));
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(createDummyDiv('10%', '45%'));
map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(createDummyDiv('10%', '100%'));
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(createDummyDiv('100%', '10%'));

The.. the final fix to my problem is to put them behind the map layer with css.

.dummy-div{ z-index: -100 !important; }

I hope this helps someone else

Try to give the invisible DIV a negative z-index, e.g. -10

For me, fitBounds api worked itself with second parameter (padding)

Add padding to google map bounds