Page 1 of 1

Mostrar GoogleMaps en Iframe o Container

PostPosted: Mon Jul 04, 2016 12:54 pm
by gusgusl
Lo ue necesito es poder ver un mapa de Google en un Iframe o Container, pero al probar la aplicación no me muestra nada por seguridad.
Cual seria la manera de hacerlo?

esta es la ubicación que necesito mostrar:
https://www.google.com.uy/maps/@-31.613 ... .75z?hl=es

Re: Mostrar GoogleMaps en Iframe o Container

PostPosted: Mon Jul 04, 2016 1:33 pm
by Neosoft Support
You can't just paste the Google Maps URL into an iFrame. Instead, select "Share" from the Google Maps menu. Then click "Embed". Copy the code generated and paste it into a NeoAppBuilder Container object's HTML property. OR copy just the src= url from the embed code and past that into a NAB iFrame object.

Re: Mostrar GoogleMaps en Iframe o Container

PostPosted: Tue Jul 05, 2016 12:59 am
by luishp
Paso a paso:
Google map step by step inclusion into NeoAppBuilder

1) Ve a Google Maps y localiza el mapa que quieres incluir.
1) Go to google maps and navigate to the desired map.

2) Arriba a la izquierda pulsa en el menú y elige "Compartir o insertar mapa".
2) Click the top-left menu and then into "Share or embed map".

3) Copia solo la parte del código correspondiente al valor de src="..." (solo lo que esté entre las comillas).
3) Copy ONLY the code inside the src attribute src="..."

4) Crea un objeto iFrame en NeoAppBuilder.
4) Create an iFrame object in NeoAppBuilder.

5) Pega en la propiedad "source" el código que acabas de copiar.
5) Paste into the "source" property the code you have just copied.

Listo :)
Ready :)

Ejemplo completo (copialo al bloc de notas y guardalo con la extensión .neoapp):
Complete example (copy into notepad and save it into a file with .neoapp extension):

Code: Select all
<?xml version="1.0" encoding="utf-8"?>
<Application>
   <AppTitle>Untitled Application</AppTitle>
   <DesignDeviceName>Desktop</DesignDeviceName>
   <VariablesScanned>False</VariablesScanned>
   <PageWidth>640</PageWidth>
   <PageHeight>480</PageHeight>
   <AutoSizeWidth>False</AutoSizeWidth>
   <AutoSizeHeight>False</AutoSizeHeight>
   <HideScrollbars>False</HideScrollbars>
   <PublishPlatform>WebApp</PublishPlatform>
   <EmptyBuildFolder>False</EmptyBuildFolder>
   <LanguageCode>en</LanguageCode>
   <MobileOSTypes>[AndroidOS,iOS,WindowsPhoneOS]</MobileOSTypes>
   <WindowState>normal</WindowState>
   <TitleBar>True</TitleBar>
   <Sizeable>True</Sizeable>
   <MaximizeBtn>False</MaximizeBtn>
   <MinimizeBtn>True</MinimizeBtn>
   <SystemMenu>True</SystemMenu>
   <ContextMenu>False</ContextMenu>
   <AlwaysOnTop>False</AlwaysOnTop>
   <ShowInTaskbar>True</ShowInTaskbar>
   <SingleInstance>False</SingleInstance>
   <ChromeKioskMode>False</ChromeKioskMode>
   <CustomHeadMetadata><!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script></CustomHeadMetadata>
   <Components>
      <FunctionList name="Subroutines"/>
      <LibraryList name="Libraries"/>
      <PageList name="Main">
         <Components>
            <Page id="NewPage">
               <Components>
                  <IFrame id="IFrame1">
                     <left>19px</left>
                     <top>19px</top>
                     <width>602px</width>
                     <height>443px</height>
                     <style>border-style:solid;border-width:1px</style>
                     <source>https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3023.0291523854407!2d-4.059308684742054!3d40.73938404387691!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd416d45b1508765%3A0xb3d70d27eb9ad1f!2sSinLios+Soluciones+Digitales!5e0!3m2!1ses!2ses!4v1467704356121</source>
                  </IFrame>
               </Components>
            </Page>
         </Components>
      </PageList>
      <PageList name="Master">
         <Components>
            <Page id="MasterPage"/>
         </Components>
      </PageList>
      <PageList name="Dialog">
         <Components>
            <Page id="NewDialog">
               <Components>
                  <DialogContainer id="DialogContainer1">
                     <left>0px</left>
                     <top>0px</top>
                     <width>640px</width>
                     <height>480px</height>
                     <close_button>False</close_button>
                  </DialogContainer>
               </Components>
            </Page>
         </Components>
      </PageList>
   </Components>
</Application>


Por cierto, el proceso para embeber un video de YouTube u cualquier otro contenido es idéntico.
By the way, the process for embedding a YouTube video or any other embebable content is just the same.

Re: Mostrar GoogleMaps en Iframe o Container

PostPosted: Wed Jul 06, 2016 12:59 pm
by gusgusl
Me pasa que puedo ver el mapa perfectamente si hago la prueba de mi aplicación desde "Neoapp" pero si la compilo y hago un .apk al probarlo en un Smartphone no muestra el mapa diciéndome "Pagina web no disponible"

It happens that I can see the map perfectly if I test my application from " Neoapp " but if the compile and make a .apk to try on a smartphone does not display the map saying " Website not available"

Re: Mostrar GoogleMaps en Iframe o Container

PostPosted: Wed Jul 06, 2016 8:37 pm
by Neosoft Support
It happens that I can see the map perfectly if I test my application from " Neoapp " but if the compile and make a .apk to try on a smartphone does not display the map saying " Website not available"


If your phone connected to WiFi?

Re: Mostrar GoogleMaps en Iframe o Container

PostPosted: Thu Jul 07, 2016 8:37 am
by gusgusl
He probado de las dos maneras, por wifi y también por red celular sin mostrarme en ninguna de ellas el mapa

I 've tried both ways, and also wireless cellular network without any of them show map

Re: Mostrar GoogleMaps en Iframe o Container

PostPosted: Fri Jul 08, 2016 9:10 am
by luishp
Creo gusgusl que el problema tanto aquí como en el envío de datos desde el formulario es el mismo.
Por seguridad PhoneGap bloquea el acceso a URL's externas a no ser que se definan previamente:

https://cordova.apache.org/docs/en/late ... whitelist/

I think the problem with Google Maps and Sending data from the Form in your app is the same.
For security reasons PhoneGap blocks any attempt to connect to external URL's, except if you have defined them previously:

https://cordova.apache.org/docs/en/late ... whitelist/

Re: Mostrar GoogleMaps en Iframe o Container

PostPosted: Fri Jul 08, 2016 10:06 am
by gusgusl
Y cual seria la manera relativamente fácil de solucionar ese problema?
Existe alguna opción en "Phonegap" de no restringir esas Urls?
Cual seria el procedimiento?

And what would be the relatively easy way to solve that problem?
There is an option in " Phonegap " not to restrict those Urls ?
What would be the procedure?

Y aprovecho a preguntar a "NeoSoftware" si en la versión final de pago de "NeoApp" esta previsto implementar la compilación directa o se va a tener que seguir usando "Phonegap"?

And I take this opportunity to ask " NeoSoftware " if the final version of paying " NeoApp " I plan to implement this direct compilation or it will have to continue using " Phonegap "?

Re: Mostrar GoogleMaps en Iframe o Container

PostPosted: Fri Jul 08, 2016 5:58 pm
by Neosoft Support
And what would be the relatively easy way to solve that problem?
There is an option in " Phonegap " not to restrict those Urls ?
What would be the procedure?


Unfortunately, there isn't an easy solution. What you would need to do is edit the config.xml file inside the .zip file that NAB's compiler creates to manually add the URLs to the "whitelist" as described in the link from luishp's post.

And I take this opportunity to ask " NeoSoftware " if the final version of paying " NeoApp " I plan to implement this direct compilation or it will have to continue using " Phonegap "?


I'm not sure. That would be make the compiling process much easier and faster, but there are some technical (and possibly licensing) issues to overcome.

Re: Mostrar GoogleMaps en Iframe o Container

PostPosted: Fri Jul 08, 2016 6:24 pm
by gusgusl
En que parte del archivo Config.xml se deben ingresar las urls
Yo lo hize de la siguiente manera:

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns="http://www.w3.org/ns/widgets"
xmlns:gap="http://phonegap.com/ns/1.0"
xmlns:android="http://schemas.android.com/apk/res/android"
id="Termas de Guaviyu"
version="0.0.8"
>
<name>
Termas de Guaviyu
</name>
<description>
Informacion sobre el centro termal Guaviyu
</description>
<author>
Gustavo Lomazzi
</author>
<icon src="img/Ico.png" />
<content src="index.html"/>
<access origin="*"/>
<gap:platform name="android"/>
<preference name="orientation" value="portrait" />
<preference name="android-MediaPlaybackRequiresUserAction" value="false" />
<preference name="android-AllowInlineMediaPlayback" value="true" />
<feature name="http://api.phonegap.com/1.0/device" />
<feature name="http://api.phonegap.com/1.0/media" />
<gap:plugin name="org.apache.cordova.device" />
<gap:plugin name="org.apache.cordova.media" />
<gap:plugin name="org.apache.cordova.device-orientation" />
</widget>
<allow-navigation href="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3397.7495834968095!2d-57.98069004020121!3d-31.61332082879621!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2suy!4v1467676239341" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>" />
<allow-navigation href="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d27136.705964807326!2d-58.043214!3d-31.768079!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95ae12e5102b1135%3A0xe899fbbb086c7b0!2sUnnamed+Rd%2C%2C+saladero+Guaviy%C3%BA%2C+Paysandu%2C+Uruguay!5e0!3m2!1ses!2sus!4v1467928706191" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>" />
<allow-navigation href="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d3402.6380001062707!2d-57.88849708521895!3d-31.479142806439366!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1ses!2suy!4v1467676587808" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>" />

Y phonegap me devuelve error "malformed config.xml"

Re: Mostrar GoogleMaps en Iframe o Container

PostPosted: Sat Jul 09, 2016 3:00 am
by luishp
gusgusl, echa un vistazo al nuevo hilo: "Top PhoneGap Mistakes".
Take a look at the new forum topic: "Top PhoneGap Mistakes".

Espero que te sirva.

Saludos!