meteor-google-maps

by dburles

🗺 Meteor package for the Google Maps Javascript API v3

197 Stars 52 Forks Last release: Not found MIT License 73 Commits 16 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Meteor Google Maps

Join the chat at https://gitter.im/dburles/meteor-google-maps

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

  • Supports multiple map instances
  • Ability to only load the API when it's required
  • Provides callbacks for individual maps when they render
  • API key + libraries
  • StreetViewPanorama support

Table of Contents

Note

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

Installation

$ meteor add dburles:google-maps

Alternatively if you wish to add the package from within another package and have

GoogleMaps
available outside of package scope, use api.imply in your
package.js
.

Examples

Reactive geolocation

How to create a reactive Google map

React example

Demo project for the examples below

Usage Overview

Call the

load
method 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

onRendered
hook.
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

ready
callback within the template
onCreated
callback. 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

maps
object.
GoogleMaps.maps.exampleMap.instance

API

Blaze Template

{{> 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

create

GoogleMaps.create({object})

An alternative to using the

googleMap
Blaze 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
  }
});

load

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#LoadingtheMaps_API

Example:

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

loadUtilityLibrary

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.

loaded

GoogleMaps.loaded()

Reactive method which returns

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

ready

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

initialize

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
.
App.accessRule('*.google.com/*');
App.accessRule('*.googleapis.com/*');
App.accessRule('*.gstatic.com/*');

For more refer to the official documentation.

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.