Detectar dispositivo móvil para mapa embebido

ramonjosegn · 2 Feb 2014

Hola chic@s

Me comentan que hay algunos problemas entrando a los mapas embebidos que tengo en mi sitio web

Estuve revisando con mi tablet, y el problema peor es que al hacer zoom sobre la página y no sobre el mapa (con los controles) se bloquea el mapa

Me preguntaba si hay alguna forma de detectar si se está entrando con un dispositivo móvil y llevar al usuario hacia el mapa a pantalla completa en vez de cargarlo en un iframe

Gracias

(Nota prefiero siempre el uso de plugins)

juan25 · 2 Feb 2014

si, es facil ...

Hay muchas opciones ... quizas la mas sencilla sea javascript detectando la resolucion de pantalla.

Si es menor de 800px > redirecciona a X

Galbatorix · 2 Feb 2014

Por css query o por user-agent son las formas más comunes

Enviado desde mi Galacci Necsus.

Lopezito · 2 Feb 2014

https://code.google.com/p/php-mobile-detect/wiki/Mobile_Detect

Bajas la class(Mobile_Detect.php) por https://github.com/serbanghita/Mobile-Detect/tags

En el header.php de tu theme:

PHP:

include 'Mobile_Detect.php';
$detect = new Mobile_Detect;
if ($detect->isMobile()) {
header('Url', true, 301);
}

Cambias "Url" por la url donde vas a redireccionarlo.

Un saludo! :encouragement:

ramonjosegn · 2 Feb 2014

El caso es que me toca redireccionar mapa por mapa...

Lopezito · 2 Feb 2014

ramonjosegn dijo:
El caso es que me toca redireccionar mapa por mapa...

Si tenes una manera de identificarlos.. digamos.. depende cómo sea esa redirección.

Si pones el mapa "tuwebpuntocom/postname" en "m.tuwebpuntocom/postname", un código así te funcionaría:

PHP:

if(is_singular()){
include 'Mobile_Detect.php';
global $post;
$detect = new Mobile_Detect;
if ($detect->isMobile()) {
$url = 'm.tuwebpuntocom/'.$post->post_name;
header($url, true, 301);
exit();
}
}

Un saludo! :encouragement:

ramonjosegn · 2 Feb 2014

Gracias

Se me está complicando más de lo que esperaba, ya que esa idea era cargar los mapas ampliados, pero entonces no tengo un botón de regreso, excepto el del navegador (los mapas embebidos dan muchos problemas en móviles)

No sé si dejarlo así, que sólo se pueda regresar con el botón del navegador o usar alguna otra técnica, por ejemplo una capa flotante donde cargar los el mapa a resolución completa... ¿qué opinas [MENTION=18661]Lopezito[/MENTION]?

Tampoco sé si hay un plugin como para cargar iframes flotantes...

Lopezito · 2 Feb 2014

ramonjosegn dijo:
Gracias

Se me está complicando más de lo que esperaba, ya que esa idea era cargar los mapas ampliados, pero entonces no tengo un botón de regreso, excepto el del navegador (los mapas embebidos dan muchos problemas en móviles)

No sé si dejarlo así, que sólo se pueda regresar con el botón del navegador o usar alguna otra técnica, por ejemplo una capa flotante donde cargar los el mapa a resolución completa... ¿qué opinas [MENTION=18661]Lopezito[/MENTION]?

Tampoco sé si hay un plugin como para cargar iframes flotantes...

¿Qué contenido además del mapa es importante en esa página?

Si consideras que el mapa es lo esencial o el recurso único que tiene la página, yo haría que el mapa sea el único contenido de la página.

Pero según cuentas el problema se basa sobre los mapas, y no sé si dejandolo solo en una página sin demás contenido se solucionaría. Te recomendaría probar si dejandolo sin ningún contenido extra cargues el mapa en un archivo html y pruebes ingresar.

Un saludo.

ramonjosegn · 2 Feb 2014

Lopezito dijo:
¿Qué contenido además del mapa es importante en esa página?

Si consideras que el mapa es lo esencial o el recurso único que tiene la página, yo haría que el mapa sea el único contenido de la página.

Pero según cuentas el problema se basa sobre los mapas, y no sé si dejandolo solo en una página sin demás contenido se solucionaría. Te recomendaría probar si dejandolo sin ningún contenido extra cargues el mapa en un archivo html y pruebes ingresar.

Un saludo.

Pues hay datos adicionales como los horarios de los buses o dónde comprar la tarjeta, pero podría crear secciones adicionales para ello, o simplemente los usuarios que entran por celular pues no tendrían esa opción para revisar

La idea sería cargar los mapas directamente en la web donde los creamos (ikimap.com), ellos tuvieron problemas para desarrollar el sistema para móviles -por lo que no se terminó-, igual estaba revisando google maps y también hay que instalar una aplicación para que fluya bien para móviles

Realmente es un problema bastante absurdo, el principal problema es que el zoom de página bloquea el zoom del mapa o viceversa... pero ocurre tanto en los mapas de ikimap como en los mapas de google maps al no estar diseñados para móviles

Lopezito · 2 Feb 2014

ramonjosegn dijo:
Pues hay datos adicionales como los horarios de los buses o dónde comprar la tarjeta, pero podría crear secciones adicionales para ello, o simplemente los usuarios que entran por celular pues no tendrían esa opción para revisar

La idea sería cargar los mapas directamente en la web donde los creamos (ikimap.com), ellos tuvieron problemas para desarrollar el sistema para móviles -por lo que no se terminó-, igual estaba revisando google maps y también hay que instalar una aplicación para que fluya bien para móviles

Realmente es un problema bastante absurdo, el principal problema es que el zoom de página bloquea el zoom del mapa o viceversa... pero ocurre tanto en los mapas de ikimap como en los mapas de google maps al no estar diseñados para móviles

Por eso, si el error es externo a tu web, solo debes esperar que mejoren el sistema. Si no, decime como publicas si por entrada o por pagina y te tiro tal vez alguna idea para poner los mapas solos.

Ya estoy marchandome, saludos y suerte.

ramonjosegn · 2 Feb 2014

Lopezito dijo:
Por eso, si el error es externo a tu web, solo debes esperar que mejoren el sistema. Si no, decime como publicas si por entrada o por pagina y te tiro tal vez alguna idea para poner los mapas solos.

Ya estoy marchandome, saludos y suerte.

Te dejo el link para que lo revises
Rutas SITP | MiRutaFácil

Ikimap me temo que no está siendo rentable para los autores por lo que no creo que le hagan mejorías
Google Maps, pues lo que te comentaba, tocaría instalar una aplicación (doble vuelta)

Federico Piccoli · 3 Feb 2014

Ciao

juan25 dijo:
...
Si es menor de 800px > redirecciona a X

Tambien para mi redireccionar en base al ancho de pantalla és mejor opcion que hacerlo en base al user agent, aunque yo prefiero hacer la redireccion con php.

ramonjosegn · 3 Feb 2014

Federico Piccoli dijo:
Ciao

Tambien para mi redireccionar en base al ancho de pantalla és mejor opcion que hacerlo en base al user agent, aunque yo prefiero hacer la redireccion con php.

Gracias por tu comentario amigo, lamentablemente el problema como comenté va más allá del ancho de pantalla, hay un conflicto bastante grave entre el zoom del aparato móvil y el zoom de los mapas, esto ocurre tanto en Ikimap como en Google Maps

scheval · 3 Feb 2014

Tal vez esto podría ayudarte HandHeld Mobile Plugin

Federico Piccoli · 3 Feb 2014

Ciao

ramonjosegn dijo:
Gracias por tu comentario amigo, lamentablemente el problema como comenté va más allá del ancho de pantalla, hay un conflicto bastante grave entre el zoom del aparato móvil y el zoom de los mapas, esto ocurre tanto en Ikimap como en Google Maps

Aclaracion: yo he comentado sobre el modo de redireccion, no sobre el problema que crea el codigo de googlemaps

Codigo de googlemaps: el problema principal de la renderizacion de las paginas webs está en la calidad y estandardizacion de las respuestas de los browsers, para los browsers pc este problema se ha casi solucionado, pero en los browsers moviles no, por tanto hay que ser conscientes que segun que instrucciones de los lenguajes de programacion web no van a funcionar bien nunca en los browsers moviles actuales.

Lopezito · 3 Feb 2014

ramonjosegn dijo:
Te dejo el link para que lo revises
Rutas SITP | MiRutaFácil

Ikimap me temo que no está siendo rentable para los autores por lo que no creo que le hagan mejorías
Google Maps, pues lo que te comentaba, tocaría instalar una aplicación (doble vuelta)

No tengo dispositivos móviles para entrar. El tema es que si el mapa tiene errores en otras pantallas, no hay solución que no sea que se mejore ese sistema.

Un saludo.

ramonjosegn · 3 Feb 2014

Lopezito dijo:
No tengo dispositivos móviles para entrar. El tema es que si el mapa tiene errores en otras pantallas, no hay solución que no sea que se mejore ese sistema.

Un saludo.

OK, pero la idea es que dentro de la problemática ofrecer alguna alternativa, y por ahora la mejor es que los dispositivos móviles entren al mapa completo, partiendo de ahí ¿qué me recomiendas?

---------- Post agregado el 03-feb-2014 hora: 08:33 ----------

scheval dijo:
Tal vez esto podría ayudarte HandHeld Mobile Plugin

Mmm. veo que es un theme para móviles, en realidad mi theme también es responsive, el problema es de la interfaz de los mapas más que de la interfaz web

scheval · 3 Feb 2014

ramonjosegn dijo:
OK, pero la idea es que dentro de la problemática ofrecer alguna alternativa, y por ahora la mejor es que los dispositivos móviles entren al mapa completo, partiendo de ahí ¿qué me recomiendas?

---------- Post agregado el 03-feb-2014 hora: 08:33 ----------

Mmm. veo que es un theme para móviles, en realidad mi theme también es responsive, el problema es de la interfaz de los mapas más que de la interfaz web

No es un theme, es un plugin.

Lopezito · 3 Feb 2014

ramonjosegn dijo:
OK, pero la idea es que dentro de la problemática ofrecer alguna alternativa, y por ahora la mejor es que los dispositivos móviles entren al mapa completo, partiendo de ahí ¿qué me recomiendas?

No sé si probaste entrando a un archivo .html con solo el mapa para previsualizar. O sea, que se vea el mapa y de ahí entras con un móvil y probas si sigue dandote errores, si no, te podría crear un código o por lo menos una idea para cargar los mapas automaticamente en una página sola.

O deberías preguntar a algun programador de Apps para Android si creando una app para que carguen esos mapas se pueda evitar errores como los que te suceden ahora.

Un saludo.

---------- Post agregado el 03-feb-2014 hora: 09:38 ----------

scheval dijo:
No es un theme, es un plugin.

Es un plugin que genera una redirección para móviles y muestra themes creados para móviles, él lo interpretó que era solo un theme, pero en efecto es un plugin que tiene themes para móviles xd

ramonjosegn · 3 Feb 2014

scheval dijo:
No es un theme, es un plugin.

Ya, pero no importa si es un plugin o un theme, el problema es que el zoom de los mapas causa interferencias con el zoom de la pantalla y viceversa, eso poco tiene que ver con themes para móviles o plugins para móviles, por eso estoy buscando una solución más sencilla

---------- Post agregado el 03-feb-2014 hora: 08:51 ----------

Lopezito dijo:
No sé si probaste entrando a un archivo .html con solo el mapa para previsualizar. O sea, que se vea el mapa y de ahí entras con un móvil y probas si sigue dandote errores, si no, te podría crear un código o por lo menos una idea para cargar los mapas automaticamente en una página sola.

O deberías preguntar a algun programador de Apps para Android si creando una app para que carguen esos mapas se pueda evitar errores como los que te suceden ahora.

Evidente que con una aplicación para móviles seguramente se resuelve, pero por ahora no hay dinero para invertir, estoy trabajando con cosas gratuitas y con lo básico

Probé cargando Ikimap directamente y Google maps directamente, no se resuelve de esa forma, simplemente ayuda a que los botones de zoom estén un poco más grandes y que haya algo de zona para moverse (incrustando con iframe las zonas para desplazamiento causan mayor interferencia), pero por ahora parece la mejor opción (sólo que comentaba me preocupa que los usuarios tengan que hacer clic en la barra del navegador, lo otro sería detectar si es móvil y cargar un iframe pero que prácticamente ocupe toda la pantalla y una flecha de regreso... un poco absurdo quizás...)

Detectar dispositivo móvil para mapa embebido

Privacidad y transparencia

Privacidad y transparencia