share google map trip (bit.ly, jst)

share_trip.coffee

(($) ->
  defaults =
    version: "3.0"
    login: "evogiadmin"
    apiKey: "R_026ef971c6878e251cb7a2d395e88a6d"
    history: "0"
    format: "json"

  $.bitly = (url, params) ->
    params = $.extend(defaults, params)
    params.longUrl = url
    $.getJSON "http://api.bit.ly/shorten?callback=?", params, (data, status, xhr) ->
      view = JST["application/short_url"](short_url: data.results[params.longUrl].shortUrl)
      $("body").append view
      $("#modal-alert").modal "show"
      $("#short_url").select()
) jQuery

window.shareTrip = ->
  arr = []
  for n of allPoints
    arr.push allPoints[n].toUrlValue()

  latlngs = new google.maps.MVCArray()
  for n of arr
    lat = arr[n].split(",")[0]
    lng = arr[n].split(",")[1]
    new google.maps.LatLng(lat, lng)
    newLocation = new google.maps.LatLng(lat, lng)
    latlngs.push newLocation

  startMarker = latlngs.getAt(0).toUrlValue()
  endMarker = [ "color:0x68BF4C", "label:B", latlngs.getAt(latlngs.length - 1).toUrlValue() ].join("|")
  encodeString = google.maps.geometry.encoding.encodePath(latlngs)

  longUrl = "http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=400x400&scale=2&path=weight:2|color:0x0000FFFF|enc:"
  longUrl += encodeString
  longUrl += "&markers="
  longUrl += startMarker
  longUrl += "&markers="
  longUrl += endMarker

  $.bitly longUrl

share_trip.js

(function($){

  // https://raw.github.com/addyosmani/spine.bitly/master/app/models/url.js  
  var defaults = {
    version: "3.0",
    login: "YOURBITLYLOGIN",
    apiKey: "YOURBITLYAPIKEY",
    history: "0",
    format: "json"
  };

  $.bitly = function( url, params ) {
    
    var params = $.extend( defaults, params );
    params.longUrl = url;
    
    $.getJSON("http://api.bit.ly/shorten?callback=?", params, function(data, status, xhr){
  	  view = JST['application/short_url']({short_url: data.results[params.longUrl].shortUrl});
  	  $('body').append(view);
  	  $('#modal-alert').modal('show');
  	  $('#short_url').select();
    });
  };
  
})(jQuery);

function shareTrip() {
  arr = [];
  
  // not sure this for loop syntax is supported in IE
  for (n in allPoints) {
    arr.push(allPoints[n].toUrlValue());
  }

  var latlngs = new google.maps.MVCArray();

  for (n in arr) {
    lat = arr[n].split(',')[0];
    lng = arr[n].split(',')[1];
    new google.maps.LatLng(lat, lng)
    var newLocation = new google.maps.LatLng(lat, lng);
    latlngs.push(newLocation);
  }

  var startMarker = latlngs.getAt(0).toUrlValue();

  var endMarker = [
  	'color:0x68BF4C',
  	'label:B',
  	latlngs.getAt(latlngs.length-1).toUrlValue()].join('|');

  var encodeString = google.maps.geometry.encoding.encodePath(latlngs);

  var longUrl = 'http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=400x400&scale=2&path=weight:2|color:0x0000FFFF|enc:';
  longUrl += encodeString;
  longUrl += '&markers=';
  longUrl += startMarker;
  longUrl += '&markers=';
  longUrl += endMarker;
  
  // http://maps.googleapis.com/maps/api/staticmap?sensor=false&size=400x400&scale=2&path=weight:2|color:0x0000FFFF|enc:_eglEjx}jTPG??@oB@_DCcBi@U?F?@UG??}A@uB@i@b@CrA?r@ZvCqAx@uCz@}CJgBES^EpE@`G@|@@rD@|ChF|AlGCxGAxF@|EAvBEV?v@tAE|E?tF@`FbIl@Pg@BBJ@&markers=33.629116,-112.060376&markers=color:0x68BF4C|label:B|33.623995,-112.069514
  // -UPDATED-
  // http://maps.googleapis.com/maps/api/staticmap?key=AIzaSyAtP2yDHiaUPVMUir9n6rE6MFBzb2UYWGI&size=400x400&scale=2&path=weight:2|color:0x0000FFFF|enc:_eglEjx}jTPG??@oB@_DCcBi@U?F?@UG??}A@uB@i@b@CrA?r@ZvCqAx@uCz@}CJgBES^EpE@`G@|@@rD@|ChF|AlGCxGAxF@|EAvBEV?v@tAE|E?tF@`FbIl@Pg@BBJ@&markers=33.629116,-112.060376&markers=color:0x68BF4C|label:B|33.623995,-112.069514


  $.bitly(longUrl);

}; <!-- end shareTrip() -->

share_url.jst.hamlc

#modal-alert.modal.fade
  .modal-header
    %a.close{:href => '#', 'data-dismiss' => 'modal'} x
    Paste link in email or IM
  .modal-body
    %input#short_url.input-medium{:value => "#{@short_url}"}

show.html

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">

<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false&libraries=geometry"></script>

<a href="#" onClick="shareTrip()" class="btn btn-success"><i class="icon-share-alt icon-white"></i> Share</a>