Meteor Capture

Reactive geolocation with Google Maps

In this article we're going to look at how to reactively update the users current geolocation on a Google map.

We'll use two packages, dburles:google-maps and a simple package created by MDG (Meteor development group) called mdg:geolocation. This package wraps the browsers native HTML5 geolocation library and makes it reactive.

Find the full example application here:


Note: All of the following code is client side only, make sure that you're either working on files within the client directory, or explicitly checking using Meteor.isClient. See here.

First you'll want to add the required packages:

meteor add dburles:google-maps mdg:geolocation

We'll set a variable called MAP_ZOOM which will be shared between the initial options and the reactive position changes, plus load the maps library:

var MAP_ZOOM = 15;

Meteor.startup(function() {  

Some CSS for the map container:

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

Part 1

No reactivity

We'll start by creating a non reactive version that will initialise the map with a marker centred on the current coordinates.

The map template below will display the map as well as an error message if geolocation fails for any reason. There are likely much better ways to handle this, but for the sake of the example we'll keep it simple.

<template name="map">  
  <div class="map-container">
    {{#unless geolocationError}}
      {{> googleMap name="map" options=mapOptions}}
      Geolocation failed: {{geolocationError}}
  geolocationError: function() {
    var error = Geolocation.error();
    return error && error.message;
  mapOptions: function() {
    var latLng = Geolocation.latLng();
    // Initialize the map once we have the latLng.
    if (GoogleMaps.loaded() && latLng) {
      return {
        center: new google.maps.LatLng(, latLng.lng),
        zoom: MAP_ZOOM
Displaying the marker

Once the map is ready on the screen, we'll create a new marker positioned to the current coordinates. {  
  GoogleMaps.ready('map', function(map) {
    var latLng = Geolocation.latLng();

    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(, latLng.lng),
      map: map.instance

That's about it. Now if you're interested in keeping the marker position up to date as the coordinates change, move on to part 2.

Part 2

Making things reactive

In order to reactively update both the marker position and map position, we'll need to set up an autorun on the template instance to react on any changes to the Geolocation.latLng() method. Whenever it changes we'll move the marker (with setPosition) and also centre and zoom the map to the new location.

Have a read through the code below, it's annotated to explain the purpose of each part. {  
  var self = this;

  GoogleMaps.ready('map', function(map) {
    var marker;

    // Create and move the marker when latLng changes.
    self.autorun(function() {
      var latLng = Geolocation.latLng();
      if (! latLng)

      // If the marker doesn't yet exist, create it.
      if (! marker) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(, latLng.lng),
          map: map.instance
      // The marker already exists, so we'll just change its position.
      else {

      // Center and zoom the map view onto the current position.


If everything has gone to plan, the map should now be updating whenever your location changes!, however if something's not working correctly, you can compare your code to or try the completed example application.

Geolocation with Meteor opens up all kinds of use-cases, consider combining what we've just covered with features from the reactive google map tutorial and you could very easily create a realtime location sharing application!


Geolocation package

Google Maps package

The example application

Google Maps Javascript API

comments powered by Disqus