Skip to content

Instantly share code, notes, and snippets.

@dustinlarimer

dustinlarimer/README.md

Last active September 11, 2018 01:38
Show Gist options
  • Star 8 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save dustinlarimer/10060616 to your computer and use it in GitHub Desktop.
Save dustinlarimer/10060616 to your computer and use it in GitHub Desktop.
Download ZIP
Keen IO Geo Coordinates in a Google Map
Raw
README.md
Raw
index.html
<!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>
@aliblackwell
Copy link

Hey @dustinlarimer, on line 45 the array indexes for lat and long are the wrong way round. Should be:

var latlng = new google.maps.LatLng(response.result[i][0], response.result[i][1]);

This is brilliant though, thank you!

@tbarn
Copy link

tbarn commented Apr 26, 2016

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment