Based on initial version by Tom Isaacson (@parsley72).
Learn more about tracking geo coordinates in your own projects here.
Based on initial version by Tom Isaacson (@parsley72).
Learn more about tracking geo coordinates in your own projects here.
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Keen IO | Location Map</title> | |
<style> | |
#map-canvas { | |
margin: 0px; | |
min-height: 500px; | |
padding: 0px; | |
width: 100%; | |
} | |
</style> | |
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> | |
<script src="https://dc8na2hxrj29i.cloudfront.net/code/keen-2.1.2-min.js"></script> | |
<script> | |
google.maps.event.addDomListener(window, 'load', function() { | |
var bounds = new google.maps.LatLngBounds (); | |
var map = new google.maps.Map(document.getElementById('map-canvas'), { | |
center: new google.maps.LatLng(0, 0), | |
zoom: 2 | |
}); | |
Keen.configure({ | |
projectId: "your_project_id", | |
readKey: "your_read_key" | |
}); | |
Keen.onChartsReady(function(){ | |
var unique = new Keen.Metric("your_event_collection_name", { | |
analysisType: "select_unique", | |
targetProperty: "keen.location.coordinates" | |
}); | |
unique.getResponse(function(response){ | |
// console.log(response); | |
for (var i = 0; i < response.result.length; i++) { | |
(function(){ | |
if (response.result[i] !== undefined && response.result[i] !== null) { | |
var latlng = new google.maps.LatLng(response.result[i][1], response.result[i][0]); | |
var marker = new google.maps.Marker({ | |
position: latlng, | |
map: map | |
}); | |
bounds.extend(latlng); | |
} | |
})(); | |
map.fitBounds(bounds); | |
} | |
}); | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<div id="map-canvas"></div> | |
</body> | |
</html> |
Just wanted to add a note: The result from Keen IO is in the format longitude followed by latitude. It's a GeoJSON Standard, but it's the reverse order in many other contexts, such as Google Maps.
Hey @dustinlarimer, on line 45 the array indexes for lat and long are the wrong way round. Should be:
This is brilliant though, thank you!