ultraxion/ionic-location-selector-example

Ionic plugin - A simple component let you select a location from google place

ionic-location-selector

Ionic plugin - A simple component let you select a location from google place

Installation

• Extract files from archive
• Copy files into your project's src/components folder (create this folder if needed)

Usage

• Add google maps api library in your index.html :

(Don't forget to add your api key)

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

• Add the LocationSelectorModule in your app.module.ts :

[...]
import { LocationSelectorModule } from '../components/location-selector/location-selector.module'; // <- add this line

@NgModule({
    declarations: [
        MyApp,
        MyPage
    ],
    imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        LocationSelectorModule // <- add this line
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp,
        MyPage
    ],
    providers: [
        StatusBar,
        SplashScreen,
        {provide: ErrorHandler, useClass: IonicErrorHandler}
    ]
})
export class AppModule {}

• Add the selector in your page :

<location-selector-input></location-selector-input>

Configuration

Global configuration

You can add global configuration using forRoot() method at the import:

• Params available :

  countries : string[] // list of countrie code availble for searching location

  inputPlaceholderText : string // the input placeholder

  inputClearButtonHidden : boolean // hide the clear button on the input

  modalCloseButtonText : string // text on the close button from the modal

  modalSearchText : string // text inside the search bar

  modalTitleText : string // title of the modal

  modalNoResultText : string // text shown when no results

usage example:

LocationSelectorModule.forRoot({
    countries: ['us','ca'],
    inputPlaceholderText: 'My location',
    inputClearButtonHidden: false,
    modalCloseButtonText: 'Close',
    modalSearchText: 'Search',
    modalTitleText: 'Select your location',
    modalNoResultText: 'No location found'
})

Attributes

You can also pass some attributes on each selector that override global configuration

• placeholder [ string ] default value : 'My location'
• showClearButton [ boolean ] default value : true
• countries [ string[] ] default value : []

Events

• locationSelected($event) On location selected, return the full google place object response

Example

<location-selector-input
        [countries]="['fr']"
        [showClearButton]="false"
        (locationSelected)="onLocationSelected($event)"
        placeholder="J'habite à">
</location-selector-input>