├── demos ├── images │ ├── pin.png │ ├── pin_shadow.png │ └── screenshot.png ├── themes │ └── base │ │ ├── images │ │ ├── ui-icons_222222_256x240.png │ │ ├── ui-icons_2e83ff_256x240.png │ │ ├── ui-icons_454545_256x240.png │ │ ├── ui-icons_888888_256x240.png │ │ ├── ui-icons_cd0a0a_256x240.png │ │ ├── ui-bg_flat_0_aaaaaa_40x100.png │ │ ├── ui-bg_flat_75_ffffff_40x100.png │ │ ├── ui-bg_glass_55_fbf9ee_1x400.png │ │ ├── ui-bg_glass_65_ffffff_1x400.png │ │ ├── ui-bg_glass_75_dadada_1x400.png │ │ ├── ui-bg_glass_75_e6e6e6_1x400.png │ │ ├── ui-bg_glass_95_fef1ec_1x400.png │ │ └── ui-bg_highlight-soft_75_cccccc_1x100.png │ │ ├── jquery.ui.all.css │ │ ├── jquery.ui.selectable.css │ │ ├── jquery.ui.progressbar.css │ │ ├── jquery.ui.base.css │ │ ├── jquery.ui.accordion.css │ │ ├── jquery.ui.slider.css │ │ ├── jquery.ui.resizable.css │ │ ├── jquery.ui.autocomplete.css │ │ ├── jquery.ui.dialog.css │ │ ├── jquery.ui.tabs.css │ │ ├── jquery.ui.core.css │ │ ├── jquery.ui.button.css │ │ ├── jquery.ui.datepicker.css │ │ └── jquery.ui.theme.css ├── demo.css └── index.html ├── README.md └── src └── jquery.ui.addresspicker.js /demos/images/pin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgruhier/jquery-addresspicker/HEAD/demos/images/pin.png -------------------------------------------------------------------------------- /demos/images/pin_shadow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgruhier/jquery-addresspicker/HEAD/demos/images/pin_shadow.png -------------------------------------------------------------------------------- /demos/images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgruhier/jquery-addresspicker/HEAD/demos/images/screenshot.png -------------------------------------------------------------------------------- /demos/themes/base/images/ui-icons_222222_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgruhier/jquery-addresspicker/HEAD/demos/themes/base/images/ui-icons_222222_256x240.png -------------------------------------------------------------------------------- /demos/themes/base/images/ui-icons_2e83ff_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgruhier/jquery-addresspicker/HEAD/demos/themes/base/images/ui-icons_2e83ff_256x240.png -------------------------------------------------------------------------------- /demos/themes/base/images/ui-icons_454545_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgruhier/jquery-addresspicker/HEAD/demos/themes/base/images/ui-icons_454545_256x240.png -------------------------------------------------------------------------------- /demos/themes/base/images/ui-icons_888888_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgruhier/jquery-addresspicker/HEAD/demos/themes/base/images/ui-icons_888888_256x240.png -------------------------------------------------------------------------------- /demos/themes/base/images/ui-icons_cd0a0a_256x240.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgruhier/jquery-addresspicker/HEAD/demos/themes/base/images/ui-icons_cd0a0a_256x240.png -------------------------------------------------------------------------------- /demos/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgruhier/jquery-addresspicker/HEAD/demos/themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png -------------------------------------------------------------------------------- /demos/themes/base/images/ui-bg_flat_75_ffffff_40x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgruhier/jquery-addresspicker/HEAD/demos/themes/base/images/ui-bg_flat_75_ffffff_40x100.png -------------------------------------------------------------------------------- /demos/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgruhier/jquery-addresspicker/HEAD/demos/themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png -------------------------------------------------------------------------------- /demos/themes/base/images/ui-bg_glass_65_ffffff_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgruhier/jquery-addresspicker/HEAD/demos/themes/base/images/ui-bg_glass_65_ffffff_1x400.png -------------------------------------------------------------------------------- /demos/themes/base/images/ui-bg_glass_75_dadada_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgruhier/jquery-addresspicker/HEAD/demos/themes/base/images/ui-bg_glass_75_dadada_1x400.png -------------------------------------------------------------------------------- /demos/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgruhier/jquery-addresspicker/HEAD/demos/themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png -------------------------------------------------------------------------------- /demos/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgruhier/jquery-addresspicker/HEAD/demos/themes/base/images/ui-bg_glass_95_fef1ec_1x400.png -------------------------------------------------------------------------------- /demos/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sgruhier/jquery-addresspicker/HEAD/demos/themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png -------------------------------------------------------------------------------- /demos/themes/base/jquery.ui.all.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery UI CSS Framework @VERSION 3 | * 4 | * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Theming 9 | */ 10 | @import "jquery.ui.base.css"; 11 | @import "jquery.ui.theme.css"; 12 | -------------------------------------------------------------------------------- /demos/themes/base/jquery.ui.selectable.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery UI Selectable @VERSION 3 | * 4 | * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Selectable#theming 9 | */ 10 | .ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; } 11 | -------------------------------------------------------------------------------- /demos/themes/base/jquery.ui.progressbar.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery UI Progressbar @VERSION 3 | * 4 | * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Progressbar#theming 9 | */ 10 | .ui-progressbar { height:2em; text-align: left; } 11 | .ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; } -------------------------------------------------------------------------------- /demos/themes/base/jquery.ui.base.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery UI CSS Framework @VERSION 3 | * 4 | * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Theming 9 | */ 10 | @import url("jquery.ui.core.css"); 11 | 12 | @import url("jquery.ui.accordion.css"); 13 | @import url("jquery.ui.autocomplete.css"); 14 | @import url("jquery.ui.button.css"); 15 | @import url("jquery.ui.datepicker.css"); 16 | @import url("jquery.ui.dialog.css"); 17 | @import url("jquery.ui.progressbar.css"); 18 | @import url("jquery.ui.resizable.css"); 19 | @import url("jquery.ui.selectable.css"); 20 | @import url("jquery.ui.slider.css"); 21 | @import url("jquery.ui.tabs.css"); 22 | -------------------------------------------------------------------------------- /demos/themes/base/jquery.ui.accordion.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery UI Accordion @VERSION 3 | * 4 | * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Accordion#theming 9 | */ 10 | /* IE/Win - Fix animation bug - #4615 */ 11 | .ui-accordion { width: 100%; } 12 | .ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } 13 | .ui-accordion .ui-accordion-li-fix { display: inline; } 14 | .ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } 15 | .ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; } 16 | .ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; } 17 | .ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } 18 | .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; } 19 | .ui-accordion .ui-accordion-content-active { display: block; } -------------------------------------------------------------------------------- /demos/themes/base/jquery.ui.slider.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery UI Slider @VERSION 3 | * 4 | * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Slider#theming 9 | */ 10 | .ui-slider { position: relative; text-align: left; } 11 | .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; } 12 | .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } 13 | 14 | .ui-slider-horizontal { height: .8em; } 15 | .ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; } 16 | .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } 17 | .ui-slider-horizontal .ui-slider-range-min { left: 0; } 18 | .ui-slider-horizontal .ui-slider-range-max { right: 0; } 19 | 20 | .ui-slider-vertical { width: .8em; height: 100px; } 21 | .ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; } 22 | .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } 23 | .ui-slider-vertical .ui-slider-range-min { bottom: 0; } 24 | .ui-slider-vertical .ui-slider-range-max { top: 0; } -------------------------------------------------------------------------------- /demos/themes/base/jquery.ui.resizable.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery UI Resizable @VERSION 3 | * 4 | * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Resizable#theming 9 | */ 10 | .ui-resizable { position: relative;} 11 | .ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;} 12 | .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } 13 | .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } 14 | .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } 15 | .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } 16 | .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } 17 | .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } 18 | .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } 19 | .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } 20 | .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;} -------------------------------------------------------------------------------- /demos/themes/base/jquery.ui.autocomplete.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery UI Autocomplete @VERSION 3 | * 4 | * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Autocomplete#theming 9 | */ 10 | .ui-autocomplete { position: absolute; cursor: default; } 11 | 12 | /* workarounds */ 13 | * html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */ 14 | 15 | /* 16 | * jQuery UI Menu @VERSION 17 | * 18 | * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) 19 | * Dual licensed under the MIT or GPL Version 2 licenses. 20 | * http://jquery.org/license 21 | * 22 | * http://docs.jquery.com/UI/Menu#theming 23 | */ 24 | .ui-menu { 25 | list-style:none; 26 | padding: 2px; 27 | margin: 0; 28 | display:block; 29 | float: left; 30 | } 31 | .ui-menu .ui-menu { 32 | margin-top: -3px; 33 | } 34 | .ui-menu .ui-menu-item { 35 | margin:0; 36 | padding: 0; 37 | zoom: 1; 38 | float: left; 39 | clear: left; 40 | width: 100%; 41 | } 42 | .ui-menu .ui-menu-item a { 43 | text-decoration:none; 44 | display:block; 45 | padding:.2em .4em; 46 | line-height:1.5; 47 | zoom:1; 48 | } 49 | .ui-menu .ui-menu-item a.ui-state-hover, 50 | .ui-menu .ui-menu-item a.ui-state-active { 51 | font-weight: normal; 52 | margin: -1px; 53 | } 54 | -------------------------------------------------------------------------------- /demos/themes/base/jquery.ui.dialog.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery UI Dialog @VERSION 3 | * 4 | * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Dialog#theming 9 | */ 10 | .ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; } 11 | .ui-dialog .ui-dialog-titlebar { padding: .5em 1em .3em; position: relative; } 12 | .ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .2em 0; } 13 | .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; } 14 | .ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; } 15 | .ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; } 16 | .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; } 17 | .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; } 18 | .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } 19 | .ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } 20 | .ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; } 21 | .ui-draggable .ui-dialog-titlebar { cursor: move; } 22 | -------------------------------------------------------------------------------- /demos/themes/base/jquery.ui.tabs.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery UI Tabs @VERSION 3 | * 4 | * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Tabs#theming 9 | */ 10 | .ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ 11 | .ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; } 12 | .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; } 13 | .ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; } 14 | .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; } 15 | .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; } 16 | .ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ 17 | .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; } 18 | .ui-tabs .ui-tabs-hide { display: none !important; } 19 | -------------------------------------------------------------------------------- /demos/themes/base/jquery.ui.core.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery UI CSS Framework @VERSION 3 | * 4 | * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Theming/API 9 | */ 10 | 11 | /* Layout helpers 12 | ----------------------------------*/ 13 | .ui-helper-hidden { display: none; } 14 | .ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); } 15 | .ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } 16 | .ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 17 | .ui-helper-clearfix { display: inline-block; } 18 | /* required comment for clearfix to work in Opera \*/ 19 | * html .ui-helper-clearfix { height:1%; } 20 | .ui-helper-clearfix { display:block; } 21 | /* end clearfix */ 22 | .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); } 23 | 24 | 25 | /* Interaction Cues 26 | ----------------------------------*/ 27 | .ui-state-disabled { cursor: default !important; } 28 | 29 | 30 | /* Icons 31 | ----------------------------------*/ 32 | 33 | /* states and images */ 34 | .ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } 35 | 36 | 37 | /* Misc visuals 38 | ----------------------------------*/ 39 | 40 | /* Overlays */ 41 | .ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 42 | -------------------------------------------------------------------------------- /demos/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin:0 10%; 3 | color: #333; 4 | font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 5 | font-size: 16px; 6 | font-style: normal; 7 | font-weight: 300; 8 | } 9 | 10 | h1 { 11 | text-align: center; 12 | font-weight:normal; 13 | } 14 | 15 | h2 { 16 | font-weight:normal; 17 | width:100%; 18 | float:left; 19 | margin: 20px 0 0px 0; 20 | } 21 | 22 | code { 23 | background-color: ghostWhite; 24 | border: 1px solid #DEDEDE; 25 | color: #444; 26 | padding: 0 3px; 27 | } 28 | 29 | label { 30 | width: 100px; 31 | float:left; 32 | text-align:right; 33 | margin:4px 10px 0 0; 34 | } 35 | 36 | label#geo_label 37 | { 38 | width: auto; 39 | float: none; 40 | } 41 | 42 | p { 43 | float:left; 44 | width: 100%; 45 | } 46 | .gist { 47 | margin-top: 10px; 48 | font-size: 12px; 49 | } 50 | 51 | .ui-autocomplete-input, .input input { 52 | border: none; 53 | font-size: 14px; 54 | width: 300px; 55 | height: 24px; 56 | margin-bottom: 5px; 57 | padding-top: 2px; 58 | } 59 | 60 | textarea 61 | { 62 | border-color: lightgray; 63 | font-size: 14px; 64 | width: 600px; 65 | margin-bottom: 5px; 66 | padding-top: 2px; 67 | } 68 | 69 | .ui-autocomplete-input { 70 | border: 1px solid #DDD !important; 71 | padding-top: 0px !important; 72 | } 73 | 74 | .map-wrapper 75 | { 76 | float:left; 77 | margin: 0 10px 0 10px; 78 | } 79 | 80 | #map { 81 | border: 1px solid #DDD; 82 | width:300px; 83 | height: 300px; 84 | margin: 10px 0 10px 0; 85 | -webkit-box-shadow: #AAA 0px 0px 15px; 86 | } 87 | 88 | #legend { 89 | font-size: 12px; 90 | font-style: italic; 91 | } 92 | 93 | .ui-menu .ui-menu-item a { 94 | font-size: 12px; 95 | } 96 | 97 | .input { 98 | float:left; 99 | } 100 | 101 | .input-positioned 102 | { 103 | padding: 35px 0 0 0; 104 | } 105 | 106 | .clearfix:after { 107 | content: "."; 108 | display: block; 109 | clear: both; 110 | visibility: hidden; 111 | line-height: 0; 112 | height: 0; 113 | } 114 | 115 | * html .clearfix { 116 | height: 1%; 117 | } 118 | 119 | -------------------------------------------------------------------------------- /demos/themes/base/jquery.ui.button.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery UI Button @VERSION 3 | * 4 | * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Button#theming 9 | */ 10 | .ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */ 11 | .ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */ 12 | button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */ 13 | .ui-button-icons-only { width: 3.4em; } 14 | button.ui-button-icons-only { width: 3.7em; } 15 | 16 | /*button text element */ 17 | .ui-button .ui-button-text { display: block; line-height: 1.4; } 18 | .ui-button-text-only .ui-button-text { padding: .4em 1em; } 19 | .ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; } 20 | .ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; } 21 | .ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; } 22 | .ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; } 23 | /* no icon support for input elements, provide padding by default */ 24 | input.ui-button { padding: .4em 1em; } 25 | 26 | /*button icon element(s) */ 27 | .ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; } 28 | .ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; } 29 | .ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; } 30 | .ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; } 31 | .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; } 32 | 33 | /*button sets*/ 34 | .ui-buttonset { margin-right: 7px; } 35 | .ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; } 36 | 37 | /* workarounds */ 38 | button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */ 39 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | jquery-addresspicker 2 | ==================== 3 | 4 | IMPORTANT: 5 | You should check out the new version based on typeahead https://github.com/sgruhier/typeahead-addresspicker. This version won't be too much updated now 6 | Thanks 7 | 8 | 9 | jQuery UI widget for selecting an address. 10 | This widget has been develop for a specific need but feel free to use it or fork the repository 11 | 12 | 13 | 14 | 15 | You can see a live demo here: [http://xilinus.com/jquery-addresspicker/demos/index.html](http://xilinus.com/jquery-addresspicker/demos/index.html) 16 | 17 | Features 18 | ==================== 19 | 20 | - Autocompletion is maiden with jquery-autcomplete widget and filled by google maps V3 geocoding suggests. 21 | - Instant display suggestion on a map 22 | 23 | Usage 24 | ==================== 25 | 26 | ```js 27 | $('input[name="address"]' ).addresspicker(); 28 | ``` 29 | 30 | ```js 31 | $('input[name="address"]' ).addresspicker({componentsFilter: 'country:FR'}); 32 | ``` 33 | 34 | Support for IE8/9 35 | ==================== 36 | You will need to use this in order to make the plugin work with IE8/9 37 | https://github.com/MoonScript/jQuery-ajaxTransport-XDomainRequest 38 | 39 | 40 | Options (with default values) 41 | ==================== 42 | 43 | ```js 44 | { 45 | appendAddressString: "", 46 | draggableMarker: true, 47 | regionBias: null, 48 | bounds: '', 49 | componentsFilter:'', 50 | updateCallback: null, 51 | reverseGeocode: false, 52 | autocomplete: 'default', 53 | mapOptions: { 54 | zoom: 5, 55 | center: new google.maps.LatLng(46, 2), 56 | scrollwheel: false, 57 | mapTypeId: google.maps.MapTypeId.ROADMAP 58 | }, 59 | elements: { 60 | map: false, 61 | lat: false, 62 | lng: false, 63 | street_number: false, 64 | route: false, 65 | locality: false, 66 | administrative_area_level_3: false, 67 | administrative_area_level_2: false, 68 | administrative_area_level_1: false, 69 | country: false, 70 | postal_code: false, 71 | type: false 72 | }, 73 | autocomplete: '' // could be autocomplete: "bootstrap" to use bootstrap typeahead autocomplete instead of jQueryUI 74 | } 75 | ``` 76 | 77 | Credits 78 | ==================== 79 | 80 | - Sébastien Gruhier - @sgruhier[http://twitter.com/sgruhier] - (http://xilinus.com - maptimize.com[http://v2.maptimize.com]) 81 | 82 | 83 | 84 | [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/sgruhier/jquery-addresspicker/trend.png)](https://bitdeli.com/free "Bitdeli Badge") 85 | 86 | -------------------------------------------------------------------------------- /demos/themes/base/jquery.ui.datepicker.css: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery UI Datepicker @VERSION 3 | * 4 | * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * http://docs.jquery.com/UI/Datepicker#theming 9 | */ 10 | .ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; } 11 | .ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; } 12 | .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; } 13 | .ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; } 14 | .ui-datepicker .ui-datepicker-prev { left:2px; } 15 | .ui-datepicker .ui-datepicker-next { right:2px; } 16 | .ui-datepicker .ui-datepicker-prev-hover { left:1px; } 17 | .ui-datepicker .ui-datepicker-next-hover { right:1px; } 18 | .ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } 19 | .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } 20 | .ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; } 21 | .ui-datepicker select.ui-datepicker-month-year {width: 100%;} 22 | .ui-datepicker select.ui-datepicker-month, 23 | .ui-datepicker select.ui-datepicker-year { width: 49%;} 24 | .ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; } 25 | .ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; } 26 | .ui-datepicker td { border: 0; padding: 1px; } 27 | .ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; } 28 | .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; } 29 | .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; } 30 | .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; } 31 | 32 | /* with multiple calendars */ 33 | .ui-datepicker.ui-datepicker-multi { width:auto; } 34 | .ui-datepicker-multi .ui-datepicker-group { float:left; } 35 | .ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; } 36 | .ui-datepicker-multi-2 .ui-datepicker-group { width:50%; } 37 | .ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; } 38 | .ui-datepicker-multi-4 .ui-datepicker-group { width:25%; } 39 | .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; } 40 | .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; } 41 | .ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; } 42 | .ui-datepicker-row-break { clear:both; width:100%; } 43 | 44 | /* RTL support */ 45 | .ui-datepicker-rtl { direction: rtl; } 46 | .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } 47 | .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } 48 | .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } 49 | .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } 50 | .ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; } 51 | .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } 52 | .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; } 53 | .ui-datepicker-rtl .ui-datepicker-group { float:right; } 54 | .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; } 55 | .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; } 56 | 57 | /* IE6 IFRAME FIX (taken from datepicker 1.5.3 */ 58 | .ui-datepicker-cover { 59 | display: none; /*sorry for IE5*/ 60 | display/**/: block; /*sorry for IE5*/ 61 | position: absolute; /*must have*/ 62 | z-index: -1; /*must have*/ 63 | filter: mask(); /*must have*/ 64 | top: -4px; /*must have*/ 65 | left: -4px; /*must have*/ 66 | width: 200px; /*must have*/ 67 | height: 200px; /*must have*/ 68 | } -------------------------------------------------------------------------------- /demos/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jquery-addresspicker demo (a jQuery UI widget) 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 64 | 65 | 66 | Fork me on GitHub 67 | 68 |
69 |

jquery-addresspicker demo (a jQuery UI widget)

70 | 71 |

Default address picker, only autocomplete.

72 |

73 | Default address picker. It's just a jQuery autocomplete filled by google map geocoder suggestions.
74 | Try to enter an address like Saint and you'll see suggests 75 |

76 |
77 | 78 |
79 | 80 |

Address picker, with instant display selection on map.

81 |

82 | Same but the map on the left displays selected address, even while you navigate in autocomplete suggestions.
83 | Lat and Lng fields are just for information, they should be hidden inputs.

84 | You can even adjust marker position on the map.
85 |

86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 | 102 |
103 | 104 |
108 | 109 |
110 |
You can drag and drop the marker to the correct location
111 |
112 |
113 | 114 |
115 | 116 | 117 |
118 | 119 |
120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /src/jquery.ui.addresspicker.js: -------------------------------------------------------------------------------- 1 | /* 2 | * jQuery UI addresspicker @VERSION 3 | * 4 | * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) 5 | * Dual licensed under the MIT or GPL Version 2 licenses. 6 | * http://jquery.org/license 7 | * 8 | * Depends: 9 | * jquery.ui.core.js 10 | * jquery.ui.widget.js 11 | * jquery.ui.autocomplete.js 12 | */ 13 | (function( $, undefined ) { 14 | 15 | $.widget( "ui.addresspicker", { 16 | options: { 17 | appendAddressString: "", 18 | draggableMarker: true, 19 | regionBias: null, 20 | bounds: '', 21 | componentsFilter:'', 22 | updateCallback: null, 23 | reverseGeocode: false, 24 | autocomplete: 'default', 25 | language: '', 26 | mapOptions: { 27 | zoom: 5, 28 | center: new google.maps.LatLng(46, 2), 29 | scrollwheel: false, 30 | mapTypeId: google.maps.MapTypeId.ROADMAP 31 | }, 32 | elements: { 33 | map: false, 34 | lat: false, 35 | lng: false, 36 | street_number: false, 37 | route: false, 38 | locality: false, 39 | sublocality: false, 40 | administrative_area_level_3: false, 41 | administrative_area_level_2: false, 42 | administrative_area_level_1: false, 43 | country: false, 44 | postal_code: false, 45 | type: false 46 | 47 | }, 48 | autocomplete: '' // could be autocomplete: "bootstrap" to use bootstrap typeahead autocomplete instead of jQueryUI 49 | }, 50 | 51 | marker: function() { 52 | return this.gmarker; 53 | }, 54 | 55 | map: function() { 56 | return this.gmap; 57 | }, 58 | 59 | updatePosition: function() { 60 | this._updatePosition(this.gmarker.getPosition()); 61 | }, 62 | 63 | reloadPosition: function() { 64 | this.gmarker.setVisible(true); 65 | this.gmarker.setPosition(new google.maps.LatLng(this.lat.val, this.lng.val)); 66 | this.gmap.setCenter(this.gmarker.getPosition()); 67 | }, 68 | 69 | resize: function() { 70 | google.maps.event.trigger(this.gmap, 'resize') 71 | }, 72 | 73 | selected: function() { 74 | return this.selectedResult; 75 | }, 76 | _mapped: {}, 77 | _create: function() { 78 | var self = this; 79 | this.geocoder = { 80 | geocode: function(options, callback) 81 | { 82 | jQuery.ajax({ 83 | url: "https://maps.googleapis.com/maps/api/geocode/json?" + jQuery.param(options) + '&sensor=false', 84 | type: "GET", 85 | success: function(data) { 86 | callback(data.results, data.status); 87 | } 88 | }); 89 | } 90 | //new google.maps.Geocoder(); 91 | }; 92 | 93 | if (this.options.autocomplete === 'bootstrap') { 94 | this.element.typeahead({ 95 | source: function(query, process) { 96 | self._mapped = {}; 97 | var response = function(results) { 98 | var labels = []; 99 | for (var i = 0; i < results.length; i++) { 100 | self._mapped[results[i].label] = results[i]; 101 | labels.push(results[i].label); 102 | } 103 | process(labels); 104 | }; 105 | var request = {term: query}; 106 | self._geocode(request, response); 107 | }, 108 | updater: function(item) { 109 | var ui = {item: self._mapped[item]} 110 | self._focusAddress(null, ui); 111 | self._selectAddress(null, ui); 112 | return item; 113 | } 114 | }); 115 | } else { 116 | this.element.autocomplete($.extend({ 117 | source: $.proxy(this._geocode, this), 118 | focus: $.proxy(this._focusAddress, this), 119 | select: $.proxy(this._selectAddress, this) 120 | }), this.options.autocomplete); 121 | } 122 | 123 | this.lat = $(this.options.elements.lat); 124 | this.lng = $(this.options.elements.lng); 125 | this.street_number = $(this.options.elements.street_number); 126 | this.route = $(this.options.elements.route); 127 | this.locality = $(this.options.elements.locality); 128 | this.sublocality = $(this.options.elements.sublocality); 129 | this.administrative_area_level_3 = $(this.options.elements.administrative_area_level_3); 130 | this.administrative_area_level_2 = $(this.options.elements.administrative_area_level_2); 131 | this.administrative_area_level_1 = $(this.options.elements.administrative_area_level_1); 132 | this.country = $(this.options.elements.country); 133 | this.postal_code = $(this.options.elements.postal_code); 134 | this.type = $(this.options.elements.type); 135 | if (this.options.elements.map) { 136 | this.mapElement = $(this.options.elements.map); 137 | this._initMap(); 138 | } 139 | }, 140 | 141 | _initMap: function() { 142 | if (this.lat && this.lat.val()) { 143 | this.options.mapOptions.center = new google.maps.LatLng(this.lat.val(), this.lng.val()); 144 | } 145 | 146 | this.gmap = new google.maps.Map(this.mapElement[0], this.options.mapOptions); 147 | this.gmarker = new google.maps.Marker({ 148 | position: this.options.mapOptions.center, 149 | map:this.gmap, 150 | draggable: this.options.draggableMarker}); 151 | google.maps.event.addListener(this.gmarker, 'dragend', $.proxy(this._markerMoved, this)); 152 | this.gmarker.setVisible(false); 153 | }, 154 | 155 | _updatePosition: function(location) { 156 | if (this.lat) { 157 | this.lat.val(location.lat()); 158 | } 159 | if (this.lng) { 160 | this.lng.val(location.lng()); 161 | } 162 | }, 163 | 164 | _addressParts: {street_number: null, route: null, locality: null, sublocality: null, 165 | administrative_area_level_3: null, administrative_area_level_2: null, 166 | administrative_area_level_1: null, country: null, postal_code:null, type: null}, 167 | 168 | _updateAddressParts: function(geocodeResult){ 169 | 170 | parsedResult = this._parseGeocodeResult(geocodeResult); 171 | 172 | for (addressPart in this._addressParts){ 173 | if (this[addressPart]){ 174 | if (parsedResult[addressPart] !== false){ 175 | this[addressPart].val(parsedResult[addressPart]); 176 | } else { 177 | this[addressPart].val(''); 178 | } 179 | } 180 | } 181 | }, 182 | 183 | _updateAddressPartsViaReverseGeocode: function(location){ 184 | this.geocoder.geocode({'latlng': location.lat() + "," + location.lng()}, $.proxy(function(results, status){ 185 | if (status == google.maps.GeocoderStatus.OK){ 186 | 187 | this._updateAddressParts(results[0]); 188 | this.element.val(results[0].formatted_address); 189 | this.selectedResult = results[0]; 190 | 191 | if (this.options.updateCallback) { 192 | this.options.updateCallback(this.selectedResult, this._parseGeocodeResult(this.selectedResult)); 193 | } 194 | } 195 | }, this)); 196 | }, 197 | 198 | _parseGeocodeResult: function(geocodeResult){ 199 | 200 | var parsed = this._parseLatAndLng(geocodeResult.geometry.location); 201 | 202 | for (var addressPart in this._addressParts){ 203 | parsed[addressPart] = this._findInfo(geocodeResult, addressPart); 204 | } 205 | 206 | parsed.type = geocodeResult.types[0]; 207 | 208 | return parsed; 209 | }, 210 | 211 | _parseLatAndLng: function(location){ 212 | var longitude, latitude; 213 | 214 | if(typeof(location.lat) === 'function'){ 215 | latitude = location.lat(); 216 | longitude = location.lng(); 217 | } else { 218 | latitude = location.lat; 219 | longitude = location.lng; 220 | } 221 | 222 | return { lat: latitude, lng: longitude }; 223 | }, 224 | 225 | _markerMoved: function() { 226 | this._updatePosition(this.gmarker.getPosition()); 227 | 228 | if (this.options.reverseGeocode){ 229 | this._updateAddressPartsViaReverseGeocode(this.gmarker.getPosition()); 230 | } 231 | }, 232 | 233 | // Autocomplete source method: fill its suggests with google geocoder results 234 | _geocode: function(request, response) { 235 | var address = request.term, self = this; 236 | this.geocoder.geocode({ 237 | 'language': this.options.language, 238 | 'address': address + this.options.appendAddressString, 239 | 'region': this.options.regionBias, 240 | 'bounds': this.options.bounds, 241 | 'components': this.options.componentsFilter 242 | }, function(results, status) { 243 | if (status == google.maps.GeocoderStatus.OK && results) { 244 | for (var i = 0; i < results.length; i++) { 245 | result = results[i] 246 | g = result.geometry 247 | g.location = new google.maps.LatLng(g.location.lat, g.location.lng); 248 | g.viewport = new google.maps.LatLngBounds( 249 | new google.maps.LatLng(g.viewport.southwest.lat, g.viewport.southwest.lng), 250 | new google.maps.LatLng(g.viewport.northeast.lat, g.viewport.northeast.lng) 251 | ) 252 | result.label = results[i].formatted_address; 253 | } 254 | } 255 | response(results); 256 | }) 257 | }, 258 | 259 | _findInfo: function(result, type) { 260 | for (var i = 0; i < result.address_components.length; i++) { 261 | var component = result.address_components[i]; 262 | if (component.types.indexOf(type) !=-1) { 263 | return component.long_name; 264 | } 265 | } 266 | return false; 267 | }, 268 | 269 | _focusAddress: function(event, ui) { 270 | var address = ui.item; 271 | if (!address) { 272 | return; 273 | } 274 | if (this.gmarker) { 275 | this.gmarker.setPosition(address.geometry.location); 276 | this.gmarker.setVisible(true); 277 | this.gmap.fitBounds(address.geometry.viewport); 278 | } 279 | 280 | this._updatePosition(address.geometry.location); 281 | 282 | this._updateAddressParts(address); 283 | 284 | }, 285 | 286 | _selectAddress: function(event, ui) { 287 | this.selectedResult = ui.item; 288 | if (this.options.updateCallback) { 289 | this.options.updateCallback(this.selectedResult, this._parseGeocodeResult(this.selectedResult)); 290 | } 291 | } 292 | }); 293 | 294 | $.extend( $.ui.addresspicker, { 295 | version: "@VERSION" 296 | }); 297 | 298 | // make IE think it doesn't suck 299 | if(!Array.indexOf){ 300 | Array.prototype.indexOf = function(obj){ 301 | for(var i=0; i