Numerous multiple times, freshers in any innovation request genuine Venture models. To those lovers, my idea will be, pick any situation you can imagine, and it tends to be a genuine undertaking situation. Interest and Investigation is the way to learning. At the point when we are interested like a youngster and begin getting clarification on some pressing issues, we sort out fascinating stuffs. As of late, I was looking for certain cafés and their particular courses on Google Guide in some Food Conveyance Android Portable Application. While utilizing the application I figured how it would look on the off chance that we coordinate the Integration of Google Maps JavaScript API with SAPUI5 App and make it a utility device for tracking down a spot, computing distance between two spots, custom marker offices, etc. One of my companions has a mark inscriptions which says “Believing isn’t sufficient, we really want to do”.
I attempted to execute my considerations and ultimately, I was effective in making a good application. In this article, I will exhibit every one of the means in subtleties to accomplish the usefulness.
To coordinate Integration of Google Maps JavaScript API with SAPUI5 App, we really want Google Guide Programming interface. Google has given various APIs viz Google Guide Android Programming interface, Google Guides for iOS, Google Guides for Road, Google Guides Course Programming interface and some more. For our application, we will utilize Google Guides JavaScript Programming interface. The motivation to pick Guides JavaScript Programming interface is basic, it permits us to alter the guides with our own substance and symbolism for show on website pages and cell phones.
Glimpse of the Google Map we integrated (Integration of Google Maps JavaScript API with SAPUI5 App)
To utilize the Google Guides Programming interface, we really want a designer key. Prior to figuring out how to incorporate Google Guides Programming interface with SAPUI5, we want to figure out how to make a designer key?
A. Steps for Creating Google Maps Developer Key
Step 1 : Go to the Google Developers Console
Step 2 : Create a New Project.
Step 3 : Select created Project from list of Projects and Select Dashboard Tab.
Step 4 : Click on API Explore and enable APIs inside Getting Started Tile/Block in same page.
Step 5 : On next page click on Enable APIs and Services button .
Step 6 : After clicking on the button it will navigate to API Library Page. Here select Maps JavaScript API.
Step 7 : On next page click on Enable button, below Maps JavaScript API. Now API will be enabled and we need to create credentials for the same.
Step 8 : Select Credentials tab and click on Hyper Link i.e. Credentials in APIs & Services.
Step 9 : On next page click on CREATE CREDENTIALS button.
Step 10 : Select API key and OAuth Client ID to create the both one by one under CREATE CREDENTIALS button.
Steps 11 : In Left Pane of the console/page under Credential, you can see your project’s API Keys, oAuth Client ID, and Service Accounts details.
Trust you found out about how to make a Google Guides Programming interface Engineer Key and you will actually want to produce the designer key.
Presently how about we move to joining some portion of Google Guides JavaScript Programming interface with SAPUI5 Application.
B. Steps to Integrate Google Maps JavaScript API with SAPUI5
Step 1 : Create an SAPUI5 Application.
Step 2 : Load the Maps JavaScript API.
To stack the Guides JavaScript Programming interface, we really want to utilize a content label which is displayed in underneath model:
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).
Reclassify onAfterRendering snare strategy for SAPUI5 and compose the beneath code for making Guide Item and setting the Guide Choices/Required Boundaries.
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 Technique for showing Spring up screen and catching/saving the information for the specific made Marker according to the prerequisite. Here the technique I have made is named as fnOnClickPlace which is featured and brought in above screen capture. Source code for this technique is as beneath:
Piece for handling the Caught/Saved information as JSON and utilizing according to prerequisite.
Step 6 : Google Map’s Search Functionality (Finding/Searching Particular Place)
Here client can find/search any spot across the globe with the assistance of Google’s Strong Google Guides JavaScript Programming interface. The following is the screen captures of the rationale used to accomplish the result.
For testing the carried out Search usefulness of Google Guide, I will look through the spot as ‘Parliament of Delhi’. Subsequent to tapping on Search button, it’s showing the right outcome for example Parliament of India.
Step 7 : Calculating Distance between two places/points
We can really look at the distance between two spots/focuses with the assistance of Google Guides JavaScript Programming interface without any problem. Source Code is as underneath:
For testing the Distance Computation usefulness of our executed SAPUI5 Application, I will track down the distance among Silkboard and Roopena Agrahara. The determined distance between both the focuses is totally right. You might approve it utilizing different sources.
We get it, this is a high level theme and you will have not many questions. If it’s not too much trouble, go ahead and put your inquiries. We will attempt are ideal to answer to give further explanation. Likewise, kindly remark your ideas, criticism for me which will assist me with introducing better instructional exercises in future.
YOU MAY BE INTERESTED IN
Consuming APIs in SAP Applications
Building APIs with SAP Tools and Technologies
A Deep Dive into SAP API Management
Shaping Tomorrow’s Business Landscape: The Future of the ERP Industry
WhatsApp us