Prikaz običajne Google karte je dokaj enostaven in osnovni primer nam ponudi že kar Google sam s klikom na ikono verige na spletni strani Google Maps.

Tak način prikaza imam implementiran že nekaj časa, a je preveč dolgočasen, saj je statičen, kar se programiranja tiče. No, še vedno je dovolj dober, da z njim prikažemo lokacijo določenega naslova ali koordinate, za več pa je treba imeti dinamičen objekt.

Google ponuja Google Maps API, ki je skupek (zakompliciranih) APIjev za dinamičen prikaz kart in manipuliranje z njimi. Seveda pa se je za delo z njimi potrebno najprej registrirati pri Googlu in dobiti svoj unikaten ključ. Zakaj? Google limitira število prikazov za brezplačno uporabo, če imamo prikazov preveč, jih je potrebno Googlu plačati.

Zaenkrat sem uporabil anonimni dostop in upam, da bo čez čas še vedno deloval, saj se registriral nisem.

Implemetacija karte s prilepljeno GPX potjo je dokaj enostavna, kot se izkaže (še posebej, če človek najde že pripravljeno kodo).

Najprej naložimo Google Maps API:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

Nato inicializiramo JavaScript objekt in <DIV>, ki bo vseboval prikazano karto:

<div id="map_canvas" class="googlemaps"></div>
<script>
var map;
function initialize() {
  var myLatLng = new google.maps.LatLng(0,0);
  var mapOptions = {
    zoom: 1,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };
  map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
}
initialize();
</script>

Zdaj pa k težjemu delu. Na karto je potrebno pripeti točke iz GPX datoteke in jih povezati v črto. To naredimo z odlično lastnostjo jQuery, da že inherentno podpira AJAX nalaganje XML vsebin (GPX je v bistvu XML datoteka). Torej z .ajax() naložimo datoteko GPX in nato po njej iteriramo po vseh XML točkah <trkpt> in sestavljamo listo točk tipa LatLng. Ko obdelamo celoten XML, dobljene točke pripnemo v objekt PolyLine, kateremu nastavimo še barvo in prosojnost ter ga napnemo na karto. In to je to!

$.ajax({
  type: "GET",
  url: "URL_to_the_GPX_file",
  dataType: "xml",
  success: function(xml) {
    var points = [];
    var bounds = new google.maps.LatLngBounds ();
    $(xml).find("trkpt").each(function() {
      var lat = $(this).attr("lat");
      var lon = $(this).attr("lon");
      var p = new google.maps.LatLng(lat, lon);
      points.push(p);
      bounds.extend(p);
    });
    var poly = new google.maps.Polyline({
      // use your own style here
      path: points,
      strokeColor: "#FF00AA",
      strokeOpacity: .7,
      strokeWeight: 4
    });
    poly.setMap(map);
    // fit bounds to track
    map.fitBounds(bounds);
  }
});

Vsakič, ko vidim kako so stvari enostavne z uporabo jQuery, se mi smeji, da sem se pred časom odločil zanj.