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.
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 max-width: 100%; 4 height: 500px; 5}
Pass through the map initialization options by creating a template helper.
1Template.body.helpers({ 2 exampleMapOptions: function() { 3 // Make sure the maps API has loaded 4 if (GoogleMaps.loaded()) { 5 // Map initialization options 6 return { 7 center: new google.maps.LatLng(-37.8136, 144.9631), 8 zoom: 8 9 }; 10 } 11 } 12});
Place the ready
callback within the template onCreated
callback.
1Template.body.onCreated(function() { 2 // We can use the `ready` callback to interact with the map API once the map is ready. 3 GoogleMaps.ready('exampleMap', function(map) { 4 // Add a marker to the map once it's ready 5 var marker = new google.maps.Marker({ 6 position: map.options.center, 7 map: map.instance 8 }); 9 }); 10});
Access a map instance any time by using the maps
object.
1GoogleMaps.maps.exampleMap.instance
API
{{> googleMap [type=String] name=String options=Object}}
- 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:
1GoogleMaps.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
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
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
.
Mobile platforms
If you're targeting mobile platforms you'll need to configure the following access rules in mobile-config.js
.
1App.accessRule('*.google.com/*'); 2App.accessRule('*.googleapis.com/*'); 3App.accessRule('*.gstatic.com/*');
For more refer to the official documentation.
License
MIT