map.borderWatcher()

Drag the map. The border color should change when a marker goes outside the map.

borderWatcher() is a GMap2() method to test if a GLatLngBounds() object crosses maps viewport borders. It is an extension for Google Maps Api.

The method adds css-classnames to maps container element and returns an array of four booleans [top, right, bottom, left].

In this page map.borderWatcher(markerBounds) tests if markers fit into viewport. If they fit, nothing happens. If not, one or more of the returned booleans will be true and corresponding classnames added.

The returned booleans are not used for anything in this example but you can give birth for some ideas.

There are four css classnames for highlighting, one for each border. Defaults are "border-watcher-top", "border-watcher-right", "border-watcher-bottom", "border-watcher-left".

You, as a CSS guru, can make much more fascinating borders than those in my example.

To start testing, download the borderwatcher.js code and add <script src="borderwatcher.js" type="text/javascript"> </script> to your html after the maps.api script tag.

Upload the borderwatcher.js code to your serverspace. By hotlinking you accept any kind of stunning surprises on your page.

Esa's Google Maps API experiments.
	map.borderWatcher() Drag the map. The border color should change when a marker goes outside the map. borderWatcher() is a GMap2() method to test if a GLatLngBounds() object crosses maps viewport borders. It is an extension for Google Maps Api. The method adds css-classnames to maps container element and returns an array of four booleans [top, right, bottom, left]. In this page `map.borderWatcher(markerBounds)` tests if markers fit into viewport. If they fit, nothing happens. If not, one or more of the returned booleans will be true and corresponding classnames added. The returned booleans are not used for anything in this example but you can give birth for some ideas. There are four css classnames for highlighting, one for each border. Defaults are `"border-watcher-top", "border-watcher-right", "border-watcher-bottom", "border-watcher-left"`. You, as a CSS guru, can make much more fascinating borders than those in my example. To start testing, download the borderwatcher.js code and add `<script src="borderwatcher.js" type="text/javascript"> </script>` to your html after the maps.api script tag. Upload the borderwatcher.js code to your serverspace. By hotlinking you accept any kind of stunning surprises on your page. More

Esa's Google Maps API experiments.

map.borderWatcher()