La API de JavaScript de Maps le permite personalizar mapas con su propio contenido e imágenes para mostrarlos en páginas web y dispositivos móviles. La API de JavaScript de Maps presenta cuatro tipos de mapas básicos (mapa de ruta, satélite, híbrido y terreno) que puede modificar utilizando capas y estilos, controles y eventos, y varios servicios y bibliotecas.
Agregue un mapa a su sitio web, proporcionando imágenes y datos locales de la misma fuente que Google Maps. Diseñe el mapa para que se adapte a sus necesidades. Visualiza tus propios datos en el mapa, da vida al mundo con Street View y usa servicios como la codificación geográfica y las direcciones.
Audiencia
Esta documentación está diseñada para personas familiarizadas con la programación JavaScript y los conceptos de programación orientada a objetos. También debe estar familiarizado con Google Maps desde el punto de vista del usuario. Hay muchos tutoriales de JavaScript disponibles en la Web.
Esta documentación conceptual está diseñada para permitirle comenzar a explorar y desarrollar aplicaciones rápidamente con la API de JavaScript de Maps. También publicamos la Referencia de la API de JavaScript de Maps.
Hola Mundo
La forma más sencilla de empezar a aprender sobre la API de JavaScript de Maps es ver un ejemplo sencillo. El siguiente ejemplo muestra un mapa centrado en Sydney, Nueva Gales del Sur, Australia.
![]()
En este siguiente enlace encontrará el código ejemplo para recrear este ambiente.
Incluso en este simple ejemplo, hay algunas cosas a tener en cuenta:
- Declaramos la aplicación como HTML5 usando la declaración.
- Creamos un divelemento llamado "mapa" para contener el mapa.
- Definimos una función de JavaScript que crea un mapa en el div.
- Cargamos la API de JavaScript de Maps mediante una scriptetiqueta.
Estos pasos se explican a continuación.
Declarar su aplicación como HTML5
Le recomendamos que declare un verdadero DOCTYPE dentro de su aplicación web. Dentro de los ejemplos aquí, hemos declarado nuestras aplicaciones como HTML5 usando el HTML5 simple DOCTYPE como se muestra a continuación:
La mayoría de los navegadores actuales mostrarán el contenido declarado con esto DOCTYPEen "modo estándar", lo que significa que su aplicación debería ser más compatible con todos los navegadores. También DOCTYPE está diseñado para degradarse con gracia; los navegadores que no lo entienden lo ignorarán y utilizarán el "modo peculiaridades" para mostrar su contenido.
Tenga en cuenta que algunos CSS que funcionan en el modo peculiaridades no son válidos en el modo estándar. En concreto, todos los tamaños basados en porcentajes deben heredar de los elementos del bloque principal, y si alguno de esos antepasados no especifica un tamaño, se supone que tienen un tamaño de 0 x 0 píxeles. Por ese motivo, incluimos la siguiente
(con id map) debería ocupar el 100% de la altura del cuerpo HTML. Tenga en cuenta que debemos declarar específicamente esos porcentajes para y también.
Cargando la API de JavaScript de Maps
La API de JavaScript de Maps se carga mediante una scriptetiqueta, que se puede agregar en línea en su archivo HTML o dinámicamente usando un archivo JavaScript separado. Le recomendamos que revise ambos enfoques y elija el que sea más apropiado para la forma en que está estructurado el código de su proyecto.
Para cargar la API de JavaScript de Maps en línea en un archivo HTML, agregue una etiqueta script como se muestra a continuación.
Atributos de etiqueta de secuencia de comandos
Observe en los ejemplos anteriores que se establecen varios atributos en la etiqueta script, que se recomiendan. La siguiente es una explicación de cada atributo.
-
src: La URL desde la que se carga la API de JavaScript de Google Maps, incluidos todos los símbolos y definiciones que necesita para utilizar la API de JavaScript de Google Maps. La URL de este ejemplo tiene dos parámetros:, keydonde proporciona su clave de API, y callback, donde especifica el nombre de una función global que se llamará una vez que la API de JavaScript de Maps se cargue por completo.
-
async: Solicita al navegador que descargue y ejecute el script de forma asincrónica. Cuando se ejecuta el script, llamará a la función especificada usando el parámetro callback.
HTTPS o HTTP
Creemos que la seguridad en la web es muy importante y recomendamos usar HTTPS siempre que sea posible. Como parte de nuestros esfuerzos para hacer que la Web sea más segura, hemos hecho que todas las API de JavaScript de Maps estén disponibles a través de HTTPS. El uso de la encriptación HTTPS hace que su sitio sea más seguro y más resistente a espionaje o manipulación.
Recomendamos cargar la API de JavaScript de Maps a través de HTTPS con la etiqueta