Google Maps Básico

Crear un mapa simple de Google Maps

Ahora creemos un mapa simple de Google Maps.

A continuación se muestra un mapa de Google Maps de Londres, Reino Unido:

Ejemplo

<!DOCTYPE html> <html> <head> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJW4jsPlNKgv6jFm3B5Edp5ywgdqLWdmc&callback=initMap" async defer></script> <script> function initialize() { var mapProp = { center:new google.maps.LatLng(51.508742,-0.120850), zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <div id="googleMap" style="width:500px;height:380px;"></div> </body> </html>

Pruébalo »

Análisis del ejemplo

Usamos el ejemplo anterior para analizar el proceso de creación de un mapa de Google Maps.

¿Por qué la aplicación debe declarar HTML5?

<!DOCTYPE html>

La mayoría de los navegadores renderizan las páginas con documentos HTML5 en "modo estándar", lo que significa que tu aplicación es compatible con los principales navegadores.

Además, sin la etiqueta DOCTYPE, el navegador renderiza el contenido de la página en modo quirks (modo de compatibilidad).

Consejo:Debes tener en cuenta que algunos CSS en "modo quirks" no se pueden usar en el modo estándar. En una aplicación específica, todos los tamaños basados en porcentajes deben heredarse del elemento de bloque padre. Si no se especifica un tamaño en el módulo padre, el valor predeterminado es 0 x 0 píxeles. Si quieres usar porcentajes, puedes declararlo en la etiqueta `<style>`, como se muestra a continuación:

<style type="text/css">
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>

Esta declaración de estilo indica que el módulo del mapa (GoogleMap) debe tener una altura HTML del 100%.

Agregar la clave de API de Google Maps

En el siguiente ejemplo, la primera etiqueta `<script>` debe incluir la API de Google Maps:

<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

Coloca la clave de API generada por Google en elkeyparámetro (key=YOUR_API_KEY)。

The sensorEl parámetro es obligatorio y se utiliza para indicar si la aplicación utiliza un sensor (como la navegación GPS) para determinar la ubicación del usuario. El valor del parámetro puede ser true o false.

HTTPS

Si tu aplicación es HTTP seguro (HTTPS: HTTP Secure), puedes usar HTTPS para cargar la API de Google Maps:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

Carga asíncrona

También podemos cargar la API de Google Maps después de que la página se haya cargado por completo.

El siguiente ejemplo usa window.onload para cargar Google Maps después de que la página se cargue por completo. La función loadScript() crea la etiqueta `<script>` para cargar la API de Google Maps. Además, se agrega el parámetro callback=initialize al final de la etiqueta; initialize() se ejecutará como función de devolución de llamada (callback) después de que la API se cargue por completo:

Ejemplo

function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyBzE9xAESye6Kde-3hT-6B90nfwUkcS8Yw&sensor=false&callback=initialize"; document.body.appendChild(script); } window.onload = loadScript;

Pruébalo »

Definir las propiedades del mapa

Antes de inicializar el mapa, necesitamos crear un objeto de propiedades Map para definir algunas propiedades del mapa:

var mapProp = {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:7,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

center (punto central)

La propiedad center especifica el centro del mapa, que crea un punto central en el mapa mediante coordenadas (latitud, longitud).

Zoom (nivel de zoom)

La propiedad zoom especifica el nivel de zoom del mapa. zoom: 0 muestra el mapa del mundo entero completamente alejado.

MapTypeId (tipo inicial del mapa)

La propiedad mapTypeId especifica el tipo inicial del mapa.

mapTypeId incluye los siguientes cuatro tipos:

  • google.maps.MapTypeId.HYBRID: muestra una capa transparente de calles principales sobre imágenes de satélite.
  • google.maps.MapTypeId.ROADMAP: muestra un mapa de calles normal.
  • google.maps.MapTypeId.SATELLITE: muestra imágenes de satélite.
  • google.maps.MapTypeId.TERRAIN: muestra un mapa con características naturales (como terreno y vegetación).

Dónde mostrar el mapa de Google Maps

Normalmente, Google Maps se usa en un elemento `<div>`:

Nota:El mapa se mostrará con el tamaño establecido en el div, por lo que podemos definir el tamaño del mapa en el elemento `<div>`.

Crear un objeto Map

var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);

El código anterior usa el parámetro (mapProp) para crear un nuevo mapa dentro del elemento `<div>` (con id googleMap).

Consejo:Si deseas crear varios mapas en la página, solo necesitas agregar nuevos objetos de mapa.

El siguiente ejemplo define cuatro instancias de mapa (cuatro mapas usan diferentes tipos de mapa):

Ejemplo

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp); var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2); var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3); var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);

Pruébalo »

Cargar el mapa

Después de que se cargue la ventana, se ejecuta la función initialize() para inicializar el objeto Map, lo que asegura que Google Maps se cargue después de que la página se haya cargado por completo:

google.maps.event.addDomListener(window, 'load', initialize);
Otras extensiones