easierbycode
2/23/2012 - 7:21 PM

share google map trip (bit.ly, jst)

share google map trip (bit.ly, jst)

<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>
#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}"}
(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


  $.bitly(longUrl);

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