Ionic 3 - Create a Nearby Restaurants App with Geolocation Plugin ,Google Maps and Places API Part 2 -- Words (542)

Ionic 2/3 Geolocation ,Google maps and Places API

On the previous part we have added a map to our Ionic app then used the Cordova Geolocation plugin and its Ionic native 3.x+ wrapper to get current user position .

This tutorial has two parts :

Ionic 3 - Create a Nearby Restaurants App with Geolocation Plugin ,Google Maps and Places API

Ionic 3 - Create a Nearby Restaurants App with Geolocation Plugin ,Google Maps and Places API Part 2

On this part we are going to continue building our nearby restaurants mobile app so lets get started

First of all ,you need to change the script tag for including Google Maps JavaScript SDK in src/index.html to enable the Places API

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

next open src/pages/home/home.scss and change to

page-home {
    .scroll {
        height: 100%
    }

    #map {
        width: 100%;
        height: 40%;
    }
} 

So the maps takes only 40% in height .

Open src/pages/home/home.html an change it to :

<ion-header>
<ion-navbar>
    <ion-title>
    Nearby Me Restaurants
    </ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>

<div #map id="map"></div> 

<div style="width : 100% ;height: 60%">
    <ion-list>
    <ion-item *ngFor="let place of places">
        <p></p>
    </ion-item>
    </ion-list>
</div>

</ion-content>

In src/pages/home/home.ts add a member variables of type Array to hold nearby places

declare var google;

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
options : GeolocationOptions;
currentPos : Geoposition;
places : Array<any> ; 

Then add a getRestaurants() method to get the list of nearby restaurants

getRestaurants(latLng)
{
    var service = new google.maps.places.PlacesService(this.map);
    let request = {
        location : latLng,
        radius : 8047 ,
        types: ["restaurant"]
    };
    return new Promise((resolve,reject)=>{
        service.nearbySearch(request,function(results,status){
            if(status === google.maps.places.PlacesServiceStatus.OK)
            {
                resolve(results);    
            }else
            {
                reject(status);
            }

        }); 
    });

}

This method returns a promise which resolves to the list of restaurants or if there is an error it will be reject with the status code .

We have wrapped service.nearbySearch() method ,which uses callbacks ,in a Promise to play nice with Angular change detection .

Also add a createMarker() method

createMarker(place)
{
    let marker = new google.maps.Marker({
    map: this.map,
    animation: google.maps.Animation.DROP,
    position: place.geometry.location
    });   
}   

This method creates a marker from a place .It's called for every place returned by PlacesService nearbySearch method .

Finally update the addMap() method to invoke the previous methods

addMap(lat,long){

    let latLng = new google.maps.LatLng(lat, long);

    let mapOptions = {
    center: latLng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }

    this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);

    this.getRestaurants(latLng).then((results : Array<any>)=>{
        this.places = results;
        for(let i = 0 ;i < results.length ; i++)
        {
            this.createMarker(results[i]);
        }
    },(status)=>console.log(status));

    this.addMarker();

}

The variable this.places holds the list of nearby locations or restaurants which are then displayed using ion-list on the view .

Conclusion


That is it you have now created a nearby app with Ionic 3 which gets the current user location using the Cordova Geolocation plugin and Ionic Native then uses the Google Places API to search for nearby restaurants and display them in a Google Map and as a list of names .


I'm a web developer and technical writer. Passionate about modern JavaScript technologies and currently trying to develop all kind of apps (Web, Mobile and Desktop) with JavaScript.