A React autosuggest for the Google Maps Places API.

Overview

React Geosuggest Build Status

A React autosuggest for the Google Maps Places API. You can also define your own suggests as defaults. Works with Preact, too.

Demo

Live demo: ubilabs.github.io/react-geosuggest

Installation

As this component uses the Google Maps Places API to get suggests, you must include the Google Maps Places API in the <head> of your HTML:

<!DOCTYPE html>
  <html>
  <head><script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script>
  </head>
  <body></body>
</html>

Visit the Google Developer Console to generate your API key. The API's that you have to enable in your Google API Manager Dashboard are Google Maps Geocoding API, Google Places API Web Service and Google Maps Javascript API.

The easiest way to use geosuggest is to install it from NPM and include it in your own React build process (using Webpack, Parcel, etc).

You can also use the standalone build by including dist/react-geosuggest.js in your page. If you use this, make sure you have already included React, and it is available as a global variable.

npm install react-geosuggest --save

Usage

The Geosuggest works out of the box by just including it. However, you can customize the behaviour with the properties noted below.

ES6:

import Geosuggest from 'react-geosuggest';

<Geosuggest />

ES5:

var Geosuggest = require('react-geosuggest').default;

<Geosuggest />

Properties

placeholder

Type: String Default: Search places

The input field will get this placeholder text.

initialValue

Type: String Default: ''

An initial value for the input, when you want to prefill the suggest.

id

Type: String Default: ''

Define an ID for the geosuggest. Needed when there are multiple instances on a page.

className

Type: String Default: ''

Add an additional class to the geosuggest container.

style

Type: Object Default: { 'input': {}, 'suggests': {}, 'suggestItem': {} }

Add an additional style to Geosuggest. This would support overriding/adding styles to the input suggestList and suggestItem.

inputClassName

Type: String Default: ''

Add an additional class to the input.

disabled

Type: Boolean Default: false

Defines whether the input is disabled.

location

Type: google.maps.LatLng Default: null

To get localized suggestions, define a location to bias the suggests.

radius

Type: Number Default: 0

The radius in meters defines the area around the location to use for biasing the suggests. It must be accompanied by a location parameter.

bounds

Type: LatLngBounds Default: null

The bounds to use for biasing the suggests. If this is set, location and radius are ignored.

country

Type: String or Array Default: null

Restricts predictions to the specified country (ISO 3166-1 Alpha-2 country code, case insensitive). E.g., us, br, au. You can provide a single one, or an array of up to 5 country code strings.

types

Type: Array Default: null

The types of predictions to be returned. Four types are supported: establishment for businesses, geocode for addresses, (regions) for administrative regions and (cities) for localities. If nothing is specified, all types are returned. Consult the Google Docs for up to date types.

fixtures

Type: Array Default: []

An array with fixtures (defaults). Each fixture has to be an object with a label key in it. Optionally provide a location, but the Geosuggest will geocode the label if no location is provided.

You can also add a className key to a fixture. This class will be applied to the fixture item.

maxFixtures

Type: Number Default: 10

Maximum number of fixtures to render.

placeDetailFields

Type: Array Default: null

By default Google returns all fields when getting place details which can impact billing. You can optionally pass an array of fields to include in place results to limit what is returned and potentially reduce billing impact. geometry will always be added as we depend on the location for the suggest selection.

googleMaps

Type: Object Default: google.maps

In case you want to provide your own Google Maps object, pass it in as googleMaps. The default is the global google maps object.

ignoreTab

Type: Boolean Default: false

When the tab key is pressed, the onSelect handler is invoked. Set to true to not invoke onSelect on tab press.

ignoreEnter

Type: Boolean Default: false

When the enter key is pressed, the onSelect handler is invoked. Set to true to not invoke onSelect on enter press.

queryDelay

Type: Number Default: 250

Sets the delay in milliseconds after typing before a request will be sent to find suggestions. Specify 0 if you wish to fetch suggestions after every keystroke.

minLength

Type: Number Default: 1

Sets a minimum length of characters before a request will be sent to find suggestions.

highlightMatch

Type: Boolean Default: true

Highlights matched text.

onFocus

Type: Function Default: function() {}

Gets triggered when the input field receives focus.

onBlur

Type: Function Default: function(value) {}

Gets triggered when input field loses focus.

onChange

Type: Function Default: function(value) {}

Gets triggered when input field changes the value.

onKeyDown

Type: Function Default: function(event) {}

Gets triggered when input field has a key pressed down. This event is triggered before onKeyPress.

onKeyPress

Type: Function Default: function(event) {}

Gets triggered when input field gets key press.

onSuggestSelect

Type: Function Default: function(suggest) {}

Gets triggered when a suggest got selected. Only parameter is an object with data of the selected suggest. This data is available:

  • label – Type String – The label name
  • placeId – Type String – If it is a preset, equals the label. Else it is the Google Maps placeID
  • location – Type Object – The location containing lat and lng
  • gmaps – Type Object – Optional! The complete response when there was a Google Maps geocode necessary (e.g. no location provided for presets). Check the Google Maps Reference for more information on it’s structure.

onUpdateSuggests

Type: Function Default: function(suggests, activeSuggest) {}

Gets triggered when the suggest list changes. Arguments include the suggest list and the current activeSuggest. Useful if you want to render the list of suggests outside of react-geosuggest.

onActivateSuggest

Type: Function Default: function(suggest) {}

Gets triggered when a suggest is activated in the list. Only parameter is an object with data of the selected suggest. This data is available:

  • label – Type String – The label name
  • placeId – Type String – If it is a preset, equals the label. Else it is the Google Maps placeID

onSuggestNoResults

Type: Function Default: function(userInput) {}

Gets triggered when there are no suggest results found

getSuggestLabel

Type: Function Default: function(suggest) { return suggest.description; }

Used to generate a custom label for a suggest. Only parameter is a suggest (google.maps.places.AutocompletePrediction). Check the Google Maps Reference for more information on it’s structure.

renderSuggestItem

Type: Function Default: null

Used to customize the inner html of SuggestItem and allows for controlling what properties of the suggest object you want to render. Also a convenient way to add additional styling to different rendered elements within SuggestItem. The function is passed both the suggestion and the user input.

skipSuggest

Type: Function Default: function(suggest) {}

If the function returns true then the suggest will not be included in the displayed results. Only parameter is an object with data of the selected suggest. (See above)

autoActivateFirstSuggest

Type: Boolean Default: false

Automatically activate the first suggestion as you type. If false, the exact term(s) in the input will be used when searching and may return a result not in the list of suggestions.

label

Type: String Default: null

If the label and a id prop (see "Others") were supplied, a <label> tag with the passed label text will be rendered. The <label> element's for attribute will correctly point to the id of the <input> element.

suggestsClassName

Type: String Default: ''

Add an additional class to suggest list.

suggestsHiddenClassName

Type: String Default: null

Additional className to toggle as the list of suggestions changes visibility.

suggestItemClassName

Type: String Default: ''

Add an additional class to suggest item.

suggestItemActiveClassName

Type: String, Default: null

Additional className to add when a suggestion item is active.

autoComplete

Type: String, Default: nope

Autocomplete input attribute.

inputType

Type: String, Default: text

The value for the type attribute on the html input element. Can be either text or search.

Others

All allowed attributes for input[type="text"] All DOM clipboard events. All DOM mouse events except for drag & drop. All data attributes.

Exposed component functions

These functions are accessible by setting "ref" on the component (see example below)

focus()

Call focus to focus on the element. The suggest list will be expanded with the current suggestions.

blur()

Call blur to blur (unfocus) the element. The suggest list will be closed.

update(value)

It is possible to update the value of the input contained within the GeoSuggest component by calling the update function with a new desired value of the type String.

clear()

It is also possible to clear the value of the input contained within the GeoSuggest component by calling the clear function.

selectSuggest()

Same effect as hitting enter (will geocode the text inside of the input).

Example

import React, {useRef} from 'react';
import ReactDOM from 'react-dom';
import Geosuggest from 'react-geosuggest';

const App = () => {
  const geosuggestEl = useRef(null);

  const fixtures = [
    {label: 'New York', location: {lat: 40.7033127, lng: -73.979681}},
    {label: 'Rio', location: {lat: -22.066452, lng: -42.9232368}},
    {label: 'Tokyo', location: {lat: 35.673343, lng: 139.710388}}
  ];

  /**
   * When a suggest got selected
   */
  const onSuggestSelect = (suggest) => console.log(suggest);

  return (
    <div>
      <Geosuggest
        ref={geosuggestEl}
        placeholder="Start typing!"
        initialValue="Hamburg"
        fixtures={fixtures}
        onSuggestSelect={onSuggestSelect}
        location={new google.maps.LatLng(53.558572, 9.9278215)}
        radius="20" />

      {* Buttons to trigger exposed component functions *}
      <button onClick={()=>geosuggestEl.current.focus()}>Focus</button>
      <button onClick={()=>geosuggestEl.current.update('New Zealand')}>Update</button>
      <button onClick={()=>geosuggestEl.current.clear()}>Clear</button>
      <button onClick={()=>geosuggestEl.current.selectSuggest()}>Search</button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('app'));

Styling

This component uses BEM for namespacing the CSS classes. So styling should be easy and without conflicts. See the geosuggest.css for an example styling.

Note:

The geosuggest__suggests--hidden class is added to hide the suggestion list. You should copy the style below into your CSS file.

.geosuggest__suggests--hidden {
  max-height: 0;
  overflow: hidden;
  border-width: 0;
}

The above class is added whenever the suggestion list needs to be hidden. This occurs when the user selects an item from the list or when the user triggers the blur event on the input.

Similarly, you need to have the class geosuggest__item--active similar to this:

.geosuggest__item--active {
  background: #267dc0;
  color: #fff;
}

to see what item is selected, f.ex. when using the arrow keys to navigate the suggestion list.

Contributing

Issues and pull requests are welcome! Please read the guidelines in CONTRIBUTING.md before starting to work on a PR.

License

See LICENSE.md

Issues
  • InitialValue based on existing LatLng

    InitialValue based on existing LatLng

    Hey,

    For edit mode, it could be useful if the initialValue can be restored automatically from an existing Lat/Lng.

    Thanks!

    enhancement help wanted 
    opened by asaf 24
  • Fixed erroneous check that hid the suggestions

    Fixed erroneous check that hid the suggestions

    Description

    Fixes the suggestions disappearing after a suggest is selected and the input is edited again without first blurring & focusing again.

    See https://github.com/ubilabs/react-geosuggest/issues/327 and https://github.com/ubilabs/react-geosuggest/issues/251

    Steps to reproduce the bug:

    1. Type an address, select any suggestion with the down arrow and press enter
    2. While the input is still focused, change its content (for example erase it with backspace and type another address)
    3. Bug: No suggestion appears

    Blurring the input and focusing it again would fix the disappearing suggestions.

    The bug is caused by onAfterInputChange() checking state.isSuggestsHidden before showing the suggestions.

    I strongly believe this is superfluous: There is no reason to ever not show the suggestions after the input is edited.

    Checklist

    • [x] All tests passing
    • [ ] Created tests which fail without the change (if possible)
    • [ ] Extended the README / documentation, if necessary
    • [x] Commits and PR follow conventions
    opened by joanrodriguez 21
  • fix(geosuggest): add Places API sessionToken support (issue #394)

    fix(geosuggest): add Places API sessionToken support (issue #394)

    Description

    Take a look at the issue #394.   As it is described in the documentation of Google, to add the session token support for AutocompleteService, it is just needed to add it to the request: image

    so this is shat I have done in this PR to enable session token support for this widget.

    Checklist

    • [x] All tests passing
    • [x] Created tests which fail without the change (if possible)
    • [x] Extended the README / documentation, if necessary
    • [x] Commits and PR follow conventions
    opened by KovDimaY 21
  • Powered by google?

    Powered by google?

    Do you think it would be a good idea to have a "Powered by Google" at the bottom of the dropdown?

    opened by Targun 19
  • Test infrastructure

    Test infrastructure

    I have setup the test infrastructure for the repo. Also added the basic test for component Geosuggest. Fixes #53

    opened by narendrashetty 18
  • index.d.ts file for typescript users?

    index.d.ts file for typescript users?

    Without a typedef file, typescript users have to either make their own, or do without type safety.

    An (incomplete) example would look something like:

    NOTE: The types that come from the Google Places API should probably just be living in that typedef. This is just my WIP typdef I'm using for my own project.

    /// <reference path="./react/react.d.ts" />
    
    declare module 'react-geosuggest' {
    
        export type GeocoderAddressComponent = {
            long_name: string;
            short_name: string;
            types: string[];
        }
    
        export type GeocoderResult = {
            address_components: GeocoderAddressComponent[];
            formatted_address: string;
            types: string[];
        }
    
        export type AddressAutocompleteMatch = {length: number, offset: number};
    
        export type AddressAutocompletePrediction = {
            description: string;
            matched_substrings: AddressAutocompleteMatch[];
            place_id: string,
            terms: {offset: number, value: string}[];
            types: string[]
        }
    
        export type Suggest = {
            label: string;
            location?: {isFixture: boolean, label: string, placeId: string};
        }
    
        export type GeocodedSuggest = Suggest & {gmaps: GeocoderResult};
    
        export type GeosuggestStyles = {
            input?: {[key: string]: any},
            suggests?: {[key: string]: string},
            suggestItem?: {[key: string]: string}
        };
    
        export interface GeosuggestProps {
            autocomplete?: string;
            country?: string;
            initialValue?: string;
            placeholder?:string;
            types?: string[];
            required?: boolean;
            inputClassName?: string;
            name?: string;
            style?: GeosuggestStyles;
            getSuggestLabel?(suggest: AddressAutocompletePrediction): any;
            onChange?(value: string): void;
            onSuggestSelect?(suggest: Suggest): void;
            skipSuggest?(suggest: AddressAutocompletePrediction): boolean;
        }
    
        export interface GeosuggestState {
            ignoreBlur?: boolean;
            isSuggestsHidden?: boolean;
            suggests?: Suggest[];
            userInput?: string;
        }
    
        class Geosuggest<I> extends __React.Component<GeosuggestProps & I, GeosuggestState> {
            selectSuggest: (suggest?: Suggest) => void;
            geocodeSuggest(suggest: any): void;
        }
    
        export default Geosuggest;
    }
    
    enhancement 
    opened by brmenchl 16
  • Unable to get property 'getPlacePredictions' of undefined or null reference

    Unable to get property 'getPlacePredictions' of undefined or null reference

    I am seeing this bug periodically with this component. We are using it in production.

    The google maps object must have been loaded up because I see that you throw an error in the componentDidMount function if it is not in the window.

    Is it possible that the this keyword points to a reference other than the Geosuggest object?

    The bug has occurred in the following browsers:

    • Edge 13
    • Chrome Mobile 34
    • Chrome 49
    • IE 10
    • Chrome Mobile 48

    Below is the stack trace:

    ~/react-geosuggest/module/Geosuggest.js in searchSuggests at line 233:0
    
            options.componentRestrictions = {
              country: this.props.country
            };
          }
          this.autocompleteService.getPlacePredictions(options, function (suggestsGoogle) {
            _this4.updateSuggests(suggestsGoogle || []); // can be null
            if (_this4.props.autoActivateFirstSuggest) {
              _this4.activateSuggest('next');
            }
    
    ~/react-geosuggest/module/Geosuggest.js in showSuggests at line 292:0
    
         */
      }, {
        key: 'showSuggests',
        value: function showSuggests() {
          this.searchSuggests();
          this.setState({ isSuggestsHidden: false });
        }
        /**
         * Hide the suggestions
    
    ~/react-geosuggest/module/Geosuggest.js in apply at line 152:0
    
      }, {
        key: 'onInputFocus',
        value: function onInputFocus() {
          this.props.onFocus();
          this.showSuggests();
        }
        /**
         * When the input gets blurred
         */
    
    opened by samdturner 16
  • google is not defined

    google is not defined

    Hallo,

    I'm trying to use the package but I get the error:

    google is not defined, it refers to the googleMaps default prop.

    It is maybe due to the fact that my code is running server and client side. I tried to force: var GoogleMaps = window.google.maps;

    but it is not working!

    Is there a way to solve this?

    opened by maiopirata 15
  • Required input attr

    Required input attr

    When I put required nothing happens

    <Geosuggest
      placeholder="Start location"
      ref="start_location"
      required
    />
    
    enhancement 
    opened by cezarsmpio 14
  • Wrappers functionality

    Wrappers functionality

    I needed to wrap input element and suggestions ul element in a wrapper, so I forked this repository and added these options:

    wrapInput (boolean) (and inputWrapperClassName (string)) wrapSuggestionList (boolean) (and suggestionListWrapperClassName (string))

    Also added it to README.md and example.

    You may want to merge it.

    opened by msalsas 13
  • fix(Geosuggest): fix input id and label for

    fix(Geosuggest): fix input id and label for

    Description

    Fixes

    https://github.com/ubilabs/react-geosuggest/issues/490

    Right now the label and id input do not work as its explained in the documentation and also how one would probably expect (the label "for" attribute would link to the input "id" :

    In the readme section :

    If the label and a id prop (see "Others") were supplied, a

    However what happens currently is this :

    Screenshot from 2021-10-21 12-04-10

    With this PR the label for and input id will match. a test was also included to insure this stays as expected in the future

    Screenshot from 2021-10-21 12-00-18

    Note : I do understand this could potentially break people's end to end tests which is actually how I found otu the issue myself trying to upgrade to the latest version, because this was already changed as previously the input id was the props.id directly (which is what I would expect)- This technically could be considered a breaking change, but a breaking change was already then made in https://github.com/ubilabs/react-geosuggest/pull/464 so I guess here is not really anything new.

    Checklist

    • [x] All tests passing
    • [x] Created tests which fail without the change (if possible)
    • [x] Extended the README / documentation, if necessary
    • [x] Commits and PR follow conventions
    opened by joaogarin 0
  • Label

    Label "for" and input "id" do not match

    Short description

    I was trying to add a label that points correctly to the id of the input.

    In this issue https://github.com/ubilabs/react-geosuggest/issues/450 there is a mention to this PR https://github.com/ubilabs/react-geosuggest/pull/464 which implements a id to the input, however the "for" attribute of the label points to the id prop directly and the input has a id of geosuggest__input--${id} https://github.com/ubilabs/react-geosuggest/pull/464/files#diff-c4990fe56ebfd0fcaf879109aa33c1a0002f567e3273ec7255e94934331cbbd6R169 which basically now has the label pointing to the div that wraps the entire autocomplete instead of pointing to the input itself.

    Expected results

    I expected that by providing an id and a label the label points to the input and not the div above.

    Actual results

    Instead of '...', what I saw was that '...' happened instead.

    Reproduction steps

    1. Provide a id and a label
    2. Check the label for and id of the input and they don't match

    Additional Information

    This poses an accessibility problem which basically right now its very hard to solve as we don't have access to the internals. the only way is to add the label ourselves.. Also the documentation is wrong here https://github.com/ubilabs/react-geosuggest#label since this is not what happens currently

    opened by joaogarin 0
  • fix(Geosuggest): fix accessibility

    fix(Geosuggest): fix accessibility

    Description

    This PR fixes an accessibility with the current solution

    • listbox field does not have a proper label

    Screenshot from 2021-10-18 12-41-19

    Checklist

    • [x] All tests passing
    • [x] Created tests which fail without the change (if possible)
    • [x] Extended the README / documentation, if necessary (N/A)
    • [x] Commits and PR follow conventions

    Fixes :

    • https://github.com/ubilabs/react-geosuggest/issues/478
    opened by joaogarin 1
  • fix(input): fix autoComplete attribute default to off

    fix(input): fix autoComplete attribute default to off

    Description

    • Autocomplete must be used correctly
    • Accessibility fix for the correct value passed to autocomplete
    • changed value from nope to off

    Checklist

    • [ X] All tests passing
    • [X ] Created tests which fail without the change (if possible)
    • [ X] Extended the README / documentation, if necessary
    • [ X] Commits and PR follow conventions
    opened by Borrisson 2
  • fix(geocoder): Propogate geocoder error to consumer

    fix(geocoder): Propogate geocoder error to consumer

    Description

    • Adds a new prop to propagate errors from the Geocoder.geocode API to the consumer application
    • Use the new @types/google.maps library for google maps types (The old one was deprecated)
    • Adds minor modification to the types to incorporate the newer types changes

    closes #486

    Checklist

    • [x] All tests passing
    • [ ] Created tests which fail without the change (if possible)
    • [x] Extended the README / documentation, if necessary
    • [x] Commits and PR follow conventions
    opened by prateek3255 1
  • Handle the errors returned by the geocoder API

    Handle the errors returned by the geocoder API

    Short description

    The Geocoder.geocode method returns a promise, which is currently unhandled by the library, which results in unhandled errors.

    Expected results

    The geocoder errors should be appropriately propagated to the consumer via a prop.

    Actual results

    The library consumer is unaware of the error happening

    Reproduction steps

    Right now for some reason, the geocoder API errors out when the user enters a random text and presses enter, this error is also not propagated to the library consumer.

    1. Enter any random text in the geo suggest input
    2. Press enter
    3. View the unhandled error in the console

    Additional Information

    Image 2021-06-12 at 9 53 19 PM

    opened by prateek3255 0
  • Type is invalid - expected a string or a class/function (for composite components) but got: undefined. Check the render method of `Input`.

    Type is invalid - expected a string or a class/function (for composite components) but got: undefined. Check the render method of `Input`.

    Hello. Application was running for a while(few months) and suddenly stopped working with error: Type is invalid - expected a string or a class/function (for composite components) but got: undefined. Check the render method of Input.

    So whenever Geosuggest component should be rendered we get that error. It is imported like this import Geosuggest from 'react-geosuggest'; I've also tried using const Geosuggest = require('react-geosuggest').default; but no luck with that either

    This is entire log:

     warning.js?8a56:33 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Input`.
        in Input (created by default_1)
        in div (created by default_1)
        in div (created by default_1)
        in default_1 (created by GoogleMapsLoader)
        in div (created by GoogleMapsLoader)
        in GoogleMapsLoader (created by HomeAddressSearch)
        in div (created by HomeAddressSearch)
        in HomeAddressSearch (created by Connect(HomeAddressSearch))
        in Connect(HomeAddressSearch) (created by InjectIntl(Connect(HomeAddressSearch)))
        in InjectIntl(Connect(HomeAddressSearch)) (created by HomeDelivery)
        in div (created by HomeDelivery)
        in div (created by HomeDelivery)
        in div (created by HomeDelivery)
        in HomeDelivery (created by Connect(HomeDelivery))
        in Connect(HomeDelivery) (created by InjectIntl(Connect(HomeDelivery)))
        in InjectIntl(Connect(HomeDelivery)) (created by Route)
        in Route (created by withRouter(InjectIntl(Connect(HomeDelivery))))
        in withRouter(InjectIntl(Connect(HomeDelivery))) (created by Home)
        in div (created by Home)
        in div (created by Home)
        in Home (created by Connect(Home))
        in Connect(Home) (created by InjectIntl(Connect(Home)))
        in InjectIntl(Connect(Home)) (created by Route)
        in div (created by Route)
        in Route (created by DefaultLayout)
        in DefaultLayout (created by App)
        in div (created by App)
        in Router (created by HashRouter)
        in HashRouter (created by App)
        in Provider (created by App)
        in IntlProvider (created by App)
        in App (created by Connect(App))
        in Connect(App) 
    
    
    opened by aleksandar-crs 7
  • Selected suggestion didn't apply properly, when searching in Argentina region

    Selected suggestion didn't apply properly, when searching in Argentina region

    Short description

    I was trying to search Avenida Juan Bautista Alberdi 14 address, but after clicking on the suggestion, the wrong data applied

    Expected results

    I expected that by searching 'Avenida Juan Bautista Alberdi 14' and selecting the 'Avenida Juan Bautista Alberdi 14, Buenos Aires, Argentina' suggestion result, then the same data would be applied.

    Actual results

    Instead of 'Avenida Juan Bautista Alberdi 14, Buenos Aires, Argentina', what I saw was that 'Av. Juan Bautista Alberdi, Buenos Aires, Argentina' data applied instead.

    Reproduction steps

    1. Go to https://ubilabs.github.io/react-geosuggest/
    2. Input value Avenida Juan Bautista Alberdi 14
    3. Click on the first suggestion
    4. Check the result in the console log
    5. Av. Juan Bautista Alberdi, Buenos Aires, Argentina recieved
    6. Click on input again
    7. Click on the same first suggestion
    8. Check the result in the console log
    9. Avenida Juan Bautista Alberdi 14, Buenos Aires, Argentinarecieved

    Additional Information

    https://user-images.githubusercontent.com/36222927/110627919-91ca1080-81b3-11eb-9c97-e7696ae32c85.mp4

    opened by olegmhlp 1
  • ul role=listbox should define an aria-label or aria-labelledby

    ul role=listbox should define an aria-label or aria-labelledby

    Short description

    I couldn't define aria-label / aria-labelledby on the item with role=listbox.

    For an example of listbox behavior I'm following this example.

    As an extra I found defining an accessible name is required for role=listbox aria-docs.

    Expected results

    We should be able to define props for the element with role=listbox.

    Impacted code

    https://github.com/ubilabs/react-geosuggest/blob/master/src/suggest-list.tsx#L70-L74

    opened by fcabreraupgrade 2
  • Expose TypeScript type definitions

    Expose TypeScript type definitions

    Short description

    TypeScript definitions should be provided so there is no need to use @types. There is already work in #402, but no progress.

    enhancement 
    opened by ro-ka 0
React.js Google Maps integration component

react-google-maps React.js Google Maps integration component Introduction Installation Usage & Configuration Changelog The changelog is automatically

Tom Chen 4.5k Jan 14, 2022
A Google Maps component for React.js

React Gmaps A Google Maps component for React.js Features Lazy Google Maps loading Easy to use Installation $ npm install react-gmaps --save Demo http

Michele Bertoli 315 Dec 3, 2021
Companion code to the "How to Write a Google Maps React Component" Tutorial

Google Map React Component Tutorial A declarative Google Map React component using React, lazy-loading dependencies, current-location finder and a tes

Fullstack React 1.5k Jan 11, 2022
Simple loader to use google maps services into your react applications

react-google-maps-loader React Component to use google maps services into your react applications using a render prop. Getting started You can downloa

Cédric Delpoux 55 Oct 12, 2021
Project Travel Companion App - Build and Deploy an advanced Travel Companion Application using Google Maps

Travel Advisor Introduction Build and Deploy an advanced Travel Companion Applic

Ashish Choudhary 1 Jan 17, 2022
React component Maps API 2GIS

React component Maps API 2GIS

2GIS 21 Sep 19, 2021
Yandex Maps API bindings for React

Yandex.Maps JS API bindings for React

Sergey 304 Dec 22, 2021
react-maps - A map component for React

Maps for React A map component for React, the declarative UI library. Allow your React sites to use Google Maps easily. Example In the render-function

Matti Nelimarkka 45 Dec 10, 2021
React components for Leaflet maps

React Leaflet React components for Leaflet maps. Documentation Getting started API reference Changes See the CHANGELOG file. Contributing See the CONT

Paul Le Cam 4k Jan 12, 2022
A Mapbox GL react native module for creating custom maps

A Mapbox GL react native module for creating custom maps

React Native Mapbox 1.2k Jan 12, 2022
New markers on tap + history, using React Native Maps for study purposes.

Mobile challenge New markers on tap + history, using React Native Maps for study purposes. Participants | Rafael Ferreira Techs & Libs React Native St

Rafael Ferreira 0 Dec 16, 2021
🗺 A React component for interactive vector maps of the world and 100+ countries

react-vector-maps ??️ A React component for interactive vector maps of the world and 100+ countries Features Simple and easy to implement React compon

Alex Gabites 109 Dec 10, 2021
ReactJS Maps without external dependencies

Pigeon Maps - ReactJS maps without external dependencies Demo: https://pigeon-maps.js.org/ (using maps from OSM and Stamen) What is it? Are you tired

Marius Andra 3.2k Jan 19, 2022
The open-source fork of Mapbox GL JS: Interactive maps in the browser, powered by vector tiles and WebGL.

The open-source fork of Mapbox GL JS: Interactive maps in the browser, powered by vector tiles and WebGL.

MapLibre 2.7k Jan 13, 2022
Rocketsearch.io - A beautiful and clean search engine built using the Google API frame work

Rocketsearch.io A beautifull and clean psuedo search engine built using the Goog

Akshat Sabavat 1 Jan 18, 2022
Google map library for react that allows rendering components as markers :tada:

Google Map React · google-map-react is a component written over a small set of the Google Maps API. It allows you to render any React component on the

Google Map React 5.6k Jan 12, 2022
clustering example for google-map-react

google-map-clustering-example Clustering example for google-map-react Click here to view Kotatsu I was heavily inspired of kotatsu project. This proje

Ivan Starkov 199 Dec 22, 2021
Google map library for react that allows rendering components as markers :tada:

Google Map React · google-map-react is a component written over a small set of the Google Maps API. It allows you to render any React component on the

Google Map React 5.6k Jan 16, 2022
Google street view component for React.js

Simple React.js component for Google Street View

András Kovács 19 Aug 31, 2021