Varad
In any field of technology, newcomers frequently want examples of actual projects. To those who are interested, I would advise them to choose whatever scenario they can imagine, and it may even be a real project situation. Learning is mostly dependent on curiosity and exploration. We discover fascinating things when we ask inquiries and have a childlike curiosity. I was recently looking over different Food Delivery Android Mobile Apps for restaurants and their corresponding routes on Google Maps. As I was using the app, I considered how it might appear if we combined the SAPUI5 app with the Google map to create a useful tool for location searching, measuring the distance between two locations, creating custom marker facilities, and other things.
I made an effort to put my ideas into practice, and ultimately I was able to produce a passable app. I’ll walk through each step in detail to accomplish the functionality in this article.
Google Map API is required in order to link Google Map with SAPUI5 applications. Google offers a wide range of APIs, including the Google Maps Direction API, Google Maps for iOS, Google Maps for Street, and Google Maps Android API. We plan to use the JavaScript API for Google Maps in our application. The basic reason we choose the Maps JavaScript API is because it lets us personalize the maps for online and mobile device display by adding our own text and images.
Glimpse of the Google Map we integrated.
We require a developer key in order to use the Google Maps API. We must learn how to generate a developer key before we can link the Google Maps API with SAPUI5.
A. How to Create a Developer Key for Google Maps
- Visit the Google Developers Console as the first step.
- Step 2: Establish a Novel Project.
- Step 3: Choose Dashboard Tab and Created Project from the list of Projects.
- Step 4: Within the Getting Started Tile/Block on the same page, click API Explore to enable APIs.
Step 5: Select the “Enable APIs and Services” button on the following page.
Step 6: The page for the API Library will open after you click the button. Choose the Maps JavaScript API option here.
Step 7: On the following screen, select the Enable option located beneath the Maps JavaScript API. The API will now be enabled, and we will need to generate credentials.
Step 8: Choose the Credentials tab and click on Credentials in APIs & Services, or Hyper Link.
Step 9: Select the CREATE CREDENTIALS button on the following page.
Step 10: Under the generate CREDENTIALS button, choose the OAuth Client ID and the API key to generate each separately.
Step 11: The details of your project’s service accounts, oAuth Client ID, and API keys are displayed in the Left Pane of the console/page under Credential.
I hope you now have a good understanding of the process and are able to generate the developer key for the Google Maps API.
Let’s now discuss the JavaScript API integration of the Google Maps with the SAPUI5 application.
B. How to Combine SAPUI5 with the JavaScript API for Google Maps
Make a SAPUI5 application as the first step.
Step 2: Open the JavaScript API for Maps.
We must utilize the script element, which is displayed in the sample below, in order to load the Maps JavaScript API:
Step 3 : Creating DOM Element for the Map.
Step 4 : Creating Map Object and Setting the Map Options (Default Place Coordinates i.e. Latitude and Longitude).
Redefine onAfterRendering hook method of SAPUI5 and write the below code for creating Map Object and setting the Map Options/Required Parameters.
Step 5 : Creating Custom Marker on clicking inside Map and saving the custom data based on requirement.
Pop-up screen code is as below:
Custom Method to show Pop-up screen and record/store the information for the specific marker that was built in accordance with the specifications. In the screenshot above, the method I built is called fnOnClickPlace and is highlighted. The following is the method’s source code:
Step 6 : Google Map’s Search Functionality (Finding/Searching Particular Place)
Here user can find/search any place across the globe with the help of Google’s Powerful Google Maps JavaScript API. Below is the screenshots of the logic used to achieve the output.
For testing the implemented Search functionality of Google Map, I am going to search the place as ‘Parliament of Delhi’. After clicking on Search button, it’s showing the correct result i.e. Parliament of India.
Step 7: Determine the Distance Between Two Points or Places
We can quickly determine the distance between two locations or points by using the Google Maps JavaScript API. The following is the source code:
I will determine the distance between Silkboard and Roopena Agrahara in order to test the Distance Calculation feature of our built SAPUI5 application. There is no mistake in the measured distance between the two places. You could check it using more resources.
We recognize that you may have a few questions because this is a complex subject. Do not hesitate to ask questions. We’ll do everything in our power to respond and offer more details. Please leave me a comment with any advice or criticism so that I can continue to provide better lectures in the future.
Read Our blog here:-
Learn how to update function modules in SAP ABAP easily
Landing Your Dream Job: The Ultimate Guide to SAP MM Consultant resume 3 years experience
