Meteor Google Maps

Latest version of the Google Maps Javascript API with an interface designed for Meteor.

Supports multiple map instances
Provides callbacks for individual maps when they render
API key + libraries
StreetViewPanorama support

Examples

How to create a reactive Google map http://meteorcapture.com/how-to-create-a-reactive-google-map/

Demo project using the examples below https://github.com/dburles/meteor-google-maps-demo

Note

The maps API is client-side only. Server side support may be added soon.

Installation

$ meteor add dburles:google-maps

Usage Overview

Call the load method to load the maps API.

if (Meteor.isClient) {
  Meteor.startup(function() {
    GoogleMaps.load();
  });
}

You can also load the API only on specific routes when using Iron Router.

Router.onBeforeAction(function() {
  GoogleMaps.load();
  this.next();
}, { only: ['routeOne', 'routeTwo'] });

Wrap the map template to set the width and height.

<body>
  <div class="map-container">
    {{> googleMap name="exampleMap" options=exampleMapOptions}}
  </div>
</body>

.map-container {
  width: 800px;
  max-width: 100%;
  height: 500px;
}

Pass through the map initialization options by creating a template helper.

Template.body.helpers({
  exampleMapOptions: function() {
    // Make sure the maps API has loaded
    if (GoogleMaps.loaded()) {
      // Map initialization options
      return {
        center: new google.maps.LatLng(-37.8136, 144.9631),
        zoom: 8
      };
    }
  }
});

Place the ready callback within the template onCreated callback.

Template.body.onCreated(function() {
  // We can use the `ready` callback to interact with the map API once the map is ready.
  GoogleMaps.ready('exampleMap', function(map) {
    // Add a marker to the map once it's ready
    var marker = new google.maps.Marker({
      position: map.options.center,
      map: map.instance
    });
  });
});

Access a map instance any time by using the maps object.

GoogleMaps.maps.exampleMap.instance

###Events

You can add listeners in your map instance.

Template.body.onCreated(function() {
  
  GoogleMaps.ready('exampleMap', function(map) {
    
    var marker = new google.maps.Marker({
      position: map.options.center,
      map: map.instance
    });

    //Add event listener once the map is ready, for example click in map
    map.addListener('click',function(){
      console.log('click!')
    });

    //To add event listener to another object, passing the object in first argument, for example click in marker
    map.addListener(marker,'click',function(){
      console.log('click in marker!')
    });  

  });
});

Or remove the listeners.

map.clearListeners('click');  //To remove click  listener in your map instance
GoogleMaps.maps.exampleMap.map.clearListeners('click'); //The same thing as above

map.clearListeners(marker,'click');  //To remove click listener in your marker
GoogleMaps.maps.exampleMap.map.clearListeners(marker,'click');  //The same thing as above

API

type (Optional)
- Currently supported types: Map, StreetViewPanorama (defaults to 'Map')
name
- Provide a name to reference this map
options
- Map initialization options

GoogleMaps.load([options])

Loads the map API. Options passed in are automatically appended to the maps url. By default v3.exp will be loaded. For full documentation on these options see https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API

Example:

GoogleMaps.load({ v: '3', key: '12345', libraries: 'geometry,places' });

GoogleMaps.loaded()

Reactive method which returns true once the maps API has loaded, or after manually calling GoogleMaps.initialize() (See further down).

GoogleMaps.ready('name', callback)

Runs once the specified map has rendered.

name String
callback Function

Example:

GoogleMaps.ready('exampleMap', function(map) {
  // map.instance, map.options
});

The callback function returns an object containing two properties:

instance
- The Google map instance
options
- The options passed through from the Template helper (see Usage Overview above)

You can also access this object directly by name:

GoogleMaps.maps.exampleMap

GoogleMaps.initialize()

This function is passed into the Google maps URL as the callback parameter when calling GoogleMaps.load(). In the case where the maps library has already been loaded by some other means, calling GoogleMaps.initialize() will set GoogleMaps.loaded() to true.

License

MIT

kodamirmo/meteor-google-maps