Asset Tracker GPS real-time google map


#41

I got the google maps working. :grinning:


#42

Awesome! What did you do to get it working?


#43

@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.


#44

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


#45

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


#46

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


#47

I got the solar panel from voltaic systems.


#48

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?


#49

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


#50

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.


#51

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!


#52

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 :slight_smile:


#53

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?


#54

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.


#55

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.


#56

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.


#57

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.


#58

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:

Good luck!


#59

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.


#60

@Hypnopompia

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