add padding to google maps bounds.contains()
<p>I have a sidebar which shows the names of the markers in the current map view of a google map. The sidebar contents change as the map gets moved:</p>

<pre><code>google.maps.event.addListener(map, 'bounds_changed', function() {
            document.getElementById("list").innerHTML = "";
            var mklen = mkrs.length,
                a = 0,
                bnds = map.getBounds();

            for (a; a &lt; mklen; a++) {
                var themk = mkrs[a];
                if (bnds.contains(themk.getPosition())) {
                    var myli = document.createElement("li");
                    myli.innerHTML = themk.title;
                    document.getElementById("list").appendChild(myli);
                }
            }
        });
</code></pre>

<p>That's working OK, but the thing is that the bounds.contains() is very strict - if just the bottom tip of the marker is on the map (ie, you can't see 99% of it) it gets listed on the sidebar. What I'd like is to have just the markers that are completely shown pass that test. </p>

<p>There are a couple of approaches that I can think of and I can't believe that nobody else has come up against this problem, so I'm wondering if there is a preference out of the following:</p>

<ol>
<li>take the bounds and recalculate them to be smaller than the actual bounds and use those new bounds for the bounds.contains() test</li>
<li>calculate where the edges of the marker icons are (I guess using <code>fromDivPixelToLatLng</code>) then check that both the ne AND sw corners are within the bounds and if so, list the item</li>
</ol>

<p>Before you ask, I haven't tried either of those - I'm more looking for advice on which would be best or even possible, or if there is another way to do this. Here's a <a href="https://jsfiddle.net/xelawho/e280jbte/2/" rel="nofollow">fiddle</a> demonstrating the issue, in case it clarifies</p>