In most of the apps, maps are one of the most useful tools for users when included in an app. The Ionic allows us to integrate Google map in our application. We can achieve integrating Google map in Ionic in two-way
- Google Map JS library
- Ionic native SDK map
In this example, we will demonstrate how to use Google Map JS library. We will cover setting up the Google Maps API through the Google Developer Console, displaying a map with multiple markers in your applications, displaying the museum’s location. We are creating an application called museumGoogleMap to demonstrate
What are we learning?
- Displaying individual map for each museum.
- Displaying multiple markers on single Google map.
- Search box to search museum by state.
Step #1: Setup the project
Step 2: Setting up Google Map API in Google Developer Console
In order to use the Google Maps API, you must register your application on the Google Developer Console and enable the API. To do this, start by going to the Google Developer Console for Google JS API. If you already have a project created, you can skip the next section. If not, you can follow along and create a new project for your maps application and then you have to create credentials in Google developer console.
On clicking on CREATE AND ENABLE API, you will get API to use Google map in our project and copy the API and the past in our Ionic project src/theme/index.html at end of last line in header tag as
Step 3: Installing Geolocation plugin
Now we will add the Geolocation plugin, run the following command
Step 4: Let’s build the apps, following all the steps as
We have completed the external configuration, now time to write code for our museum Ionic Apps. We will add two more page.
In app.module.ts file we need to register the provider for Geolocation plugin.
Creating Museum Model
Inside app folder create a new folder called models and add the new file for museum model as a src/models/museum.ts. Add the following code
Step 5: Create services to shared data between pages.
Create a folder called service in app folder, as ionic 4 we are sharing data through services. Generate service to share museum data between pages.
>> ionic generate service museumData
Run above command in app/service folder and add following file in app/service
Step 6: Adding museum list and search list page
We have to add the list of the museum in musuem.json file. In src/assets/data add a new file called museum.json file. Add the following museum lists.
In home page we will read a JSON file which contains all the museum and its details. We will use fetch API to retrieve the JSON file content and loads the JSON to a local variable. We will add search box in our apps to search museum by state name or location name. Modify the following code in home.page.html
In home.page.ts modify the following code, as we need to create service to set and get museum data, so that we can shared data between pages.
Add the following css code in home.page.scss
Step 6: Adding Mulitple marker on Google Map
We have three-page in this apps, one to display the list of the museum with search methods. This page all-museum is to the display multiple markers on same Google map. In home page we have a button at the right top most “ALL MUSEUM” on clicking on this button will navigate us to the all-museum page to display all museum in Google map. Modify the following code all-museum.page.html
Modify the following code in all-museum.page.ts
Add the following css code inall-museum.page.scss
Step 6: Displaying individual map for each museum with museum information
In museum-detail.page.html, we have a list of all the museum and on clicking on each museum we will display Google map for each museum with museum detail information like name of museum and state where it is located. Modify the museum-detail.page.html
Modify the following code in museum-detail.page.ts
Add the following css code in museum-detail.scss