Follow Us on Twitter

Integrate Google Maps in a JET 2.0 hybrid mobile application

by Herman Brunnekreef on March 9, 2016 · 3 comments

Last week Oracle JET 2.0 is released. One important feature is hybrid mobile development. A while ago I created an Oracle JET application where Google Maps is integrated.
Now I want to show my current location in Google Maps on my Android Phone. For this I must use the GPS function of my phone.
So let’s start. First create a new JET hybrid mobile application.

img1

After successful creation, we must add the cordova plugin to get the GPS-location. At this location you can find more information about the different type of plugins.

img2

Now let’s create the JET application.

img3

This is a simple layout. The latitude and longitude elements are filled with the properties from the cordova plugin and the location of the maps, is the location of the latitude and longitude.

To use the cordova plugin for GPS, this is the function:

navigator.geolocation.getCurrentPosition(onSuccess, onError);

This is the implementation of the onSuccess function:

var onSuccess = function (position) {

 self.latitudeValue(position.coords.latitude);
 self.longitudeValue(position.coords.longitude);

 self.lat = position.coords.latitude;
 self.lon = position.coords.longitude;

 var element = document.getElementById('googleMap');
 var map;
 var myLatLng = {lat: self.lat, lng: self.lon};
 var mapProp = {
               center: myLatLng,
               zoom: 14,
               mapTypeId: google.maps.MapTypeId.ROADMAP
              };
 map = new google.maps.Map(element, mapProp);
 var marker = new google.maps.Marker({
          position: myLatLng,
          map: map
         });
};

Now you can run the application in Netbeans with Run Project. The application is started in the browser

img4

Now let’s build for android:

grunt build --platform=android

When the build has run successfully, I opened the application in Android Studio. Here I open the Manifest file and you can see the permissions for the GPS functionality.

img5

For this application I don’t use the emulator. When the build has run successfully also an .apk file is created. This is an Android installation package. I copied this file to my phone, and installed it.

img6

Integrate Google Maps in a JET 2.0 hybrid mobile application, 5.0 out of 5 based on 1 rating
Ratings:
VN:D [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

{ 3 comments… read them below or add one }

peppertech March 9, 2016 at 8:32 pm

This is great Herman, thanks for writing it up.
If you have your Android device tethered via USB to your dev machine, you can run another grunt command and it will deploy and run that app on the device for you.

grunt serve –platform=android –destination=device

No need to copy the .apk file over and install yourself. 🙂

Reply

Herman Brunnekreef March 10, 2016 at 10:50 am

Hi,

Thank you! Your suggestion is very useful, so I don’t have to shutdown my phone. The SD-card is located behind the battery in my phone.

I have a question; This app is now only available in “portrait-mode”. Do you know how you can configure in JET 2.0 when you turn your phone to “landscape-mode” the JET application also turns to “landscape-mode”?

Herman

Reply

peppertech March 17, 2016 at 7:48 pm

This would be done with simple CSS media queries. JET has a default set of media queries built into the Alta theme, which are set to

small = phone
medium = ipad portrait
large = ipad landscape
x-large = desktop

You could create an x-small media query that would allow the phone to transition between landscape and portrait as well.

I would read up from this Cookbook page:
http://www.oracle.com/webfolder/technetwork/jet/uiComponents-flex-basics.html

Reply

Leave a Comment

 

Previous post:

Next post:

About Whitehorses
Company profile
Services
Technology

Whitehorses website

Home page
Whitebooks
Jobs

Follow us
Blog post RSS
Comment RSS
Twitter