🗺 Meteor package for the Google Maps Javascript API v3
Latest version of the Google Maps Javascript API with an interface designed for Meteor.
The maps API is client-side only. Server side support may be added soon.
$ meteor add dburles:google-maps
Alternatively if you wish to add the package from within another package and have
GoogleMapsavailable outside of package scope, use api.imply in your
package.js.
How to create a reactive Google map
Demo project for the examples below
Call the
loadmethod to load the maps API.
if (Meteor.isClient) { Meteor.startup(function() { GoogleMaps.load(); }); }
If you prefer to load the maps API only once it's required, you may do so from within a Template
onRenderedhook.
Template.contact.onRendered(function() { GoogleMaps.load(); });
Wrap the map template to set the width and height.
{{> googleMap name="exampleMap" options=exampleMapOptions}}
.map-container { width: 800px; max-width: 100%; height: 500px; }
Pass through the map initialization options by creating a template helper. This will only run once.
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
readycallback within the template
onCreatedcallback. This is also where you handle map events and reactive updates.
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
mapsobject.
GoogleMaps.maps.exampleMap.instance
{{> googleMap [type=String] name=String options=Object}}
GoogleMaps.create({object})
An alternative to using the
googleMapBlaze template. Call this function to create a new map instance and attach it to a DOM element.
Options:
name- Name to reference this map.
element- A DOM element to attach the map to.
options- The map options.
type(optional) - Map or StreetViewPanorama. Defaults to Map.
Example:
GoogleMaps.create({ name: 'exampleMap', element: document.getElementById('exampleMap'), options: { center: new google.maps.LatLng(-37.8136, 144.9631), zoom: 8 } });
GoogleMaps.load([options])
Loads the map API. Options passed in are automatically appended to the maps url. By default
v3.expwill be loaded. For full documentation on these options see https://developers.google.com/maps/documentation/javascript/tutorial#LoadingtheMaps_API
Example:
GoogleMaps.load({ v: '3', key: '12345', libraries: 'geometry,places' });
GoogleMaps.loadUtilityLibrary('/path/to/library.js')
A method to ease loading external utility libraries. These libraries will load once the Google Maps API has initialized.
GoogleMaps.loaded()
Reactive method which returns
trueonce 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.
nameString
callbackFunction
Example:
GoogleMaps.ready('exampleMap', function(map) { // map.instance, map.options });
The callback function returns an object containing two properties:
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.
If you're targeting mobile platforms you'll need to configure the following access rules in
mobile-config.js.
App.accessRule('*.google.com/*'); App.accessRule('*.googleapis.com/*'); App.accessRule('*.gstatic.com/*');
For more refer to the official documentation.
MIT