3. Problem with Google Maps

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Problem with Google Maps

  • R

    Hello,
    I’m trying to use Google Maps with Onsen UI 2.0.
    It seems to work with Chrome browser, but there are display problems on Firefox (version 48.0.2).
    Here are screenshots of a splitter with a map, before and after I click on a menu item.
    Can you please tell me if it’s a bug and if there is a workaround?
    Thanks!

    0_1472405327645_onsen-map-1.png

    1_1472405327645_onsen-map-2.png

    0 1 Reply
  • 侍

    @Rork Are you just debugging the application in Firefox or are you saying the WebView on a Device is set to use Firefox and is having issues when the application is run?

    0
  • R

    I’m running the app in Firefox desktop browser. Tested on Ubuntu and Windows, the problem is the same.

    0 1 Reply
  • 侍

    @Rork Well, Onsen is designed to work on mobile devices as a hyrbid webview application. Onsen should work fine on all webkit supported browsers. You will notice only Firefox for iOS is supported and this may be why you are experiencing issues.

    0
  • R

    Well, this disappoints me, I would like to use Onsen for my next app which will work on desktop and mobile devices. I thought that Onsen supported desktop browsers, and I’ve read that Firefox was supported too, I’m sure it was specified on the website at some time, am I mistaken?

    0 1 Reply
  • 侍

    @Rork Well, it will work. Usually the things you have identified are CSS related and you may need to add additional components or specific media queries.

    Monaca’s requirements / supported platforms are listed here: https://docs.monaca.io/en/

    Onsen, per their description, is a Framework and UI Components for Cordova / Phonegap: https://onsen.io/

    Having said all of that, you can still use it for desktop development, it just means that since it is being used for something other than designed, you may have to do some additional work. So, lets move on to fixing your issue. Can you post your inspected CSS so we can look at the padding?

    Edit: Also to clarify, I am in no way connected with Monaca / Onsen. I am just a user like you, so they may come in and correct me! :)

    0
  • R

    Thanks for your advice.
    I’m looking for a framework that would save me too much fiddling of CSS files if possible.
    I’ve read that Ionic 2 will support desktop web apps.
    There is also the Enyo framework that officially supports desktop and mobile browsers.
    But Onsen UI looks better to me, and seems easier to use.
    Firefox OS was supported by Onsen some time ago:
    https://web.archive.org/web/20150218052839/http://onsen.io/

    Here is my code:

    <html>
  <head>
    <meta charset="utf-8">
    <title>TEST</title>
    <link rel="stylesheet" href="onsen/css/onsenui.css"/>
    <link rel="stylesheet" href="onsen/css/onsen-css-components.css"/>
    <script src="onsen/js/onsenui.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzRq6DQxrr8LWxWt2w9qHDq7CkZ-j1row"></script>
    <script>
      ons.ready (function () {
        document.addEventListener ('init', function (event) {
          initMap ();
        });
      });
      function initMap () {
        var mapElement = document.getElementById ('map');
        var mapOptions = {
          center: new google.maps.LatLng (45, 0),
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map (mapElement, mapOptions);
      }
    </script>
  </head>
  <body>
  <ons-splitter>
    <ons-splitter-side id="menu" side="left" width="280px">
      <ons-page>
        <ons-list>
          <ons-list-item tappable>
            AAAAAAAAAAAAAAAAAAAA
          </ons-list-item>
          <ons-list-item tappable>
            BBBBBBBBBBBBBBBBBBBB
          </ons-list-item>
          <ons-list-item tappable>
            CCCCCCCCCCCCCCCCCCCC
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
  </ons-splitter>
  <ons-template id="home.html">
    <ons-page>
      <ons-toolbar>
        <div class="center">
          Test
        </div>
      </ons-toolbar>
      <div id="map" style="width: 100%; height: 100%; background: #eee;"></div>
    </ons-page>
  </ons-template>
</body>
</html>
    0 1 Reply
  • 侍

    @Rork Well, that was Firefox OS and not the browser, but I digress. As someone who has used numerous other platforms and finally discovered Onsen, I will say, your initial impression is correct. Onsen is far superior to the other platforms, but they are much younger so you see some areas where they are working diligently to improve on. Having personally met the development team, I can assure you they are very committed to making Onsen the best platform out there.

    I have used Onsen for a desktop app and like it better than Bootstrap, but it does require a bit of tweaking. Let me load your code up right now and take a look.

    Edit: So I just downloaded Firefox (48.0.2) and ran your code with Onsen RC.17 and did not experience that spacing issue at all. I resized the screen from very small to very large to try and force it to happen but could not get it to do it. Are you running the most current version of Onsen?

    0
  • R

    Yes I use the same versions of Firefox and Onsen.
    The menu labels are blanked when I click on them or when I resize the window.
    I tried on Linux Ubuntu 14.04 and Windows 7 in VirtualBox, the problem is the same…

    0 1 Reply
  • 侍

    @Rork Here is Firefox 48.0.2, Onsen RC.17, on Windows 7. Here is the code (I changed it all to CCC’s so I knew I had the same length char):

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
    <title>Onsen UI Forum Help by Munsterlander</title>

    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.17/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.17/css/onsen-css-components.css">
    <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI-dist/2.0.0-rc.17/js/onsenui.js"></script>
    <script src="components/loader.js"></script> 
     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDzRq6DQxrr8LWxWt2w9qHDq7CkZ-j1row"></script>
    <script>
      ons.ready (function () {
        document.addEventListener ('init', function (event) {
          initMap ();
        });
      });
      function initMap () {
        var mapElement = document.getElementById ('map');
        var mapOptions = {
          center: new google.maps.LatLng (45, 0),
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map (mapElement, mapOptions);
      }
    </script>
  </head>
  <body>
  <ons-splitter>
    <ons-splitter-side id="menu" side="left" width="280px">
      <ons-page>
        <ons-list>
          <ons-list-item tappable>
            CCCCCCCCCCCCCCCCCCCC
          </ons-list-item>
          <ons-list-item tappable>
            CCCCCCCCCCCCCCCCCCCC
          </ons-list-item>
          <ons-list-item tappable>
            CCCCCCCCCCCCCCCCCCCC
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
  </ons-splitter>
  <ons-template id="home.html">
    <ons-page>
      <ons-toolbar>
        <div class="center">
          Test
        </div>
      </ons-toolbar>
      <div id="map" style="width: 100%; height: 100%; background: #eee;"></div>
    </ons-page>
  </ons-template>
</body>
</html>

    And here is how it looks:

    0_1472421815090_Untitled.png

    I am able to click on everything and it does not show the clipping you experience. Am I missing something?

    0
  • R

    I copied-pasted your HTML and here is my result on Firefox 48.0.2, Windows 7 VM:

    0_1472423291132_aa.png

    Weird… I’ll continue the investigation tomorrow. Thanks for your help anyway!

    0
  • Onsen UI

    It looks fine in Firefox 47 and 48.0.2… and even in Internet Explorer and Microsoft Edge :sweat_smile:

    Do you have addons that modify the view or anything like that?

    0
  • R

    This also happens with Firefox (48.0 and 48.0.2) started in safe mode (no addons) on different Ubuntu versions and Windows VirtualBox.
    But I downloaded Firefox beta (49.0b7) and now the problem is gone!
    I didn’t explain the bug, don’t know what it was, but the good news is that I can continue to work with Onsen :-)
    Thanks for your help.

    0
    ?
     1 Reply
  • ?

    @Rork For what it’s worth, we are also using Onsen 2 with Google Maps and targeting both mobile and desktop browsers. The experience has been nothing short of great. It just basically works. Nearly all of the problems we have found have been self inflicted.

    The one area that didn’t work well was using the Popover object with the map. We switched to rendering Onsen React components inside a Google Maps InfoWindow and all the problems went away.

    We are also using a splitter, but haven’t seen the problems you’re describing. Wish I could be of more help.

    0
    R
    J
     2 Replies
  • R

    @sherscher It’s good to know! Is your app already available somewhere?

    0
    ?
     2 Replies
  • 侍

    @Rork I know @Leonardo-Augusto has an app out with Google maps and splitters. I think it was posted in the showcase https://play.google.com/store/apps/details?id=codigo.flat.leo.moura123684748.

    0
  • ?

    @Rork Beta version of it will be released this week. The product is Presto (https://www.collobos.com), which is enterprise software that facilitates use of mobile devices in corporate and campus networks. We wrote (native) apps for iOS, Android and Chrome in the current shipping version and it was super painful. We are releasing a web experience for our stuff that was built using Onsen. Next step is to retool our native apps to use Cordova and the code we just built with Onsen.

    All of us here have been super pleased with how Onsen feels. We almost think it’s better than the native version of our apps! We’re believers.

    0
    R
     1 Reply
  • R

    @sherscher @munsterlander Thanks for sharing!

    0
  • J

    @sherscher How exactly did you correct the infowindow issue? I am experiencing the same problems, links and close button do not function properly and I am searching for a solution.

    0
    ?
     2 Replies
  • 侍

    @jmuriel Can you post your map code and any JS related to it as well as the Onsen code wrapping the map? Also, it would best to open a new thread about it.

    0