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.
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 as
We can ignore the need for an API key while we develop our application, but API key is required for production. Is better to add the API.
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 three more page.
Remove the default home page and replace rootPage value from Home Page to SearchMuseumPage in the app.components.ts
In app.module.ts file we also need to add the reference in app.modules for our three new page and we also have to register the provider for Geolocation plugin.
Creating Museum Model
Inside src 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: 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 searchMuseum.ts modify the following code
Add the following css code in searchMuseum.scss
Step 6: Adding Mulitple marker on Google Map
We have created 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 searchMuseum 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.html
Modify the following code in all-museum.ts
Add the following css code in all-museum.scss
Step 6: Displaying individual map for each museum with museum information
In searchMuseum.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.html
Modify the following code in museum-detail.ts
Add the following css code in museum-detail.scss