index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" href="css/leaflet.css" type="text/css" />
  <script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
  <div id="map"></div>
  <script src="js/jsapi.js" type="text/javascript"></script>
  <script src="js/leaflet.js" type="text/javascript"></script>
  <script src="js/leaflet-ajax.js" type="text/javascript"></script>
  <script src="js/cordova-2.7.0.js" type="text/javascript"></script>
  <script type="text/javascript">

  var me = L.icon({
    iconUrl: 'img/marker-icon.png',
    shadowUrl: 'img/marker-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

  // Wait for Cordova to load
  //
  document.addEventListener("deviceready", onDeviceReady, false);

  // Cordova is ready
  //
  function onDeviceReady() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
  }

  // onSuccess Geolocation
  //
  function onSuccess(position) {
    var myCoords = [position.coords.latitude, position.coords.longitude];

  // Skapar kartan, ger centrering på variablerna ovan
  //
  var map = L.map('map').setView([myCoords[0], myCoords[1]], 11);

    // Hämtar kartbilder från en API
    L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
      maxZoom: 20
    }).addTo(map);

    // Placerar en markering på kartan där jag är
    //
    L.marker([myCoords[0], myCoords[1]], {icon: me}).addTo(map).bindPopup("<center><b>Jag</b></center>");
  }

    // onError Callback receives a PositionError object
    //
    function onError(error) {
      alert("Något gick snett. Maila oss vad som hände!");
    }

  // Kallar funktionen som hämtar förare från vår API
  //
  driversRealtime();

  // Förare hämtas från vår API och skrivs ut på kartan
  //
  function driversRealtime() {
   setInterval(function () {
    var url = "http://blackcab.didair.se/api/drivers";
    var name;
    var img;

    $.getJSON(url,
    function (response) {
        name = response.drivers[0].name;
        img = response.drivers[0].img;
        for (var i = 0; i < response.drivers.length; i++) {
            var driver = response.drivers[i];
            var m = L.marker(new L.LatLng(driver.currentLat, driver.currentLon)).addTo(map)
                .bindPopup("<center><b>" + driver.name + "<\/b><\/center>");
         }
      });
    // Loopar funktionen var 3:e sekund
    //
    }, 3000);
  }
  </script>
</body>
</html>