I have created an Angular 8 project and I used a wrapper for Google Places Autocomplete js library called ngx-google-places-autocomplete
The instructions are pretty straight forward and here is what I have so far in my project:
index.html
<script src="https://maps.googleapis.com/maps/api/js?key=<API_KEY>&libraries=places&language=en"></script>
app.module.ts
I have imported the library GooglePlaceModule as the following:
import { GooglePlaceModule } from "ngx-google-places-autocomplete";
@NgModule({
imports: [GooglePlaceModule, BrowserModule, FormsModule, ...],
....
})
app.component.html
<input
ngx-google-places-autocomplete
[options]='options'
placeholder="Enter a location"
autocomplete="off"
(onAddressChange)="handleAddressChange($event)"/>
app.component.ts
I have defined my options and the handleAddressChange() like the following
options: Options = {
bounds: undefined,
fields: ['address_component'],
strictBounds: false,
types: ['address'],
origin: undefined,
componentRestrictions: undefined
};
handleAddressChange(address: Address) {
console.log(address);
}
Yes, the autocomplete is working fine after I made sure I enabled Map Javascript API and Places API
However, the billing documentation wasn't clear where every key stroke was a an API request and that there is a way to get charged properly per user session (session token) so anything you do within your session does not count as an API request until handleAddressChange(address: Address) gets exectued.
My understanding, the documentation says that I need to inject a UUID (V4 recommended) into my script tag in my index.html like the following
<script src="https://maps.googleapis.com/maps/api/js?key=<API_KEY>&libraries=places&language=en&sessiontoken=<UUID>"></script>
I know I can use Google namespace to generate those UUIDs or sessionToken like the following:
var sessionToken = new google.maps.places.AutocompleteSessionToken();
However, I am not sure if there a proper way to inject the sessionToken into my <script> tag without violating XSS and I am not sure if this is the right way to implement a session tokens? I want to give the user one session token when the page loads so they can type/play with my search box they wanted with only one API request. I want to be in control of when the session token gets generated, injected, then destroyed in my app.
Those session tokens is used to REDUCE the amount of API requests so I don't get charged extra on my billing account.