- GoongGeocoder
A geocoder component using the Goong Places API
options
Objectoptions.accessToken
String Required. An API Key created at https://account.goong.iooptions.origin
String Use to set a custom API origin. (optional, defaulthttps://rsapi.goong.io
)options.goongjs
Object? A goongjs instance to use when creating Markers. Required ifoptions.marker
istrue
.options.zoom
Number On geocoded result what zoom level should the map animate to. (optional, default16
)options.flyTo
(Boolean | Object) Iffalse
, animating the map to a selected result is disabled. Iftrue
, animating the map will use the default animation parameters. (optional, defaulttrue
)options.placeholder
String Override the default placeholder attribute value. (optional, defaultSearch
)options.proximity
Object? a proximity argument: this is a geographical point given as an object withlatitude
andlongitude
properties. Search results closer to this point will be given higher priority.options.trackProximity
Boolean Iftrue
, the geocoder proximity will automatically update based on the map view. (optional, defaulttrue
)options.collapsed
Boolean Iftrue
, the geocoder control will collapse until hovered or in focus. (optional, defaultfalse
)options.clearAndBlurOnEsc
Boolean Iftrue
, the geocoder control will clear it's contents and blur when user presses the escape key. (optional, defaultfalse
)options.clearOnBlur
Boolean Iftrue
, the geocoder control will clear its value when the input blurs. (optional, defaultfalse
)options.minLength
Number Minimum number of characters to enter before results are shown. (optional, default2
)options.limit
Number Maximum number of results to show. (optional, default5
)options.radius
Number Distance by kilometers around search location (optional, default3000
)options.marker
(Boolean | Object) Iftrue
, a Marker will be added to the map at the location of the user-selected result using a default set of Marker options. If the value is an object, the marker will be constructed using these options. Iffalse
, no marker will be added to the map. Requires thatoptions.goongjs
also be set. (optional, defaulttrue
)options.render
Function? A function that specifies how the results should be rendered in the dropdown menu. This function should accepts a single Predictions object as input and return a string. Any HTML in the returned string will be rendered.options.getItemValue
Function? A function that specifies how the selected result should be rendered in the search bar. This function should accept a single Place Detail object as input and return a string. HTML tags in the output string will not be rendered. Defaults to(item) => item.formatted_address
.
var geocoder = new GoongGeocoder({ accessToken: goongjs.accessToken });
map.addControl(geocoder);
Returns GoongGeocoder this
Add the geocoder to a container. The container can be either a goongjs.Map
or a reference to an HTML class
or id
.
If the container is a goongjs.Map
, this function will behave identically to Map.addControl(geocoder)
.
If the container is an HTML id
or class
, the geocoder will be appended to that element.
This function will throw an error if the container is not either a map or a class
/id
reference.
It will also throw an error if the referenced HTML element cannot be found in the document.body
.
For example, if the HTML body contains the element <div id='geocoder-container'></div>
, the following script will append the geocoder to #geocoder-container
:
var geocoder = new GoongGeocoder({ accessToken: goongjs.accessToken });
geocoder.addTo('#geocoder-container');
container
(String | goongjs.Map) A reference to the container to which to add the geocoder
Clear and then focus the input.
ev
Event? the event that triggered the clear, if available
Set & query the input
searchInput
string location name or other search input
Returns GoongGeocoder this
Set input
searchInput
string location name or other search input
Returns GoongGeocoder this
Get input
Returns any current input
Set proximity
proximity
Object The newoptions.proximity
value. This is a geographical point given as an object withlatitude
andlongitude
properties.
Returns GoongGeocoder this
Get proximity
Returns Object The geocoder proximity
Set the render function used in the results dropdown
fn
Function The function to use as a render function. This function accepts a single Predictions object as input and returns a string.
Returns GoongGeocoder this
Get the function used to render the results dropdown
Returns Function the render function
Get the zoom level the map will move to
Returns Number the map zoom
Set the zoom level
zoom
Number The zoom level that the map should animate to
Returns GoongGeocoder this
Get the parameters used to fly to the selected response, if any
Returns (Boolean | Object) The flyTo
option
Set the flyTo options
flyTo
(Boolean | Object) If false, animating the map to a selected result is disabled. If true, animating the map will use the default animation parameters
Get the value of the placeholder string
Returns String The input element's placeholder value
Set the value of the input element's placeholder
placeholder
String the text to use as the input element's placeholder
Returns GoongGeocoder this
Get the minimum number of characters typed to trigger results used in the plugin
Returns Number The minimum length in characters before a search is triggered
Set the minimum number of characters typed to trigger results used by the plugin
minLength
Number the minimum length in characters
Returns GoongGeocoder this
Get the limit value for the number of results to display used by the plugin
Returns Number The limit value for the number of results to display used by the plugin
Set the limit value for the number of results to display used by the plugin
limit
Number the number of search results to return
Returns GoongGeocoder
Get the radius value for the number of results to display used by the plugin
Returns Number The limit value for the number of results to display used by the plugin
Set the limit value for the number of results to display used by the plugin
radius
Number the number of search results to return
Returns GoongGeocoder
Set the geocoding endpoint used by the plugin.
origin
Function A function which accepts an HTTPS URL to specify the endpoint to query results from.
Returns GoongGeocoder this
Get the geocoding endpoint the plugin is currently set to
Returns Function the endpoint URL
Subscribe to events that happen within the plugin.
type
String name of event. Available events and the data passed into their respective event objects are:- clearEmitted when the input is cleared
- loading
{ query } Emitted when the geocoder is looking up a query
- results
{ results } Fired when the geocoder returns a response
- result
{ result } Fired when input is set
- error
{ error } Error as string
- loading
fn
Function function that's called when the event is emitted.
Returns GoongGeocoder this;
Remove an event
Returns GoongGeocoder this