Conceptos

Desarrollo para dispositivos móviles

La Google Maps JavaScript API fue diseñada para cargarse de manera rápida y funcionar bien en dispositivos móviles. En particular, nos hemos centrado en el desarrollo para dispositivos móviles avanzados, como los teléfonos celulares Android e iOS. Los tamaños de pantalla de los dispositivos móviles son inferiores a aquellos de los navegadores de las computadoras de escritorio. A su vez, a menudo tienen un comportamiento particular específico para esos dispositivos (como “acercar los dedos para aplicar zoom”). Si deseas que tu aplicación funcione bien en dispositivos móviles, te recomendamos lo siguiente:

  • Configura el <div> que contiene tu mapa de modo que sus atributos de ancho y alto sean del 100%. No obstante, ten en cuenta que en algunos navegadores de escritorio anteriores no ofrecen una buena visualización con estos valores.
  • Puedes detectar dispositivos iPhone y Android inspeccionando la propiedad navigator.userAgent dentro del DOM:
    function detectBrowser() {
      var useragent = navigator.userAgent;
      var mapdiv = document.getElementById("map");
    
      if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
        mapdiv.style.width = '100%';
        mapdiv.style.height = '100%';
      } else {
        mapdiv.style.width = '600px';
        mapdiv.style.height = '800px';
      }
    }
    

    Esto te permite alterar el diseño de determinados dispositivos, como hicimos aquí para cambiar el estado real de cada uno.

  • En los dispositivos Android e iOS se respeta la siguiente etiqueta <meta>:

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    

    En esta configuración se especifica que el mapa debe mostrarse en toda la pantalla y el usuario no tiene la posibilidad de cambiar su tamaño. Ten en cuenta que en el caso del navegador Safari de iPhone esta etiqueta <meta> debe incluirse dentro del elemento <head> de la página.

Para obtener más información sobre desarrollo relacionado con iPhone, consulta la documentación para desarrolladores de Apple. Para obtener más información sobre desarrollo relacionado con dispositivos Android, consulta la documentación de Android.

Localización

Puedes localizar la aplicación de la Google Maps API modificando la configuración de idioma predeterminada y configurando el código de región de la aplicación, el cual hace que su comportamiento cambie conforme a un país o territorio determinados.

Localización de idiomas

En la Google Maps API se usa la configuración de idioma determinada en el navegador al mostrar información con texto, como los nombres de controles, los avisos de derechos de autor, las indicaciones de manejo y las etiquetas de mapas. En la mayoría de los casos, es preferible. Generalmente no se recomienda invalidar la configuración de idioma preferido. Sin embargo, si deseas modificar la Google Maps API de modo que ignore la configuración de idioma del navegador y forzarlo a que muestre información en un idioma en particular, puedes agregar un parámetro language opcional a la etiqueta <script> al incluir el código de JavaScript de la Google Maps API y especificar el idioma que usarás.

Por ejemplo, para visualizar una aplicación de la Google Maps API en japonés, agrega &language=ja a la etiqueta <script> como se muestra a continuación:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=ja"
type="text/javascript">
</script>

Nota: Si se carga la API como se muestra arriba, se usará el idioma japonés para todos los usuarios independientemente de las preferencias del usuario. Asegúrate de que este sea el comportamiento que deseas antes de configurar esta opción.

Ver el ejemplo (map-language.html)

La Google Maps JavaScript API también admite texto bidireccional (Bidi) que contenga caracteres en idiomas con orientación de izquierda a derecha (LTR) y derecha a izquierda (RTL) en forma nativa. Entre los ejemplos de idiomas RTL se incluyen el árabe, el hebreo y el farsi. Generalmente, debes aplicar especificaciones a las páginas en idiomas RTL para que se representen en forma adecuada agregando dir='rtl' al elemento <html> de estas. En el siguiente ejemplo se representa un mapa de El Cairo, Egipto, con controles en árabe:

Ver el ejemplo (map-rtl.html)

Consulta también la lista de idiomas admitidos. Ten en cuenta que, a menudo, actualizamos los idiomas admitidos, por lo que es posible que esta lista no esté completa.

Localización de regiones

Cuando cargues la Maps API desde maps.googleapis.com, aplicará una restricción predeterminada al comportamiento de aplicación respecto de Estados Unidos. Si deseas modificar tu aplicación para que se usen mosaicos de mapas diferentes o se apliquen restricciones (como las de resultados de geocodificación en la región), puedes restringir este comportamiento predeterminado agregando un parámetro region a la etiqueta <script> al incluir el código de JavaScript de la Google Maps API.

Como desarrollador de una aplicación con la Google Maps API, tienes la responsabilidad de garantizar que tu aplicación cumpla con las leyes locales al controlar que se aplique la localización de regiones adecuada del país en el que se aloja.

El parámetro region acepta identificadores de subetiquetas de región Unicode, los cuales (en general) tienen una asignación uno a uno a dominios de nivel superior de código de país (ccTLD). La mayoría de los identificadores de región Unicode son idénticos a códigos ISO 3166-1 y existen algunas excepciones marcadas. Por ejemplo, el ccTLD de Gran Bretaña es “uk” (correspondiente al dominio .co.uk) mientras que su identificador de región es “GB”.

Por ejemplo, para usar una aplicación de la Google Maps API localizada en el Reino Unido, agrega &region=GB a la etiqueta <script> como se muestra a continuación:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&region=GB"
type="text/javascript">
</script>

En los siguientes ejemplos se muestran dos mapas: uno con geocódigos “Toledo” según la región predeterminada (EE. UU.) para “Toledo, Ohio” y uno que restringe resultados conforme a un parámetro region establecido en ES (España) para “Toledo, España”.

Cómo cargar la API en China

La Google Maps API se ofrece en China desde http://maps.google.cn. Al ofrecer contenido para China, reemplaza https://maps.googleapis.com por http://maps.google.cn. Por ejemplo:

<script src="http://maps.google.cn/maps/api/js?key=YOUR_API_KEY"
type="text/javascript">
</script>

Si te diriges específicamente a usuarios de China, probablemente desees agregar los parámetros de región en idioma también. La API admite zh-CN y zh-TW como valores para el parámetro language.

<script src="http://maps.google.cn/maps/api/js?region=cn&language=zh-CN&key=YOUR_API_KEY"
type="text/javascript">
</script>

Versiones

El equipo de la Google Maps JavaScript API actualiza la API con nuevas funciones, correcciones de errores y mejoras de rendimiento. Puedes indicar la versión de la API que debe cargarse en tu aplicación especificándola en el parámetro v de la solicitud de arranque de la Google Maps JavaScript API. Obtén más información sobre versiones.

Enviar comentarios sobre...

Google Maps JavaScript API
Google Maps JavaScript API
Si necesitas ayuda, visita nuestra página de asistencia.