sgruhier / jquery-addresspicker Goto Github PK

I've seen a bit around the web about this icon's default size being screwed up. Does anyone else have this problem?

https://groups.google.com/forum/?fromgroups#!topic/google-maps-js-api-v3/H6zj-Wtznq4

Hey, maintainer(s) of sgruhier/jquery-addresspicker!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library sgruhier/jquery-addresspicker is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "sgruhier/jquery-addresspicker",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

How to change this option "Reverse Geocode after Marker Drag?" to be "true", so no need to select "Yes" -or- "No" from the dropdown menu?

If I read the documentation correctly then google also provides a short_name. Would it be possible to get in addition to the long name?

{
long_name: "Spain",
short_name: "ES",
types: [
"country",
"political"
]
}

...in
Ive tried restarting/starting the server, changing how Rails loads the Js files (in-file, in application.html, in assets pipeline).
I am using Rails 3.2.
I have set regionBias to uk, us, etc....still centers on France.

I am trying to include address picker in my rails app however it is neither auto completing the address nor giving be the map.

Here is my haml code :-

            %li
                =f.text_field :address, :placeholder => "Address", :id => "addresspicker_map", :class => "custom_textarea"
            %li
                =f.text_field :locality, :id => "locality", :disabled => "true"

            %li
                =f.text_field :country, :id => "country", :disabled => "true"

            %li
                #map

This is my jquery :-

$(function() {
var addresspicker = $( "#addresspicker" ).addresspicker();
var addresspickerMap = $( "#addresspicker_map" ).addresspicker({
regionBias: "fr",
elements: {
map: "#map",
lat: "#lat",
lng: "#lng",
locality: '#locality',
country: '#country'
}
});
var gmarker = addresspickerMap.addresspicker( "marker");
gmarker.setVisible(true);
addresspickerMap.addresspicker( "updatePosition");

});

What could be the issue?

Thanks,
Akram

Google map was load by broken, in map a small part was loaded.
How to solve it?

I'm having a weird problem with the Google Map Marker. Everything else is working, except the icon looks weird. When I disable draggableMarker, it become normal again.

here is an image of what it looks like:

Hi,

Is possible configure addresspicker to obtain only cities ?

Thanks

Regards

I have an addresspicker in the form which is in Jquery Steps.

When I resize window the tiles are loaded better.

Anz hint why that can happen?

Get no errors or anything, just doesn't work...

There seems to be a wrong URL in /src/jquery.ui.addresspicker.js: https://github.com/sgruhier/jquery-addresspicker/blob/master/src/jquery.ui.addresspicker.js#L8
It links to the progressbar which has nothing to do with adresspicker.

On my App:
Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.

With demo files downloaded :
Origin null is not allowed by Access-Control-Allow-Origin

Has google changed something ? (Maybe a temporary issue from their side)

Hi,

just simple question, it shoud works with jQuery UI - v1.8.24 ?

thanks

how to do a specification of an administrative area in a componentsFilter. for exemple country: fr and administrativeArea : ile-de-france.

Cheers

Any help would be great

Error define itself about the issue but unfortunately no error is showing in the console. Anybody please help why map is not loading. Map is showing during the page load as soon as page load is over then the above error "This page didn't load Google Maps correctly. See the JavaScript console for technical details." show instead of the map and there is no error in the console. Please, help it's urgent. Below check the screenshot:

https://ibb.co/k0kN2v

Hello,

First of all thanks for your work, really nice !
I wanted to know if there is a way to limit the autocompletion to a list of country ? france/belgium/uk for example.

Thanks in advance

DG

Hi, I'm trying to pass the results through $_GET. Thus, when I click a button to retrieve the data. How can i do this? There are best ways?

The plugin doesn't load and center on the default address, even when calling "reloadPosition", it doesn't zoom like it does when selecting an autocomplete suggestion.

There should be a function to do the same thing than when clicking an autocomplete suggestion (centering and zooming).

I've had good success in using the address picker but am stuck on getting
the map to update, based on non-autocomplete population of the address
field. Essentially I want to trigger the same "update" to the map based on an
manual "address" field change, on in my case, having the map update when
the input changes.

Hate to call this an "issue" but could not find another way to communicate.

Thanks

Hi,
is there a way to make the map clickable to the location instead of dragging the marker?

Autocompletion and drag&drop reverse geocoding don't work on firefox 12

You can find FF 12 here
For Windows : https://www.dropbox.com/s/ar8437tv9as7xxi/Firefox%20Setup%2012.0.exe
MAC OS : https://www.dropbox.com/s/n5hsu0xyigbbfx6/Firefox%2012.0.dmg

It works great- everywhere except IE9 with a later version of JQuery.

The demo features 1.4.4 but if I plugin the version of JQuery I am using (1.8.2) and open in ie9, the dropdown stops working.

Any ideas? Works fine in IE10.

Hi

First of all Nice work.

plugin works well.

Now my Problem is when i merge all bower files then except address-picker all files merge successfully but not address-picker help me that
it is the issue of "addresspicker": "*" or it is the issue of something else ?

This is my gulp file

Gulpfile.js

'use strict';

/**
 * ======================START===========================
 */


/**
 * [gulp initilize all modules which we will use in our project]
 * @type {[nothing]}
 */
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    nodemon = require('gulp-nodemon'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    plugins = require("gulp-load-plugins")({
              pattern: ['gulp-*', 'gulp.*', 'main-bower-files'],
              replaceString: /\bgulp[\-.]/
            }),
    //livereload = require('gulp-livereload'),
    del = require('del');


/**
 * [in this section we do all JS related task means 
 *  here we are doing JS TO .MIN JS and multiple js combined in single js]
 * @param  {[js]}
 * @return {[.min js]}
 */

gulp.task('bowerscripts', function() {
  // var jsFiles = ['app/scripts/**/*.js'];
  return gulp.src(plugins.mainBowerFiles())
    // .pipe(jshint('.jshintrc'))
    // .pipe(jshint.reporter('default'))
    .pipe(plugins.filter('*.js'))
    .pipe(plugins.concat('vendor.js'))
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(plugins.rename({suffix: '.min'}))
    .pipe(plugins.uglify())
    .pipe(gulp.dest('dist/assets/js'))
    .pipe(notify({ message: 'Scripts  Bower task complete' }));
});

and this is my bower file

{
  "name": "pin",
  "version": "0.0.0",
  "dependencies": {
    "angular": "1.2.11",
    "jquery": "2.1.3",
    "json3": "~3.2.6",
    "es5-shim": "~2.1.0",
    "angular-resource": "1.2.11",
    "angular-cookies": "1.2.11",
    "angular-sanitize": "1.2.11",
    "angular-route": "1.2.11",
    "angular-bootstrap": "~0.10.0",
    "angular-socket-io": "0.7.0",
    "socket.io-client": "~0.9.16",
    "socket.io": "~0.9.15",
    "bootstrap": "3.0.3",
    "bootstrap-sass-official": "~3.1.1",
    "fabric": "1.4.4",
    "angular-loading-bar": "~0.3.0",
    "ng-tags-input": "2.0.1",
    "fontawesome": "~4.1.0",
    "angular-social": "https://github.com/siddhant3s/angular-social.git#master",
    "angulartics": "~0.15.20",
    "angular-scroll": "0.6.1",
    "ng-file-upload": "~1.6.12",
    "textAngular": "1.3.11",
    "videogular": "1.1.0",
    "videogular-buffering": "1.1.0",
    "videogular-controls": "1.1.0",
    "videogular-ima-ads": "1.1.0",
    "videogular-poster": "1.1.0",
    "videogular-themes-default": "1.1.0",
    "videogular-overlay-play": "1.1.0",
    "ng-grid": "2.0.14",
    "isotope": "2.1.1",
    "xtform": "1.0.1",
    "angular-smart-table": "~2.0.2",
    "addresspicker": "*",
    "jquery-ui": "~1.11.4"
  },
  "devDependencies": {
    "angular-mocks": "1.2.11",
    "angular-scenario": "1.2.11"
  },
  "testPath": "test/client/spec"
}

It will be nice if we are getting timezone of that address too in response.

Hello,
We have just add jquery-addresspicker to twittstrap resources list
http://www.twittstrap.com/resources/details/jquery-addresspicker
Under : Forms
Regards

I'm not sure if this applies to US address, but here in Canada most of the auto complete addresses have wrong postal code (zip code). The user is unable to type in the correct address and type enter, where the only way to trigger the geocoding is to choose one of the incorrect auto complete address.

Would it be possible to geocode without choosing the auto completed address and just press enter or something?

I just wanted to share a new try of address picker based on the latest typeahead autocomplete of twitter: http://sgruhier.github.io/typeahead-addresspicker/

May the next version of this address picker :).

I used new google map API/Service too. They are much more powerful, with more parameters.

When I use the component to the jquery bootstrap wizard, it does not refresh the tiles, instead it shows a large gray area and the first tile. I think it needs a resize event?

Is there an unstated dependency somewhere?

It seems the demo page http://xilinus.com/jquery-addresspicker/demos/index.html is down at the moment:

The page you were looking for doesn't exist.

You may have mistyped the address or the page may have moved.

First off thank for this piece of code, it works great!

Here is what I am trying to do: when you pick a location in the auto-complete drop down menu, it fill the input field with selected value, for example, if I am trying to find the Empire State Building in new York, the selected value will end up being: "Empire State Bldg, New York, NY 10001, USA".

I would like instead to have "Empire State Bldg" :i.e. address_components[0].long_name

In your example, I tried to add something like this in _focusAddress:
this.addresspicker_map.val(address.address_components[0].long_name);

This works fine to extract address_components[0].long_name to another #id, but does not work to extract it to the main input field.

If this is confusing, here is a site where what I am trying to achieve has been implemented:
http://traveltriangle.com/#search_trips

Any advice will be appreciated.

Thanks.

Is it possibel to update a custom field based on country change ?

For example, when i pick an address and the field "country" is populated i want to update another field with an "id" of that country that i have stored in a DB based on the country selection.
(i have a table with the country name and their ID)

thanks.

The google geocoder isn't meant to do auto complete. E.g. try to write Israel or Brooklyn and it will only suggest those after writing almost the full address. We switched from using it to a mix and match and added Google Places Autocomplete API: http://code.google.com/apis/maps/documentation/places/autocomplete.html

When focusing on any of the dropdown sugestions, it replaces the default search value, how do i unbind this action so that it will not replace the value until i activate it.

I tried using the componentsFilter configuration, i set it to "country:FR" but the suggestions keep being worldwide.

Hi , i was wondering if someone could help me with changing the source of the Autocomplete from geocode to places.

Hi,

Recently in ur commit u added regionBiais. What's the goal of that option ?

Hi,

I want draw a circle around the point.

How I can do it?

$(function () {
        var addresspickerMap = $("{{ '#' ~ form.vars.name  ~ '_address_addressAutocomplete' }}").addresspicker({
            map: map,
            regionBias: "es",
            mapOptions: {
                zoom: {{ zoom | default(4) }},
                center: new google.maps.LatLng({{ form.vars.data.address.lat | default(40.46366700000001) }}, {{ form.vars.data.address.lon | default(-3.7492200000000366)}}),
                scrollwheel: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            elements: {
                map: "#map",
                lat: "{{ '#' ~ form.vars.name  ~ '_address_lat' }}",
                lng: "{{ '#' ~ form.vars.name  ~ '_address_lon' }}",
                street_number: "{{ '#' ~ form.vars.name  ~ '_address_streetNumber' }}",
                route: "{{ '#' ~ form.vars.name  ~ '_address_street' }}",
                locality: "{{ '#' ~ form.vars.name  ~ '_address_location' }}",
                administrative_area_level_2: "{{ '#' ~ form.vars.name  ~ '_address_region' }}",
                administrative_area_level_1: "{{ '#' ~ form.vars.name  ~ '_address_state' }}",
                country: "{{ '#' ~ form.vars.name  ~ '_address_country' }}",
                postal_code: "{{ '#' ~ form.vars.name  ~ '_address_zipcode' }}"
            }
        });

        var gmarker = addresspickerMap.addresspicker("marker");
        gmarker.setVisible(true);
        addresspickerMap.addresspicker("updatePosition");

          var circle = new google.maps.Circle({
            map: addresspickerMap.gmap,
            radius: 16093,    // 10 miles in metres
            fillColor: '#AA0000'
    });
        circle.bindTo('center', gmarker.getPosition(), 'position');

I prove this code but not works.

Thanks

Regards

HI there
Great plugin , is amazing.

Is there anyway to show the current geo location, in the address field?

Currently the address box remains empty until you move the marker, which is great, but I would like to show the current geolocation in the address box, before moving the marker.

I have my map currently centered on vietnam, but I would like to have the main location marker exactly on my current location address with the address displayed in the address box.

Cheers

Any help would be great

Inside the input box for location is it possible that we can get suggestions for area without state inside the suggestion list.

eg: If I type Mumbai inside the input box I do get the suggestions as "Mumbai, Maharashtra, India". So now I want the results excluding Maharashtra which is a state as "Mumbai, India".

I tried with the following config:
elements: {
administrative_area_level_1: false,
}

but it didn't worked. Any help would be appreciated.

When using bootstrap as value for the option autocomplete, the plugin throws a fatal error : Uncaught TypeError: Cannot read property 'length' of null on line 79

How can I update the address field, when the user moved the marker?
Wasn't this feature part of an earlier version? When I try at http://xilinus.com/jquery-addresspicker/demos/ the lat and lng fields will be updated, but not the address field.

Is there a good way to do it since at that stage google already returned the geocoding information?

Thank you for your answer.

Hi,

Is there any way or modification to make your library able to search not only addresses but places also?

Thanks in advance

The script is awesome ! but there is a small shortcoming ...

Let's put this situation.
I have typed an address->selected from suggestion list.Then I want to change the address with another one -> I start typing the new address -> but for this time instead of selecting an address from list of suggestions I will move the cursor out and in the field box will remain address which I have typed ( not one from suggestion list ) .
This will conduct to wrong data across the form because the address and the geodata will not match and this could be confusing .

Solution:

for the mouseout event to be provided a method to check if the result has been selected from the list of suggestions !

if its true that is good if not than something needs to be done :)

Please take this in consideration !

Thank you
Sergiu