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());
          }
        }
      }
    }
  );