Asset Tracker GPS real-time google map

mallawa · April 11, 2016, 5:06am

I got the google maps working.

Hypnopompia · April 11, 2016, 3:45pm

Awesome! What did you do to get it working?

mallawa · April 11, 2016, 5:56pm

@Hypnopompia. I pasted google API inside the curly bracket. Everything started working fine when I removed the curly bracket. BTW I bought this asset tracker starter kit with 3 months data plan. I flashed the initial codes ( asset tracker ) and haven’t altered anything. How much data chew up the data plan when it publish gps data on 10 min interval. It would be also great If I can draw the line path. Since Saturday I have used 0.17 MB on my 1MB limit.

mallawa · April 15, 2016, 9:42pm

@Hypnopompia, Any thoughts on How to draw a line path on google maps ?

Moors7 · April 15, 2016, 9:50pm

This?
https://developers.google.com/maps/documentation/javascript/examples/polyline-simple

omarojo · April 30, 2016, 1:05am

do you know where can we get that Solar panel separately ? it looks awesome !

Hypnopompia · May 2, 2016, 9:16pm

I got the solar panel from voltaic systems.

adelira · June 28, 2016, 10:12pm

Hm, well the browser app works just fine when i follow your link http://www.havocstudios.com/assettracker/

However when I tried to upload your source code I get this error.

Any idea of what could be wrong?

Hypnopompia · June 28, 2016, 10:26pm

Can you check your browser’s javascript console and post any errors you find?

Hypnopompia · June 28, 2016, 10:38pm

Most likely what is wrong is that when you host the file on your own server, you need to get your own google map API key from google. My api key only works on my havocstudios.com domain.

adelira · June 28, 2016, 10:49pm

Wow thank you for your prompt response!

What I did was I went to the google maps API page and got a key for my server. I then added it to your code in line 195, except where it says YOUR_GOOGLE_API_TOKEN I put my API code.

I will try to locate the javascript console as this is the first server I have ever made.

Again thank you!

Moors7 · June 29, 2016, 12:51am

Right-mouse click, 'inspect this element'. You should then have the developers console pop up, on which one of the tabs is the javascript console

adelira · June 29, 2016, 3:03pm

Thanks again guys.

And you were correct this is the error i’m getting. Don’t really understand why I got the wrong code from googles website?

Hypnopompia · June 29, 2016, 4:33pm

Maybe try to generate a new one and double check everything again. If you have further problems, if you want to describe the steps you took (screenshots help), maybe we can help you. Otherwise we’d just be guessing what’s wrong which isn’t going to be very helpful.

adelira · June 29, 2016, 4:35pm

Looks like its working now! I think my problem was the same as one of the previous posters, I needed to delete the curly brackets in the API code.

adelira · July 21, 2016, 9:56pm

So everything was working fine for me and I didn’t login to particle for about a month.

When I came back I am now getting this error.

I tried registering 2 new API keys but they weren’t working either. Not sure why all of a sudden my API key isn’t working? It works perfectly fine on your server still.

jackpot · September 2, 2016, 1:59pm

I have read this entire post, very interesting and something I would like to try. I have some questions though, being a newbie.

How do I use the html code you provided if I want to have my own map (outside of the havocstudios link)?
Can I see more then one device on the map at a time, track multiple assets?
I looked at the example code in particle build and I see that if I use my own map I need a google api key. How do the two connect? I didnt see anything in the code that requires the api key, only in the html code.

Thanks for your help and great project.

Hypnopompia · September 2, 2016, 6:14pm

The javascript in the HTML code uses the google maps API. https://developers.google.com/maps/web/ The Electron itself doesn’t know anything about google maps. It only publishes it’s current location to the Particle cloud.

To use the code yourself, you can just copy it onto your own server (or even just run it locally in a browser) and update the google map api key.

My code uses javascript to subscribe to the particle cloud and listen for events coming from the electron. When it sees one, it uses the google maps api to plot it on the webpage. If you modify the javascript to look at the device id, you can display each location event as a separate device. We did something similar for Makerfaire this year with Particle. We had backpacks with the asset tracker in them and showed a map in the booth that showed where everyone with an asset tracker backpack was. The code for that project is here:

github.com

Hypnopompia/MakerMap2016/blob/master/src/resources/views/map.php

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<title>MakerMap 2016</title>

		<meta property="og:title" content="Particle Makerfaire 2016 Asset Tracker map" />
		<meta property="og:description" content="Watch the Particle gang as they move around Makerfaire 2016 in realtime." />
		<meta property="og:type" content="website" />
		<meta property="og:url" content="http://mf.particle.io" />
		<meta property="og:image" content="http://mf.particle.io/smec.png" />


		<link rel="stylesheet" href="/css/makermap.css" />
		<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
		<script src="https://js.pusher.com/3.1/pusher.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>

This file has been truncated. show original

github.com

Hypnopompia/MakerMap2016/blob/master/src/public/js/makermap.js

var map;
var trackers = {};
var markers = [];

setInterval(displayTrackers, 60 * 1000);

function initMap() {
	map = new google.maps.Map(document.getElementById('map'), {
		center: {lat: 37.5462659, lng: -122.3010707},
		zoom: 17, // 19
		mapTypeId: google.maps.MapTypeId.ROADMAP // HYBRID
	});

	map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(document.getElementById('legend'));

	loadTrackers();
	setInterval(loadTrackers, 10 * 60 * 1000);

	// var myloc = new google.maps.Marker({
	// 	clickable: false,

This file has been truncated. show original

Good luck!

jackpot · September 2, 2016, 6:16pm

Hey, Thank you VERY MUCH for your reply. I am very anxious to try this and understand it all. I really appreciate your patience with me.

jackpot · September 6, 2016, 6:03pm

@Hypnopompia

I do not understand how to do this? Where can I find information related to running this locally in my browser?
Thanks again

Topic		Replies	Views
Can I get when I upload gps location(asset tracker ver2) in particle cloud and will pop out in google map. api? Getting Started	2	1126	May 9, 2017
Best GPS unit for Electron Hardware	6	5594	February 24, 2016
Privacy issues with GPS example on Asset Tracker library? Libraries	2	1435	March 22, 2016
Super Beginner Help with Electron (Asset Tracking) Getting Started	4	1356	January 31, 2017
Super new to this type of thing. Can someone assist in a simple asset tracker setup? Getting Started electron	1	1075	July 10, 2019

Asset Tracker GPS real-time google map

Related topics