icon-arrow icon-check icon-mail icon-phone icon-facebook icon-linkedin icon-youtube icon-twitter icon-cheveron icon-download icon-instagram play close close icon-arrow-uturn icon-calendar icon-clock icon-search icon-chevron-process icon-skills icon-knowledge icon-kite icon-education icon-languages icon-tools icon-experience icon-coffee-cup
Werken bij Integration & Application Talents
Blog 19/03/2016

Integrate Google Maps in a JET 2.0 hybrid mobile application

Puzzle pieces

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.

google maps 1

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.

Google maps 2

Now let’s create the JET application.

Google maps 3

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:

Maps location

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.

Code google maps

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.

Phone with Google Maps

Geen reacties

Geef jouw mening

Reactie plaatsen

Reactie toevoegen

Jouw e-mailadres wordt niet openbaar gemaakt.

Geen HTML

  • Geen HTML toegestaan.
  • Regels en alinea's worden automatisch gesplitst.
  • Web- en e-mailadressen worden automatisch naar links omgezet.

Wil je deel uitmaken van een groep gedreven en ambitieuze experts? Stuur ons jouw cv!