And again, nobody here will help 
Here are the html :
<ion-header [translucent]=“true”>
<ion-toolbar color="warning">
<ion-button (click)="loadMap()" shape="round" color="dark">
<ion-icon slot="start" name="locate"></ion-icon>
Lokasi Ku
</ion-button>
<ion-title slot="end">Google Map</ion-title>
</ion-toolbar>
<ion-content [fullscreen]=“true”>
<div class="map-wrapper">
<div id="map_center">
<img src="assets/image/location-marker.png" />
</div>
<div #map id="map"></div>
</div>
<ion-grid>
<ion-row>
<ion-col size="3">
<b>Lattitude</b>
</ion-col>
<ion-col>
{{latitude}}
</ion-col>
</ion-row>
<ion-row>
<ion-col size="3">
<b>Longitude</b>
</ion-col>
<ion-col>
{{longitude}}
</ion-col>
</ion-row>
<ion-row>
<ion-col size="3">
<b>Address</b>
</ion-col>
<ion-col>
{{address}}
</ion-col>
</ion-row>
</ion-grid>
<div class="spinner" *ngIf="loader"><ion-spinner> </ion-spinner></div>
<ion-list-header>
<ion-label>{{"Alamat Pengiriman" | translate}}</ion-label>
</ion-list-header>
<ion-item>
<ion-label position="stacked">{{"Alamat" | translate}}</ion-label>
<ion-input required type="text" name="street1"> {{address}} </ion-input>
</ion-item>
{{"Continue" | translate}}
and here is ts
import { Component, OnInit, ViewChild } from ‘@angular/core’;
import { NavController } from ‘@ionic/angular’;
import { ActivatedRoute, Router } from ‘@angular/router’;
import { ApiService } from ‘…/…/api.service’;
import { CheckoutData } from ‘…/…/data/checkout’;
import { Settings } from ‘./…/…/data/settings’;
import { InAppBrowser } from ‘@ionic-native/in-app-browser/ngx’;
import { Geolocation } from ‘@ionic-native/geolocation/ngx’;
import { NativeGeocoder, NativeGeocoderResult, NativeGeocoderOptions } from ‘@ionic-native/native-geocoder/ngx’;
import { ElementRef } from ‘@angular/core’;
declare var google;
@Component({
selector: ‘app-address’,
templateUrl: ‘./address.page.html’,
styleUrls: [’./address.page.scss’],
})
export class CheckoutAddressPage implements OnInit {
@ViewChild(‘map’, { static: false }) mapElement: ElementRef;
map: any;
address: string;
accuracy: number;
latitude: number;
longitude: number;
errorMessage: any;
loader: boolean = false;
countries: any;
geoencoderOptions: NativeGeocoderOptions = {
useLocale: true,
maxResults: 5
};
constructor(private geolocation: Geolocation,
private nativeGeocoder: NativeGeocoder, private iab: InAppBrowser, public api: ApiService, public checkoutData: CheckoutData, public router: Router, public navCtrl: NavController, public settings: Settings, public route: ActivatedRoute) {}
ngOnInit() {
this.getCheckoutForm();
//this.getCountries();
}
async getCheckoutForm() {
this.loader = true;
await this.api.postItem(‘get_checkout_form’).subscribe(res => {
this.checkoutData.form = res;
this.checkoutData.form.sameForShipping = true;
if(this.checkoutData.form.countries.length == 1) {
this.checkoutData.form.billing_country = this.checkoutData.form.countries[0].value;
this.checkoutData.form.shipping_country = this.checkoutData.form.countries[0].value;
}
this.checkoutData.billingStates = this.checkoutData.form.countries.find(item => item.value == this.checkoutData.form.billing_country);
this.checkoutData.shippingStates = this.checkoutData.form.countries.find(item => item.value == this.checkoutData.form.shipping_country);
this.loader = false;
}, err => {
console.log(err);
this.loader = false;
});
}
getCountries() {
this.api.getItem(‘settings/general/woocommerce_specific_allowed_countries’).subscribe(res => {
this.countries = res;
}, err => {
console.log(err);
});
}
getBillingRegion() {
this.checkoutData.billingStates = this.checkoutData.form.countries.find(item => item.value == this.checkoutData.form.billing_country);
this.checkoutData.form.billing_state = ‘’;
}
getShippingRegion() {
this.checkoutData.shippingStates = this.checkoutData.form.countries.find(item => item.value == this.checkoutData.form.shipping_country);
this.checkoutData.form.shipping_state = ‘’;
}
async updateOrderReview() {
await this.api.postItem(‘update_order_review’).subscribe(res => {
this.checkoutData.orderReview = res;
}, err => {
console.log(err);
});
}
continueCheckout() {
this.errorMessage = '';
if(this.validateForm()){
if(!this.checkoutData.form.ship_to_different_address)
this.assgnShippingAddress();
this.navCtrl.navigateForward('/tabs/cart/checkout');
}
}
validateForm(){
if(this.checkoutData.form.billing_first_name == '' || this.checkoutData.form.billing_first_name == undefined){
this.errorMessage = 'Billing first name is a required field';
return false;
}
if(this.checkoutData.form.billing_last_name == '' || this.checkoutData.form.billing_last_name == undefined){
this.errorMessage = 'Billing last name is a required field';
return false;
}
if(this.checkoutData.form.billing_phone == '' || this.checkoutData.form.billing_phone == undefined){
this.errorMessage = 'Billing phone is a required field';
return false;
}
if(this.checkoutData.form.billing_address_1 == '' || this.checkoutData.form.billing_address_1 == undefined){
this.errorMessage = 'Billing Street address is a required field';
return false;
}
if(this.checkoutData.form.billing_city == '' || this.checkoutData.form.billing_city == undefined){
this.errorMessage = 'Billing city is a required field';
return false;
}
if(this.checkoutData.form.billing_postcode == '' || this.checkoutData.form.billing_postcode == undefined){
this.errorMessage = 'Billing post code is a required field';
return false;
}
if(this.checkoutData.form.billing_country == '' || this.checkoutData.form.billing_country == undefined){
this.errorMessage = 'Billing country is a required field';
return false;
}
if(this.checkoutData.form.billing_state == '' || this.checkoutData.form.billing_state == undefined){
this.errorMessage = 'Billing state is a required field';
return false;
}
if(this.checkoutData.form.ship_to_different_address){
if(this.checkoutData.form.shipping_first_name == '' || this.checkoutData.form.shipping_first_name == undefined){
this.errorMessage = 'Shipping first name is a required field';
return false;
}
if(this.checkoutData.form.shipping_last_name == '' || this.checkoutData.form.shipping_last_name == undefined){
this.errorMessage = 'Shipping last name is a required field';
return false;
}
if(this.checkoutData.form.shipping_address_1 == '' || this.checkoutData.form.shipping_address_1 == undefined){
this.errorMessage = 'Shipping Street address is a required field';
return false;
}
if(this.checkoutData.form.shipping_city == '' || this.checkoutData.form.shipping_city == undefined){
this.errorMessage = 'Shipping city is a required field';
return false;
}
if(this.checkoutData.form.shipping_postcode == '' || this.checkoutData.form.shipping_postcode == undefined){
this.errorMessage = 'Shipping post code is a required field';
return false;
}
if(this.checkoutData.form.shipping_country == '' || this.checkoutData.form.shipping_country == undefined){
this.errorMessage = 'Shipping country is a required field';
return false;
}
if(this.checkoutData.form.shipping_state == '' || this.checkoutData.form.shipping_state == undefined){
this.errorMessage = 'Shipping state is a required field';
return false;
}
return true;
}
else return true;
}
assgnShippingAddress(){
this.checkoutData.form.shipping_first_name = this.checkoutData.form.billing_first_name;
this.checkoutData.form.shipping_last_name = this.checkoutData.form.billing_last_name;
this.checkoutData.form.shipping_company = this.checkoutData.form.billing_company;
this.checkoutData.form.shipping_address_1 = this.checkoutData.form.billing_address_1;
this.checkoutData.form.shipping_address_2 = this.checkoutData.form.billing_address_2;
this.checkoutData.form.shipping_city = this.checkoutData.form.billing_city;
this.checkoutData.form.shipping_postcode = this.checkoutData.form.billing_postcode;
this.checkoutData.form.shipping_country = this.checkoutData.form.billing_country;
this.checkoutData.form.shipping_state = this.checkoutData.form.billing_state;
return true;
}
loadMap() {
this.geolocation.getCurrentPosition().then((resp) => {
this.latitude = resp.coords.latitude;
this.longitude = resp.coords.longitude;
let latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
let mapOptions = {
center: latLng,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
this.getAddressFromCoords(resp.coords.latitude, resp.coords.longitude);
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
this.map.addListener('dragend', () => {
this.latitude = this.map.center.lat();
this.longitude = this.map.center.lng();
this.getAddressFromCoords(this.map.center.lat(), this.map.center.lng())
});
}).catch((error) => {
console.log('Error getting location', error);
});
}
getAddressFromCoords(lattitude, longitude) {
console.log("getAddressFromCoords " + lattitude + " " + longitude);
let options: NativeGeocoderOptions = {
useLocale: true,
maxResults: 5
};
this.nativeGeocoder.reverseGeocode(lattitude, longitude, options)
.then((result: NativeGeocoderResult[]) => {
this.address = "";
let responseAddress = [];
for (let [key, value] of Object.entries(result[0])) {
if (value.length > 0)
responseAddress.push(value);
}
responseAddress.reverse();
for (let value of responseAddress) {
this.address += value + ", ";
}
this.address = this.address.slice(0, -2);
})
.catch((error: any) => {
this.address = "Address Not Available!";
});
}
//Get current coordinates of device
getGeolocation() {
this.geolocation.getCurrentPosition().then((resp) => {
this.latitude = resp.coords.latitude;
this.longitude = resp.coords.longitude;
this.accuracy = resp.coords.accuracy;
this.getGeoencoder(resp.coords.latitude, resp.coords.longitude);
}).catch((error) => {
alert('Error getting location' + JSON.stringify(error));
});
}
//geocoder method to fetch address from coordinates passed as arguments
getGeoencoder(latitude, longitude) {
this.nativeGeocoder.reverseGeocode(latitude, longitude, this.geoencoderOptions)
.then((result: NativeGeocoderResult) => {
this.address = this.generateAddress(result[0]);
})
.catch((error: any) => {
alert(‘Error getting location’ + JSON.stringify(error));
});
}
//Return Comma saperated address
generateAddress(addressObj) {
let obj = ;
let address = “”;
for (let key in addressObj) {
obj.push(addressObj[key]);
}
obj.reverse();
for (let val in obj) {
if (obj[val].length)
address += obj[val] + ', ';
}
return address.slice(0, -2);
}
}
Dont forget put this code on app.module.ts:
// app.module.ts
import { NgModule } from ‘@angular/core’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { RouteReuseStrategy } from ‘@angular/router’;
import { IonicModule, IonicRouteStrategy } from ‘@ionic/angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;
import { StatusBar } from ‘@ionic-native/status-bar/ngx’;
import { AppComponent } from ‘./app.component’;
import { AppRoutingModule } from ‘./app-routing.module’;
import { Geolocation } from ‘@ionic-native/geolocation/ngx’;
import { NativeGeocoder } from ‘@ionic-native/native-geocoder/ngx’;
@NgModule({
declarations: [AppComponent],
entryComponents: ,
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
Geolocation,
NativeGeocoder,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }
…
This code success to get latlong but not address yet. but its almost there.
Let me know if you can get it working. Thanks
talk talk talk
<foo><bar></bar></foo>
more chitchat
look, it’s a filename
andHereIsAFunctionInAnotherCodeBlock() {
}
To view your list of enabled APIs:
Go to the Google Cloud Platform Console.
Click the Select a project button, then select the same project you set up for the Maps JavaScript API and click Open.
From the list of APIs on the Dashboard, look for Places API.
If you see the API in the list, you’re all set. If the API is not listed, enable it:
At the top of the page, select ENABLE API to display the Library tab. Alternatively, from the left side menu, select Library.
Search for Places API, then select it from the results list.
Select ENABLE. When the process finishes, Places API appears in the list of APIs on the Dashboard.