Including Google Maps with angular-ionic framework to MAF application

August 19, 2015

Reading time ~4 minutes

Now, I will show you how to create a MAF application with several APIs in few steps. There we go:

I. Create a MAF application, you can put a name that you want and go finish.

II. Then we have to define the feature in maf-feature.xml similar to the image bellow.

III. Now we have to click on content tab then select Local HTML for the type and define a html page. In this sample is Index.html.

IV. Inside of index.html we have to change the content by the code below We are including angular-ionic framework and google maps api.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"/>
        <title></title>
        <link href="lib/ionic/css/ionic.css" rel="stylesheet"/>
        <link href="css/style.css" rel="stylesheet"/>
        <script type="text/javascript">
          if (!window.adf)
              window.adf = {
              };
          adf.wwwPath = "../../../../www/";
        </script>
        <script type="text/javascript" src="../../../../www/js/base.js"></script>
        <!-- ionic/angularjs js -->
        <script src="lib/ionic/js/ionic.bundle.js"></script>
        <!-- your app's js -->
        <script src="js/app.js"></script>
        <script src="js/controllers.js"></script>
        <script src='http://maps.googleapis.com/maps/api/js?&sensor=true'></script>
        
    </head>
    <body ng-app="starter">
        <ion-nav-view></ion-nav-view>
    </body>
</html> 

V. Now we need to download the angular-ionic framework and include the folders (css, img, js, lib and templates) in the demo.singlepageapp folder as the image bellow.

Download Here

VI. If we refresh the application, we can get a new structure in the viewController.

VII. In the templates folder we have the first page (Home.html) to show the map. It is using a ng-controller called MapController that has been implemented in controller.js file.

<ion-view view-title="Google Maps V3 example">  
    
    <ion-content ng-controller="MapController">
        
       <div id="map" data-tap-disabled="true" ></div>
    </ion-content>
</ion-view>

VIII. Now we have to define the style of the map in the css folder as the image bellow

.scroll {
    height: 100%;
}
 
#map {
    width: 100%;
    height: 100%;
}

IX. In the js folder we have app.js that manages the logic of all the pages. In this case we are defining the Home.html with its controller called HomeCtrl.

// Ionic Starter App

// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
    .state('home', {
      url: "/home",
      templateUrl: "templates/Home.html",
      controller: 'HomeCtrl'
        
    })

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/home');
});

X. In the controllers.js file we have all the controllers defined for the application, one of them is MapController that was defined in Home.html. In this part we have to initialize the map and find the geolocation of the mobile.

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope) {
  
})
.controller('HomeCtrl', function($scope, $http) {
  
})
.controller('MapController', function($scope, $ionicLoading) {
    
        var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
        var mapOptions = {
            center: myLatlng,
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);
        navigator.geolocation.getCurrentPosition(function(pos) {
            map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
            var myLocation = new google.maps.Marker({
                position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                map: map,
                title: "My Location"
            });
        });
        $scope.map = map;
 
})
;

XI. Finally we deploy the application and it looks like the image bellow.

Christopher is part of middleware Sysco. He is CTO of his own startup in South America. He was working with differents open source solutions. Also He was participating in several programming tournaments related to algorithms of Computer Science. Actually these last years, he gained experience with Oracle MAF, ADF ,OSB and other Oracle solutions.

Handle dynamic params in metadata for REST connectors in OSB 12C

In this post, we will learn how to get the value of some path parameters from the URI of a REST Service using OSB 12C. There we go:### Us...… Continue reading