gmaps-autocomplete-rails 0.1.0

data/spec/jquery-ui/jquery.ui.1.8.16.ie.css

@@ -0,0 +1,6 @@
+
+.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-left, .ui-corner-bottom{ border-radius:0px;}
+.ui-state-active,.ui-tabs-selected { border-radius:0px;}
+.ui-tabs-selected { border-radius:0px;}
+.ui-tabs .ui-tabs-nav li{ filter:none;}
+.ui-tabs .ui-tabs-nav li a { border-radius:0px; }

data/spec/main.css

@@ -0,0 +1,89 @@
+html {
+  margin:0;
+  padding:0;
+  border:0;
+}
+
+body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, code,
+del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, dialog, figure, footer, header,
+hgroup, nav, section {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+body {
+  color: #333;
+  margin: 50px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:13px;
+}
+
+#gmaps-canvas {
+  height: 400px;
+
+  border: 1px solid #999;
+  -moz-box-shadow:    0px 0px 5px #ccc;
+  -webkit-box-shadow: 0px 0px 5px #ccc;
+  box-shadow:         0px 0px 5px #ccc;
+}
+
+#gmaps-error {
+  color: #cc0000;
+}
+
+h1 {
+  font-weight: bold;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+p {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+hr {
+  border: none;
+  padding: 5px;
+  border-bottom: 1px solid #efefef;
+}
+
+#container {
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 30px;
+  padding: 25px;
+  border: 1px solid #999;
+  -moz-box-shadow:    0px 0px 15px #ccc;
+  -webkit-box-shadow: 0px 0px 15px #ccc;
+  box-shadow:         0px 0px 15px #ccc;
+}
+
+input {
+  width: 500px;
+}
+
+#results {
+  color: #555;
+  padding-top: 10px;
+}
+
+#input {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: #ccc;
+}
+#input #gmaps-output-latitude, #input #gmaps-output-longitude {
+  color: green;
+}
+
+.download { float: right; }

data/spec/spec_helper.rb

@@ -0,0 +1,12 @@
+$LOAD_PATH.unshift(File.join(File.dirname(__FILE__), '..', 'lib'))
+$LOAD_PATH.unshift(File.dirname(__FILE__))
+require 'rspec'
+require 'gmaps-autocomplete-rails'
+
+# Requires supporting files with custom matchers and macros, etc,
+# in ./support/ and its subdirectories.
+Dir["#{File.dirname(__FILE__)}/support/**/*.rb"].each {|f| require f}
+
+RSpec.configure do |config|
+  
+end

data/vendor/assets/javascripts/gmaps-autocomplete.js

@@ -0,0 +1,233 @@
+var GmapsAutoComplete = {
+  geocoder: null,
+  map: null,
+  marker: null,
+  inputField: null,
+  errorField: null,
+  positionOutputter: null,
+
+  // initialise the google maps objects, and add listeners
+  mapElem: document.getElementById("gmaps-canvas"), 
+  zoomLevel: 2, 
+  mapType: google.maps.MapTypeId.ROADMAP,
+  pos: [51.751724, -1.255284],
+  inputField: '#gmaps-input-address',
+  errorField: '#gmaps-error',
+  positionOutputter: this.defaultPositionOutputter,
+
+  gmaps_init: function(opts){
+    opts = opts || {};
+
+    defaultOptions = {
+      mapElem: "#gmaps-canvas", 
+      zoomLevel: 2, 
+      mapType: google.maps.MapTypeId.ROADMAP,
+      pos: [51.751724, -1.255284],
+      inputField: '#gmaps-input-address',
+      errorField: '#gmaps-error',
+      positionOutputter: this.defaultPositionOutputter
+    };
+
+    $.extend(opts, defaultOptions);
+
+    var pos = opts['pos'];
+    var lat = pos[0];
+    var lng = pos[1];
+
+    var mapType = opts['mapType'];
+    var mapElem = null;
+    
+    if (opts['mapElem']) {
+      mapElem = $(opts['mapElem']).get(0);  
+    }
+    
+    var zoomLevel = opts['zoomLevel'];
+    
+    this.inputField = opts['inputField'];
+    this.errorField = opts['#gmaps-error'];
+
+    this.positionOutputter = opts['positionOutputter'];
+
+    // center of the universe
+    var latlng = new google.maps.LatLng(lat, lng);
+
+    var options = {
+      zoom: zoomLevel,
+      center: latlng,
+      mapTypeId: mapType
+    };
+
+    // the geocoder object allows us to do latlng lookup based on address
+    geocoder = new google.maps.Geocoder();
+
+    var self = this;
+
+    if (typeof(mapElem) == 'undefined') {
+      self.showError("Map element " + opts['mapElem'] + " could not be resolved!");
+    }
+
+    if (mapElem) {
+      // create our map object
+      this.map = new google.maps.Map(mapElem, options);
+
+      if (this.map) {
+        // the marker shows us the position of the latest address
+        this.marker = new google.maps.Marker({
+          map: this.map,
+          draggable: true
+        });
+
+        marker = this.marker;
+
+        // event triggered when marker is dragged and dropped
+        google.maps.event.addListener(this.marker, 'dragend', function() {
+          self.geocode_lookup( 'latLng', marker.getPosition() );
+        });
+
+        // event triggered when map is clicked
+        google.maps.event.addListener(this.map, 'click', function(event) {
+          marker.setPosition(event.latLng)
+          self.geocode_lookup( 'latLng', event.latLng  );
+        });        
+      }
+    }
+  },
+
+  // move the marker to a new position, and center the map on it
+  update_map: function( geometry ) {
+    if (this.map) {
+      this.map.fitBounds( geometry.viewport )
+    }
+
+    if (this.marker) {
+      this.marker.setPosition( geometry.location )  
+    }
+  },
+
+  // fill in the UI elements with new position data
+  update_ui: function( address, latLng ) {
+    $(this.inputField).autocomplete("close");
+    $(this.inputField).val(address);
+
+    this.positionOutputter(latLng);
+  },
+
+  defaultPositionOutputter: function(latLng) {
+    $('#gmaps-output-latitude').html(latLng.lat());
+    $('#gmaps-output-longitude').html(latLng.lng());    
+  },
+
+  // Query the Google geocode object
+  //
+  // type: 'address' for search by address
+  //       'latLng'  for search by latLng (reverse lookup)
+  //
+  // value: search query
+  //
+  // update: should we update the map (center map and position marker)?
+  geocode_lookup: function( type, value, update ) {
+    // default value: update = false
+    update = typeof update !== 'undefined' ? update : false;
+
+    request = {};
+    request[type] = value;
+    var self = this;
+
+    geocoder.geocode({address: request.term, region: 'DK'}, function(results, status) {
+      $(self.errorField).html('');
+      if (status == google.maps.GeocoderStatus.OK) {
+        // Google geocoding has succeeded!
+        if (results[0]) {
+          // Always update the UI elements with new location data
+          self.update_ui( results[0].formatted_address,
+                     results[0].geometry.location )
+
+          // Only update the map (position marker and center map) if requested
+          if( update ) { update_map( results[0].geometry ) }
+        } else {
+          // Geocoder status ok but no results!?
+          self.showError("Sorry, something went wrong. Try again!");
+        }
+      } else {
+        // Google Geocoding has failed. Two common reasons:
+        //   * Address not recognised (e.g. search for 'zxxzcxczxcx')
+        //   * Location doesn't map to address (e.g. click in middle of Atlantic)
+
+        if( type == 'address' ) {
+          // User has typed in an address which we can't geocode to a location
+          self.showError("Sorry! We couldn't find " + value + ". Try a different search term, or click the map." );
+        } else {
+          // User has clicked or dragged marker to somewhere that Google can't do a reverse lookup for
+          // In this case we display a warning, clear the address box, but fill in LatLng
+          self.showError("Woah... that's pretty remote! You're going to have to manually enter a place name." );
+          self.update_ui('', value)
+        }
+      };
+    });
+  },
+
+  showError: function(msg) {    
+    $(self.errorField).html(msg);
+    $(self.errorField).show();
+
+    setTimeout(function(){
+      $(self.errorField).hide();
+    }, 1000);
+  },
+
+  // initialise the jqueryUI autocomplete element
+  autocomplete_init: function (opts) {
+    var self = this;
+    opts = opts || {};
+    var region = opts['region'] || 'DK';
+
+    $(self.inputField).autocomplete({
+
+      // source is the list of input options shown in the autocomplete dropdown.
+      // see documentation: http://jqueryui.com/demos/autocomplete/
+      source: function(request,response) {
+
+        // https://developers.google.com/maps/documentation/geocoding/#RegionCodes
+        console.log('region', region);
+        var region_postfix = ''
+        if (region) {
+          region_postfix = ', ' + region
+        }
+
+        geocode_opts = {'address': request.term + region_postfix }
+
+        // the geocode method takes an address or LatLng to search for
+        // and a callback function which should process the results into
+        // a format accepted by jqueryUI autocomplete
+        geocoder.geocode(geocode_opts, function(results, status) {
+          response($.map(results, function(item) {
+            return {
+              label: item.formatted_address, // appears in dropdown box
+              value: item.formatted_address, // inserted into input element when selected
+              geocode: item                  // all geocode data: used in select callback event
+            }
+          }));
+        })
+      },
+
+      // event triggered when drop-down option selected
+      select: function(event,ui){
+        self.update_ui(  ui.item.value, ui.item.geocode.geometry.location )
+        self.update_map( ui.item.geocode.geometry )
+      }
+    });
+
+    // triggered when user presses a key in the address box
+    $(self.inputField).bind('keydown', function(event) {
+      if(event.keyCode == 13) {
+        geocode_lookup( 'address', $(self.inputField).val(), true );
+
+        // ensures dropdown disappears when enter is pressed
+        $(self.inputField).autocomplete("disable")
+      } else {
+        // re-enable if previously disabled above
+        $(self.inputField).autocomplete("enable")
+      }
+    });
+  } // autocomplete_init
+}

metadata

@@ -0,0 +1,178 @@
+--- !ruby/object:Gem::Specification
+name: gmaps-autocomplete-rails
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+  prerelease: 
+platform: ruby
+authors:
+- Kristian Mandrup
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-09-06 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.0.0
+- !ruby/object:Gem::Dependency
+  name: rspec
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 2.8.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 2.8.0
+- !ruby/object:Gem::Dependency
+  name: rdoc
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '3.12'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '3.12'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 1.0.0
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 1.0.0
+- !ruby/object:Gem::Dependency
+  name: jeweler
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 1.8.4
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ~>
+      - !ruby/object:Gem::Version
+        version: 1.8.4
+- !ruby/object:Gem::Dependency
+  name: simplecov
+  requirement: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.5'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.5'
+description: Easily add autocomplete geo-functionality to your Rails app :)
+email: kmandrup@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files:
+- LICENSE.txt
+- README.md
+files:
+- .document
+- .rspec
+- Gemfile
+- Gemfile.lock
+- LICENSE.txt
+- README.md
+- Rakefile
+- VERSION
+- lib/gmaps-autocomplete-rails.rb
+- lib/gmaps-autocomplete/view_helper.rb
+- spec/index.html
+- spec/init.js
+- spec/jquery-ui/images/ui-bg_flat_0_aaaaaa_40x100.png
+- spec/jquery-ui/images/ui-bg_glass_55_fbf9ee_1x400.png
+- spec/jquery-ui/images/ui-bg_glass_65_ffffff_1x400.png
+- spec/jquery-ui/images/ui-bg_glass_75_dadada_1x400.png
+- spec/jquery-ui/images/ui-bg_glass_75_e6e6e6_1x400.png
+- spec/jquery-ui/images/ui-bg_glass_75_ffffff_1x400.png
+- spec/jquery-ui/images/ui-bg_highlight-soft_75_cccccc_1x100.png
+- spec/jquery-ui/images/ui-bg_inset-soft_95_fef1ec_1x100.png
+- spec/jquery-ui/images/ui-icons_222222_256x240.png
+- spec/jquery-ui/images/ui-icons_2e83ff_256x240.png
+- spec/jquery-ui/images/ui-icons_454545_256x240.png
+- spec/jquery-ui/images/ui-icons_888888_256x240.png
+- spec/jquery-ui/images/ui-icons_cd0a0a_256x240.png
+- spec/jquery-ui/images/ui-icons_f6cf3b_256x240.png
+- spec/jquery-ui/jquery-ui-1.8.16.custom.css
+- spec/jquery-ui/jquery.ui.1.8.16.ie.css
+- spec/main.css
+- spec/spec_helper.rb
+- vendor/assets/javascripts/gmaps-autocomplete.js
+homepage: http://github.com/kristianmandrup/gmaps-autocomplete-rails
+licenses:
+- MIT
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+      segments:
+      - 0
+      hash: 2031419109795997149
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.24
+signing_key: 
+specification_version: 3
+summary: Google Maps v3 search with jQuery UI Autocomplete, ready for use with Rails
+  asset pipeline
+test_files: []