Follow Us on Twitter

Integrate Google Maps in a JET 2.0 hybrid mobile application

by Herman Brunnekreef on March 9, 2016 · 4 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.


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.


Now let’s create the JET application.


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.longitudeValue(position.coords.longitude); = position.coords.latitude;
 self.lon = position.coords.longitude;

 var element = document.getElementById('googleMap');
 var map;
 var myLatLng = {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


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.


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.


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

{ 4 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. 🙂


Herman Brunnekreef March 10, 2016 at 10:50 am


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”?



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:


Ezequiel January 17, 2018 at 6:49 pm

Hi Herman , thank you for this tutorial. For me everything works perfectly when I run ojet android –destination=browser; but when I use an emulator, device or intall directly the .apk in the mobile… I can not view the map. The phone ask me to enabled the location service, but I just can see a white screen where the map should be.


Leave a Comment


Previous post:

Next post:

About Whitehorses
Company profile

Whitehorses website

Home page

Follow us
Blog post RSS
Comment RSS