Reactive geolocation example with Meteor & Google Maps

announce
1

Hey all, I’ve just put together a short tutorial & example on how to reactively display your current location on a map using mdg:geolocation and dburles:google-maps. Hope someone finds it helpful!

19 Likes
2

Hey dburles!

Not sure why you haven’t gotten any credit for this contribution, but I just wanted to say thank you, it was a great help for me!

1 Like
3

Hi @dburles, thanks for putting the tutorial together! I have your example working great, but how to I make it more, well, Reactive?

What I mean is, the map updates the markers correctly across browser windows in that if I update a marker in one window, I see the update immediately in another window. However, I’ve found that if I update the database directly via the command line such as:

db.markers.update( { "_id" : "TdBrf2njpTqGcpPNF" }, { $set: { "lat": "30.5336923", "lng": "-120.2392578125" }} );

The map doesn’t get updated unless I refresh it manually. How can I make it so that if the data changes directly in the collection from some other process (maybe a rest call doing an update from another server), that the map gets updated automatically?

4

Thanks! @snakehead. It should update just fine, are you testing that out locally? If it’s on a deployed app there may be a up to a 10 second delay unless you have Meteor configured to use the mongo oplog

5

Thanks for the response. Yes, I’m testing it out locally. I see the map with the markers and from the terminal I use

db.markers.find();

and I get:

{ "_id" : "4zCktNB8gRBE5bcea", "lat" : -37.87485339352927, "lng" : 144.60205078125 }
{ "_id" : "TdBrf2njpTqGcpPNF", "lat" : "30.5336923", "lng" : "-120.2392578125" }
{ "_id" : "faxEGXMXz8oAbCtov", "lat" : -37.70338045783237, "lng" : 146.3818359375 }

I then tried this in the terminal window but the map didn’t refresh. I had to refresh the browser manually:

meteor:PRIMARY> db.markers.update( { "_id" : "TdBrf2njpTqGcpPNF" }, { $set: { "lat": "30.5336923", "lng": "-140.2392578125" }} );

Again, this is local using your code from github with no changes to it.

6

One thing I’m noticing is that you’re inserting the coordinates as a string, not sure if that’s causing a problem

7

BINGO! I didn’t catch that, than you SO MUCH! :smile:

8

The example is much appreciated! I’m hoping you can assist with improving the accuracy of geolocation…I worked through https://github.com/dburles/geolocation-example but the marked location is several hundred meters off of the actual location. I’ve seen some posts about ‘enableHighAccuracy=true’, but I’m not sure how exactly to apply it. Any additional help would be great. Thanks!

9

@plaffey You cant change the options of mdg:geolocation. But that doesn’t matter because mdg:geolocation already sets highAccuracy to true. Unfortunately GPS is not always accurate, if you talking about the GPS coordinate generated from your browser, thats even more so true.

10

I have tried it and it doesnt work (screen stays blank)

1 Like
11

@bobchatelain check your code with his github repo for comparison

12

Okay. I have page called NodePage and it is a page that displays the gps coordinates and sensor graphs of a weather station. To get the graphs to only show the data for a specific weather station on a page I send the name of the station to the router and then pull the name back out when Im on the page to then find the right stations in the collection to display the data. However I can’t seem to find a way to have the page reload every time I click on a different station’s data.
Here are some of the github work on this problem if you could point me in the right direction that would be fantastic.

client(map,NodePage+js)

AllTheGraphs

@dburles

13

Never mind I fixed it.

14

I was thinking you could use a session variable, but how did you fix it?

15

@snakehead

well I at the time was not sure how to use session but after having to work on another php mysql project I know It would of worked just fine.

I used

 `marker.setMap(null);`

So when I pulled the latitude and longitude out of my collection on the page switch I also reset the map and then just replaced the marker with the new coordinates. This worked great. No cross tab problems or multiple markers on the map at one time.

A lot of my code would be different If I would of known more about session although I did not and worked through the router and pulled its value and saved content values to use on the next page, such as the name of the page to pull and then use in the collection searching.

full bit of code.

 `Template.map.onCreated(function() {
  GoogleMaps.ready('Map', function(map) {
   var marker;

   // Create and move the marker when latLng changes.
   Tracker.autorun(function() {
   let node = Nodes.findOne({ name: Router.current().params.name });
   if( node ) {
    var latLng = Geolocation.latLng();
    if (! latLng)
      return;

    // get the name from the current station's page we are on. through the router.
    var nodeName = node.name;
    // grab the last 20 of this Nodes collection
    var recentNode = Nodes.find({name: nodeName},
     {sort:{createdAt: -1},limit: 1}).fetch();
    /*-----------------------get the longitude-----------------------------*/
    var lat = _.pluck(recentNode,'latitude');
    /*-----------------------get the latitude ----------------------------------*/
    var lon = _.pluck(recentNode,'longitude');
    /*----------------------------------------------------------------------*/
    /* if there is a marker. IE there will be one after you
    have visited another page with a node. This will delete 
    all nodes so there can't be infinite markers on map.*/
    if(marker){
      marker.setMap(null);
    }
    
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat,lon),
      map:map.instance
    });
    
    // Center and zoom the map view onto the current position.
    map.instance.setCenter(marker.getPosition());
         map.instance.setZoom(MAP_ZOOM);
     }
  
     });
   });
});`
2 Likes