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
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.
1if (Meteor.isClient) { 2 Meteor.startup(function() { 3 GoogleMaps.load(); 4 }); 5}
You can also load the API only on specific routes when using Iron Router.
1Router.onBeforeAction(function() { 2 GoogleMaps.load(); 3 this.next(); 4}, { only: ['routeOne', 'routeTwo'] });
Wrap the map template to set the width and height.
1<body> 2 <div class="map-container"> 3 {{> googleMap name="exampleMap" options=exampleMapOptions}} 4 </div> 5</body>
1.map-container { 2 width: 800px; 3 height: 500px; 4}
Pass through the map initialization options by creating a template helper. We can also place the GoogleMaps.ready
method within the helper as a convenience as we may wish to make use of the template data context.
1Template.body.helpers({ 2 exampleMapOptions: function() { 3 // Make sure the maps API has loaded 4 if (GoogleMaps.loaded()) { 5 // We can use the `ready` callback to interact with the map API once the map is ready. 6 GoogleMaps.ready('exampleMap', function(map) { 7 // Add a marker to the map once it's ready 8 var marker = new google.maps.Marker({ 9 position: map.options.center, 10 map: map.instance 11 }); 12 }); 13 14 // Map initialization options 15 return { 16 center: new google.maps.LatLng(-37.8136, 144.9631), 17 zoom: 8 18 }; 19 } 20 } 21});
Access a map instance any time by using the maps
object.
1GoogleMaps.maps.exampleMap.instance
API
GoogleMaps.load([options])
Loads the map API.
- options (Object)
key
String- API key
libraries
String- Specify Google Maps Libraries
Example:
1GoogleMaps.load({ key: '12345', libraries: 'geometry,places' });
GoogleMaps.loaded()
Reactive method which returns true
once the maps API has loaded.
GoogleMaps.ready('name', callback)
Runs once the specified map has rendered.
name
Stringcallback
Function
Example:
1GoogleMaps.ready('exampleMap', function(map) { 2 // map.instance, map.options 3});
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:
1GoogleMaps.maps.exampleMap
License
MIT