http://ihi.im/app.js rewrite using jtmpl

app.js

// This is a remake concept of http://ihi.im/app.js using [jtmpl](http://jtmpl.com) as only dependency


(function () {
  var model = {
    
    // Route: share
    '#share': function () {
      this.route = '#share-template'

      // Original code, copy/pasted
      function initialize() {
        var mapOptions = {
          zoom: 15
        };
        map = new google.maps.Map(document.querySelector('#map'),
          mapOptions);

        // Try HTML5 geolocation
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
              position.coords.longitude);

            processLinks(position.coords);

            var marker = new google.maps.Marker({
              position: pos,
              map: map,
              title: 'Found you!'
            });

            map.setCenter(pos);
          }, function() {
            handleNoGeolocation(true);
          });
        } else {
          // Browser doesn't support Geolocation
          handleNoGeolocation(false);
        }
      }
    
      function handleNoGeolocation(errorFlag) {
        var content = (errorFlag) ? 'Maybe next time, yeah?' : 'Error: Your browser doesn\'t support geolocation.',
          options = {
            map: map,
            position: new google.maps.LatLng(60, 105),
            content: content
          },
          infowindow = new google.maps.InfoWindow(options);
      
        map.setCenter(options.position);
      }
    
      setTimeout(initialize, 750);
    },
    
    // Route: location
    '#location,data=([\S\s]+)': function (json) {
      this.route = '#view-template';
      var data = JSON.parse(json);
      
      // And the other block of original code
      window.directionsService = new google.maps.DirectionsService();

      function initialize() {
        window.directionsDisplay = new google.maps.DirectionsRenderer();
        var them = new google.maps.LatLng(data.latitude, data.longitude);
        var mapOptions = {
          zoom: 15,
          center: them
        };
        window.map = new google.maps.Map(document.getElementById('map'), mapOptions);
        window.marker = new google.maps.Marker({
          position: them,
          map: window.map,
          title: 'Your friend!'
        });
        window.directionsDisplay.setMap(window.map);
      }

      function calcRoute() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
              position.coords.longitude);

            var start = data.latitude + "," + data.longitude;
            var end = pos;
            var request = {
              origin: start,
              destination: end,
              travelMode: google.maps.TravelMode.WALKING
            };
            window.directionsService.route(request, function(response, status) {
              if (status == google.maps.DirectionsStatus.OK) {
                window.directionsDisplay.setDirections(response);
                window.marker.setMap(null);
              }
            });
          });
        }
      }
      initialize();
    },
    
    // Current route, a dynamic partial: {{>route}}
    // That's a cheat, as right now (not for long) jtmpl supports only literal partials, like {{>"#start-template"}}
    route: '#start-template',
    
    // Event handlers
    
    // Template: <a onclick="{{addMapUser}}" ....
    addMapUserClick: function (e) {
      e.preventDefault();
      calcRoute(); 
     this.setAttribute('hidden', true);
    }

  } // end model
  
  // jtmpl handles requests, as well
  var processLinks = function(data) {
    var linkVal = 'http://' + window.location.host + '/%23location,data=' + JSON.stringify({
      longitude: data.longitude,
      latitude: data.latitude
    });

    var url = "http://api.bit.ly/v3/shorten?login=<<<LOGIN>>>&apiKey=<<<API_KEY>>>&longUrl=" + linkVal + "&format=json";

    jtmpl('GET', url, function (json) {
      // jtmpl detects JSON responses and parses them
      
      // In the templates, bitlyLink is referenced like: 
      //    <a class="btn foundiconsocial-twitter" href={{bitlyLink}}> ....
      // no id attribute required
      this.bitlyLink = json.data.url;
      
      // A classical Mustache condition is expected in your template:
      // {{#sharingLinks}} .... {{/sharingLinks}}
      this.sharingLinks = true;
    });
  };  
  
  // jtmpl(targetNode, template, model)
  jtmpl('#content', '{{>route}}', model);
  
})();