Canada OpenGov Dataset Consumption Example - Plot GPS coordinates on Google Maps.

CSS

body{
    background:#fff;
}
#map{
    height: 300px;
}
#legend{
    width:100%;
    padding:5px;
    text-align:left;
    font-weight:700;
    background:#555;
    color:#fff;
    text-shadow:1px 1px 1px #000!important;
}

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<div id="map"></div>
<div id="legend"></div>
<div id="long"></div>

Javascript

var map;
var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(46.0777315, -64.8177572),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow();   
/* marker creater function (acts as a closure for html parameter) */

///// Initial Listings Call /////
$.getJSON('http://www.earthquakescanada.nrcan.gc.ca/api/earthquakes/',
function (json) {
    $('#legend').append("<div class='main-header'>Canada OpenGov Dataset Testing</div>"+json.metadata.request.name.en + '<br />');
    $('#legend').append("<select id='selectAPI'><option value='0'>Select Data Set</option>");
    var source = "http://www.earthquakescanada.nrcan.gc.ca";
    $.each(json.latest, function (idx, item) {
        $('#legend select').append("<option value='"+source+item+"'>"+item+"</option>");
    });
    $("#legend").append("</select>");
    return;
});
function createMarker(options, html) {
    var marker = new google.maps.Marker(options);
    if (html) {
        google.maps.event.addListener(marker, "click", function () {
           infoWindow.setContent(html);
           infoWindow.open(options.map, this);
       });
   }
   return marker;
}
function getData(apiChoice){
    $.ajax({
        url: apiChoice,
        dataType: 'json',
        headers: {
            'Accept': 'application/json',
                'Accept-Language': 'en'
        },
        crossDomain: true,
        type: 'GET',
        success: function (json) {
            $("#long").html("");
            $('#long').append(json.metadata.request.name.en + '<br />');
            $.each(json, function (idx, item) {
                console.log(item);
                var timeStamp = item.origin_time+"";
                var mag = item.magnitude;
                var depth = item.depth+item.depth_unit;
                var obj = JSON.stringify(item.geoJSON)+"";
                var myData = obj.split(":");
                var latLong = myData[2]+"";
                var result = latLong.split(",");
                var sub1 = result[0]+"";
                var sub2 = result[1]+"^";
                var lat = sub1.substr(1,sub1.length);
                var long = sub2.substr(0,sub2.length-3);
                var quakeSpot = createMarker({
                    position: new google.maps.LatLng(lat,long),
                    map: map,
                    icon: "http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png"
                }, "<div class='quake-details'><h1>Earthquake</h1><ul><li>Depth: "+depth+"</li><li>Magnitude: "+mag+"</li><li>Date: "+timeStamp+"</li></div>");
            });
            return;
        },
        error: function (req, status, error) {
            $('#long').append(
            status.toString() + ': ' + error.toString());
            return;
        },
    });
}

function showHome(){
    var homeMarker = createMarker({
        position: new google.maps.LatLng(46.0777315, -64.8177572),
        map: map,
        icon: "http://www.shu.ac.uk/_assets/images/png/map-icons/residence.png"
    }, "<h1>Home</h1><p>you live here</p>");
}
function getUserLocation() {
    console.log("Getting user location");
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        console.warn("Geolocation is not supported by this browser.");
    }
}
function showPosition(position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
    console.log("User Position: ",lat,long);
    var userMarker = createMarker({
        position: new google.maps.LatLng(lat,long),
        map: map,
        icon: "http://www.shu.ac.uk/_assets/images/png/map-icons/residence.png"
    }, "<h1>You are here...</h1>");
}
/* http://1.bp.blogspot.com/_GZzKwf6g1o8/S6xwK6CSghI/AAAAAAAAA98/_iA3r4Ehclk/s1600/marker-green.png */
getUserLocation();
$(document).on('change','#selectAPI',function(){
    var apiChoice = $(this).val();
    console.log(apiChoice);
    getData(apiChoice)
});