- Home >
- Documentation >
- Tools >
- panel
panel
This function adds a fixed div to a map, (e.g. for legends, coordinates etc.).
Usage
Parameters
- content {string|jQuery} Content of the fix panel
- left {integer} Left position (optional)
- right {integer} Right position (optional)
- top {integer} Top position (optional)
- bottom {integer} Bottom position (optional)
- center {bool} If true, the panel is centered horizontaly(optional)
- middle {bool} If true, the panel is centered vertically (optional)
Example
This example adds a fix panel and show its center lat/lng when its bounds change (drag the map to test).
$('#test1').gmap3( { panel:{ options:{ content: '<div id="panel-box">' + '<div id="lat-north" class="line"><div class="name">North</div><div class="value"></div></div>' + '<div id="lng-east" class="line"><div class="name">East</div><div class="value"></div></div>' + '<div id="lat-south" class="line"><div class="name">South</div><div class="value"></div></div>' + '<div id="lng-west" class="line"><div class="name">West</div><div class="value"></div></div>' + '</div>', middle: true, right: true } }, map:{ options:{ zoom: 5 }, events:{ bounds_changed: function(map){ var bounds = map.getBounds(); var ne = bounds.getNorthEast(); var sw = bounds.getSouthWest(); $("#lat-north").find(".value").html(ne.lat()); $("#lng-east").find(".value").html(ne.lng()); $("#lat-south").find(".value").html(sw.lat()); $("#lng-west").find(".value").html(sw.lng()); } } } } );