backbone.mapview

Provides a Backbone.View backed abstraction for using maps in your application. Currently only supports Google Maps but more are planned in the future.

Depends on Underscore.js, Backbone.js, either jQuery or Zepto and a compatible browser-based map api.

Download & Setup

Development contains the fully commented source, Production is minified and stripped of all comments except for license/credits.

• Development
• Production

Include in your application after Zepto/jQuery, Underscore, and Backbone have been included.

<script src="/js/jquery.js"></script>
<script src="/js/underscore.js"></script>
<script src="/js/backbone.js"></script>

<script src="/js/backbone.mapview.js"></script>

Usage

You use Backbone.MapView like a regular view with a few exceptions.

var View = Backbone.MapView.extend({
  // ... custom view methods here ...
});

var StreetMap = new View({ id: 'map' });
$('body').html(StreetMap.render().el);

Configuration

Maps API Configuration

The options listed here are a list what's required to initialize a map and not the complete configuration reference. For the full details consult the Google Maps Reference. The map will be initialized with all the properties in this hash so you can simply define more keys if you want to specify extra options. All these values are stored in the mapOpts property.

• center: A google.maps.LatLng instance that denotes the initial center of the map. You must specify a value for this property otherwise the map will not load and just show a grey background.

center: null

• mapTypeId: The initial Map mapTypeId.

mapTypeId: google.maps.MapTypeId.ROADMAP

• zoom: Initial map zoom level.

zoom: 15

MapView Configuration