#Marionette Google Maps
Marionette Google Maps helps you to create maps and/with markers
With Marionette Google Maps helpers you can forget Google Maps API and work directly on markers collection. Each time you add or remove a marker on the collection the map will show or delete that marker and will fit his size to the current markers available.
Installation
Run npm install (node and npm previously installed)
$ npm install
Build
$ grunt
Test
$ grunt test
Usage
Import the script (google maps v3 required).
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script><!-- load google maps first -->
<!-- all dependences here (jquery, usderscore, backbone, marionettejs) -->
<script src="marionette-googe-maps/dist/marionette-googe-maps.min.js"></script>
<script src="app.js"></script><!-- your application script -->Create a map container
<div id="my-map"></div>Create a markers collection
var markers = new Backbone.Marionette.MarkersCollection([
{
"title": "Marker 1",
"content": "Lorem ipsum dolor sit amet.",
"lat": 41.378158,
"lon": 2.155621
},
{
"title": "Marker 2",
"content": "Lorem ipsum dolor sit amet, consectetur.",
"lat": 41.385094,
"lon": 2.156728
},
{
"title": "Marker 3",
"content": "Lorem ipsum dolor sit.",
"lat": 41.405094,
"lon": 2.154165
}
]);Initialize the Map view
var myMapView = new Backbone.Marionette.MapView({
el: '#my-map',
collection: markers,
lat: 41.385064, // initialize your map in theese coords
lon: 2.173403 // initialize your map in theese coords
});
myMapView.render();It should render the map, show the markers and fit the map to the current markers. An example here.
No matter when you load the data, MapView always will react to the MarkersCollection changes.
var Markers = Backbone.Marionette.MarkersCollection.extend({
url: 'http://private-14034-marionettegooglemaps.apiary-mock.com/markers'
});
var markers = new Markers();
var myMapView = new Backbone.Marionette.MapView({
el: '#my-map',
collection: markers,
lat: 41.385064, // initialize your map in theese coords
lon: 2.173403 // initialize your map in theese coords
});
myMapView.render();
markers.fetch();