Monaca Onsen UI Discord Chat Github Repo

Problem with Google Maps



  • 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…



  • @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?



  • 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!


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



  • 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.



  • @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.



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



  • @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.



  • @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.



  • @sherscher @munsterlander Thanks for sharing!



  • @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.



  • @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.



  • @jmuriel Our code looks something like this:

    maybeRenderInfoWindow()
    {
    	if ( this.state.showInfoWindow )
    	{
    		return (
    			<InfoWindow
    				key={this.state.showCluster}	
    				position={this.state.showCluster.getCenter()}
    				maxWidth={300}
    				onCloseclick={ () =>
    				{
    					this.setState(
    					{
    						showInfoWindow: false,
    						showCluster: null,
    					} );
    				}}
    			>
    				<div style={styles.serviceList}>
    					<ServiceList
    						selectable={true}
    						services={services}
    						onSelect={ ( service ) =>
    						{
    							this.setState(
    							{
    								showInfoWindow: false,
    								showCluster: null
    							} );
    						} }
    					/>
    				</div>
    			</InfoWindow>
    		);
    	}
    	else
    	{
    		return null;
    	}
    }
    

    Basically, we render an Onsen list inside the InfoWindow component. We are using react-google-maps as the React wrapper for Google Maps.

    Let me know if you’re still having problems after looking at that code snippet.

    Take care,

    Scott