When I started an IT company back in 2013, we used to take a parcel of money to integrate Google map into the android app as it was a challenge at that time. But currently, integrating Google map or any other map into the mobile app is the cake-walk, thanks to API and other app development technologies. Here, we also need to appreciate taxi apps, on-demand service apps, and e-scooter apps which have generated demand for map feature into apps. These apps rely highly on the map. In fact, they have crafted business models for their taxi and e-scooter business based on the map. For instance, Uber charges riders based on the distance they ride in the Uber cab.
So, if you are new in this most challenging industry and want to develop Uber-like taxi app, e-scooter app, on-demand service app or any other app in which map is the fundamental feature, you can follow the following steps. Here, I have documented the step-by-step guide to integrate Google map via Google Map API into the android app.
However, before we go ahead, there are some pre-requirements which you have to satisfy.
- Download and install Android Studio.
- Install the Google Play services SDK and add it to Android Studio.
- Buy the Google Map API service if you are using map service for commercial uses.
- Create a Google Maps project in Android Studio.
- Wrap your mind around the basic functionality of Google Map, runtime permissions, and ways to create, build, and run apps in the Android Studio.
So, now when you know about the pre-requirements, let’s move ahead and discuss the first step which is most vital.
Generating Google Map API key
This is the vitally important step because, without the API key, you cannot establish a connection between the Google Map server and your app. You can generate it via so many ways. But here I am showing you the most efficient and the fastest way.
- When you are creating a project in the Android Studio, make sure you select Google Map Activity from the ‘Add an Activity to Mobile’ dialog box.
- As soon as you select it, Android Studio opens two files. These are google.maps. api.xml and MapsActivity.java. Here, google.maps.api.xml file contains all instructions to acquire the Google Map API key.
- As you can see in the following picture, this XML file has a link and necessary credentials. Open that link in one of the browsers and supply all asked information. Once you fill all the information, it generates the API key for you.
- In the last step, copy that API key, come back to an XML file and paste it into <String> element. So, now your application is connected to Google Map service. You can now go ahead and write code to add a map into your app.
Adding map types
Google Map offers you the various types of maps which you can integrate into your app according to your users’ preference. For instance, if you are using the map for the navigation feature, it is helpful for users to have a detailed Google map with the name of every street and monument. Or suppose you are using Google Map service for taxi app, then it is helpful for you to have such a Google map which calculates the distance because you are basically charging users based on the distance.
However, in this tutorial, we will learn how you can add a map with options menu from which users can change the map type.
- Create the new XML file. For that, you need t
- Do right-click on res directory and then click on New > Resource file.
- It opens the dialog box. Here, name the file and click Ok.
- Now, hopefully, you are on the terminal. On the terminal, the code which you have currently, replace it with the following code. As you can see, we have defined a normal map, hybrid map, a satellite map and terrain map. Since these are the by default Google Map librarians, you don’t need to write more codes.
But, we haven’t added the options menu yet. To add this, follow the below steps.
Adding options menu
- The first step is all about overriding the onCreateOptionsMenu() method in MapsActivity and inflating the file you have created in the last step. To do so, use the following code.
- To change the map type, there is only one option – using a very popular method setMapType() on the GoogleMap object.
- We are almost done. Use the following code to make map actionable – when the user selects different map type than the default, the map gets updated and shows the selected map type.
And there you go. You just have added a map into the app which has the options to change the map type.
In the next step, we will learn how you can move the default map location.
(Just a fun fact you may need to know – the default map location is in Sydney, Australia where Google Map was created.)
- In a first step, you need to create a method named setMapLongClick() in the MapsActivity, like following.
Private void setMapLongclick (final GoogleMap map)
Here, as you can see, setMapLongclick() method takes the final GoogleMap map as the argument and returns void:.
- Now the following code is for placing a marker at where the user carries out long press on the map.
- In the last step, it is essensial to call the addMarker() method inside onMapLongclick().
Here, if you can see, we have just passed in a new Markeroptions object with the position, latLng.
You are done. Now, if you touch and hold on the map, a marker pops up there.
Customizing the map
With Google’s many useful methods, you can customize the map according to your need. Following is the list, containing all popular methods for the map customization.
|addPolygon||It adds a polygon to the map.|
|addCircle||Like polygon, it adds a circle to the map.|
|addTileOverlay||This method is useful to add tile overlay to the map.|
|animateCamera||It brings the animation in the map.|
|getMyLocation||It returns the current location.|
|setTrafficEnabled||This method turn on or off the traffic layer.|
About the Author
Vishal Virani is a Founder and CEO of Coruscate Solutions, a leading taxi app development company. He enjoys writing about the vital role of mobile apps for different industries, custom web development, and the latest technology trends.