Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. Abiraman Ramanathan
    A
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    Abiraman Ramanathan

    @Abiraman Ramanathan

    0
    Reputation
    13
    Posts
    1609
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    Abiraman Ramanathan Follow

    Posts made by Abiraman Ramanathan

    • Need clarification for ons-lazy-repeat

      I want some clarification for using ons-lazy-repeat .Because it destroys object while i scroll up. i have to call database again for That object . it will make lot of database call.So it correct way for lazy load.Help me

      posted in Developer Corner
      A
      Abiraman Ramanathan
    • RE: cordova google map plugin not shown map

      @munsterlander

      I found solution for this problem.

      1. Map is loading in background position. Onsen ui background is overlapping on map so map is not displayed in that page.

      Solution :

      angular.element(document.querySelectorAll('.page__background')).css('background-color', 'transparent', 'important');
                      angular.element(document.querySelector('.menu-container')).children().css('background-color', 'transparent', 'important');
      

      Thank you MR.munsterlander for your good effort.

      posted in Developer Corner
      A
      Abiraman Ramanathan
    • RE: cordova google map plugin not shown map

      @munsterlander
      1.I tried all the method below but map not displayed.But “map_canvas” is detected in All method.
      2.It is not a width and height problem because i give this style="width:100%;height:400px;position: relative !important" for map_canvas.

      1. i dont have time to test onsen ui and report you .So reply me asap…

      Method 1.

      document.addEventListener("pageinit", function (event) {
              if (event.target.id == 'mappage') {
                  ons.ready(function () {
                  console.log('mappage');
                var mapDiv=  document.querySelector('#map_canvas');
                  console.log(mapDiv);
                  var map = plugin.google.maps.Map.getMap(mapDiv);
                  });
              }
          });
      

      Method 2.

      document.addEventListener("pageinit", function (event) {
              if (event.target.id == 'mappage') {
                  ons.ready(function () {
                  console.log('mappage');
                  var mapDiv = document.getElementById("map_canvas");
                  console.log(mapDiv);
                  var map = plugin.google.maps.Map.getMap(mapDiv);
                  });
              }
          });
      

      Method 3

       document.addEventListener("pageinit", function (event) {
              if (event.target.id == 'mappage') {
                  ons.ready(function () {
                  console.log('mappage');
                  var mapDiv = $("map_canvas");
                  console.log(mapDiv);
                  var map = plugin.google.maps.Map.getMap(mapDiv);
                  });
              }
          });
      

      Method 4.

      app.controller('BidMapController', function ($scope, $rootScope, $http, ServiceUrl) {
           ons.ready(function () {
                  var mapDiv = document.getElementById("map_canvas");
                  var map = plugin.google.maps.Map.getMap(mapDiv);
          });
      });
      

      Method 5.

      app.controller('BidMapController', function ($scope, $rootScope, $http, ServiceUrl) {
           document.addEventListener("pageinit", function (event) {
              if (event.target.id == 'mappage') {
                  ons.ready(function () {
                  console.log('mappage');
                  var mapDiv = $("map_canvas");
                  console.log(mapDiv);
                  var map = plugin.google.maps.Map.getMap(mapDiv);
                  });
              }
          });
      });
      

      Any thing else … It tried all the method.
      In this method map was initiated but not displayed.
      Proof for DOM element:
      0_1455943980644_Screen Shot 2016-02-20 at 10.21.34 am.png

      posted in Developer Corner
      A
      Abiraman Ramanathan
    • RE: cordova google map plugin not shown map

      @munsterlander

      My app.js .

      /* This js corresponds to initializing the and mapping the page corresponds to the controller */
      var app = angular.module('app', ['onsen']);
      app.run(function ($rootScope, $http) {
          document.addEventListener("pageinit", function (event) {
                if(event.target.id=='mappage'){
              console.log('mappage');
              var mapDiv = document.getElementById("map_canvas");
              console.log(mapDiv); //DOM element is printing while code execute
                  var map = plugin.google.maps.Map.getMap(mapDiv);
                }
          });
         
              // Use Cordova handler
              document.addEventListener('backbutton', function (e) {
                  // Handle backbutton event
                  e.preventDefault();
              }, false);
      
          }, false);
      
      });
      app.controller('BidMapController', function ($scope, $rootScope, $http, ServiceUrl) { });
      

      map_canvas DOM element is print after executes pageinit.

      My index.html

      <!DOCTYPE html>
      <!-- CSP support mode (required for Windows Universal apps): https://docs.angularjs.org/api/ng/directive/ngCsp -->
      <html lang="en" ng-app="app" ng-csp>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
          <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
              <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
          <!-- JS dependencies (order matters!) -->
          <script src="scripts/platformOverrides.js"></script>
          <script src="lib/angular/angular.js"></script>
          <script src="lib/onsen/js/onsenui.js"></script>
          <!-- CSS dependencies -->
          <link rel="stylesheet" href="lib/onsen/css/onsenui.css" />
          <link rel="stylesheet" href="lib/onsen/css/onsen-css-components-blue-basic-theme.css" />
          <!-- CSP support mode (required for Windows Universal apps) -->
          <link rel="stylesheet" href="lib/angular/angular-csp.css" />
           <link rel="stylesheet" href="lib/font_awesome/css/font-awesome.min.css">
           <link rel="stylesheet" href="lib/ionicons/css/ionicons.min.css">
           <link rel="stylesheet" href="css/style.css">
          <link rel="stylesheet" href="css/spinner.css">
          <!-- --------------- App init --------------- -->
      </head>
      
      <body>
          <!-- Cordova reference -->
          <script src="cordova.js"></script>
          <script src="js/app.js"></script>
          <!-- -->
      
          <div ng-show="pageLoading" id="page_loader" data-loading>
              <div id="loader_spinner">
                  <div class="ispinner white large animating">
                      <div class="ispinner-blade"></div>
                      <div class="ispinner-blade"></div>
                      <div class="ispinner-blade"></div>
                      <div class="ispinner-blade"></div>
                      <div class="ispinner-blade"></div>
                      <div class="ispinner-blade"></div>
                      <div class="ispinner-blade"></div>
                      <div class="ispinner-blade"></div>
                      <div class="ispinner-blade"></div>
                      <div class="ispinner-blade"></div>
                      <div class="ispinner-blade"></div>
                      <div class="ispinner-blade"></div>
                  </div> 
              </div>
          </div>
      <ons-sliding-menu  ng-if="!isLogin" main-page="login/login.html" side="left" type="overlay" max-slide-distance="1px" var="app.slidingMenu" ></ons-sliding-menu>
      <ons-sliding-menu  ng-if="isLogin" var="app.slidingMenu" menu-page="menu.html" main-page="home/home.html" side="left" type="overlay" max-slide-distance="250px" ></ons-sliding-menu>
      
      </body>
      </html>
      
      posted in Developer Corner
      A
      Abiraman Ramanathan
    • RE: cordova google map plugin not shown map

      @munsterlander

      screenshot of cordova app without onsen ( code source : https://github.com/mapsplugin/cordova-plugin-googlemaps/wiki/Tutorial-for-Monaca (9th step) )

      0_1455870827363_Screenshot_2016-02-19-13-32-49.png

      screenshot of cordova app with onsen ( code source : mapepage)

      0_1455871002816_Screenshot_2016-02-19-13-35-53.png
      I did not get any error in onsen ui.But map not displayed after page push.I tried with pageinit
      but no map on this page… this is my problem .I already used this plugin in ionic but it was working well.
      I cant use javascript api for android app because of security for api key.Any one can use my api key. So i move to this plugin.help me

      posted in Developer Corner
      A
      Abiraman Ramanathan
    • RE: cordova google map plugin not shown map

      @munsterlander

      1. I am using onsen 1.

      2. I am not ready to use javascript api to map.Because i have cordova plugin for android platform.

      3.Show is not working onsen1.

      4.Javascript api is not for cordova android apps.

      So help me for load google map in onsen 1.

      posted in Developer Corner
      A
      Abiraman Ramanathan
    • RE: cordova google map plugin not shown map

      @Abiraman-Ramanathan Share your codepen link for my reference.

      posted in Developer Corner
      A
      Abiraman Ramanathan
    • RE: cordova google map plugin not shown map

      @munsterlander NO i did not get any errors.Plugin code executes perfectly but map does not shown in ‘map_canvas’ div tag.

      posted in Developer Corner
      A
      Abiraman Ramanathan
    • RE: cordova google map plugin not shown map

      @munsterlander i already tried this method.This method works perfectly but map does not load in ons-page

      document.addEventListener("pageinit", function(event){
          if(event.target.id=='mappage'){
           var mapDiv = document.getElementById("map_canvas");
                  var map = plugin.google.maps.Map.getMap(mapDiv);
          }
      });
      

      my mapepage:

      <ons-page var="mappage" id="mappage" >
          <div id="mapview-container" ng-controller="BidMapController">
              <ons-toolbar>
                  <div class="left">
                      <ons-back-button></ons-back-button>
                  </div>
                  <div class="center"> You have received <span style="color: #fb6b25">10 Bids</span></div>
      
                  <div class="right">
                      <button class="button button--quiet" style="color: #000" ng-click="app.navigator.pushPage('filterresults/filterresults.html')"><i class="ion-ios-settings"></i></button>
                  </div>
              </ons-toolbar>
              <div class="mapview-content" >
                  <div class="map">
                      <div style="width:100%;height:400px;position: relative !important" id="map_canvas" class="gmap_div"></div>
                  </div>
                  <ons-bottom-toolbar>
                      <div class="btn-mapview">
                          <button class="button button--large" ng-click="app.navigator.pushPage('map/listview.html')">list view</button>
                      </div> 
                  </ons-bottom-toolbar>
      
              </div>
          </div>
      </ons-page>
      

      This map plugin works well with out onsen.

      posted in Developer Corner
      A
      Abiraman Ramanathan
    • RE: cordova google map plugin not shown map

      @Fran-Diox Onsen 2 is beta.So how do i initiate map in onsen 1.

      posted in Developer Corner
      A
      Abiraman Ramanathan