Source language: Translate to:

Mostrar GoogleMaps en Iframe o Container

General questions about NeoAppBuilder - our rapid application development tool for building HTML5, web and mobile apps.

Moderator: Neosoft Support

Mostrar GoogleMaps en Iframe o Container

Postby gusgusl » Mon Jul 04, 2016 12:54 pm

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
gusgusl
 
Posts: 254
Joined: Fri Mar 12, 2010 12:44 pm

Re: Mostrar GoogleMaps en Iframe o Container

Postby Neosoft Support » Mon Jul 04, 2016 1:33 pm

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.
NeoSoft Support
Neosoft Support
NeoSoft Team
 
Posts: 5603
Joined: Thu Mar 31, 2005 10:48 pm
Location: Oregon, USA

Re: Mostrar GoogleMaps en Iframe o Container

Postby luishp » Tue Jul 05, 2016 12:59 am

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.
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Mostrar GoogleMaps en Iframe o Container

Postby gusgusl » Wed Jul 06, 2016 12:59 pm

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"
gusgusl
 
Posts: 254
Joined: Fri Mar 12, 2010 12:44 pm

Re: Mostrar GoogleMaps en Iframe o Container

Postby Neosoft Support » Wed Jul 06, 2016 8:37 pm

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?
NeoSoft Support
Neosoft Support
NeoSoft Team
 
Posts: 5603
Joined: Thu Mar 31, 2005 10:48 pm
Location: Oregon, USA

Re: Mostrar GoogleMaps en Iframe o Container

Postby gusgusl » Thu Jul 07, 2016 8:37 am

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
gusgusl
 
Posts: 254
Joined: Fri Mar 12, 2010 12:44 pm

Re: Mostrar GoogleMaps en Iframe o Container

Postby luishp » Fri Jul 08, 2016 9:10 am

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/
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain

Re: Mostrar GoogleMaps en Iframe o Container

Postby gusgusl » Fri Jul 08, 2016 10:06 am

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 "?
gusgusl
 
Posts: 254
Joined: Fri Mar 12, 2010 12:44 pm

Re: Mostrar GoogleMaps en Iframe o Container

Postby Neosoft Support » Fri Jul 08, 2016 5:58 pm

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.
NeoSoft Support
Neosoft Support
NeoSoft Team
 
Posts: 5603
Joined: Thu Mar 31, 2005 10:48 pm
Location: Oregon, USA

Re: Mostrar GoogleMaps en Iframe o Container

Postby gusgusl » Fri Jul 08, 2016 6:24 pm

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"
gusgusl
 
Posts: 254
Joined: Fri Mar 12, 2010 12:44 pm

Re: Mostrar GoogleMaps en Iframe o Container

Postby luishp » Sat Jul 09, 2016 3:00 am

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!
Luis Hernández - SinLios Soluciones Digitales
http://sinlios.com
User avatar
luishp
 
Posts: 359
Joined: Wed May 23, 2007 10:17 am
Location: Spain


Return to General NeoAppBuilder Discussion

Who is online

Users browsing this forum: No registered users and 1 guest