@paolosofio01, let me explain what I did to plot location on Google Map, you can read the HTML file from the GitHub page (GitHub - krvarma/TinyGPS_SparkCore: TinyGPS for Spark Core).
OK, the sample application publishes an event in every 15 minutes with longitude and latitude separated by comma. If there is NO valid GPS location, the event data contains 0.0 for both longitude and latitude. The following code snippet does exactly the same:
// If we have a valid GPS location then publish it
if (isValidGPS){
float lat, lon;
unsigned long age;
gps.f_get_position(&lat, &lon, &age);
sprintf(szInfo, "%.6f,%.6f", (lat == TinyGPS::GPS_INVALID_F_ANGLE ? 0.0 : lat), (lon == TinyGPS::GPS_INVALID_F_ANGLE ? 0.0 : lon));
}
else{
// Not a vlid GPS location, jsut pass 0.0,0.0
// This is not correct because 0.0,0.0 is a valid GPS location, we have to pass a invalid GPS location
// and check it at the client side
sprintf(szInfo, "0.0,0.0");
}
Spark.publish("gpsloc", szInfo);
The sample HTML file (spark_location.html, which is also in the GitHub Repo) subscribes this event and parse the date when ever data is received. The following JavaScript function initialize()
, initialize the Google Map and add a default marker.
function initialize() {
var mapOptions = {
zoom: 18,
minZoom: 10,
maxZoom: 18,
draggable: false,
disableDefaultUI: true,
center: new google.maps.LatLng(0.0, 0.0)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
marker = new google.maps.Marker({position: new google.maps.LatLng(0.0, 0.0), map: map});
marker.setMap(map);
}
When we receive the data and parsed, the old marker is removed and add a new marker with new location received. The following code does the location update.
var parsedData = JSON.parse(e.data);
var data = parsedData.data.split(",");
console.log( parsedData.data);
console.log(data[0]);
console.log(data[1]);
loc = new google.maps.LatLng(data[0], data[1]);
marker.setMap(null);
marker = new google.maps.Marker({position: loc, map: map});
marker.setMap(null);
map.panTo(loc);
marker.setMap(map);
For a detailed explanation of how Spark publish/subscribe works, refer to @bko’s excellent tutorial:
Regarding the multiple points, I didn’t get time work on it since I was so busy at work. May be this week end I can post it here.
Hope this clears your doubts, waiting for your awesome project to complete.
Cheers!