Google-Maps
- Informática

Introducción a Google Maps API v3: fundamentos

El documento HTML

Para crear nuestro primer mapa con la APIv3 de Google Maps necesitaremos crear un documento HTML. Este documento puede estar en XHTML o HTML5 (también en versiones anteriores) y debe tener una estructura mínima, similar a la que reproducimos a continuación:

<!DOCTYPE html>
	<head>
    		<meta charset="utf-8">
    		<title>GoogleMaps APIv3</title>
    	</head>
 
	<body>
	<div id="map"></div>
 
	</body>
 
</html>

 

En el ejemplo anterior y en el resto del tutorial, utilizaremos HTML5. El primero de los elementos es la declaración de tipo de documento (DOCTYPE) y se utiliza para explicarle al navegador cómo interpretar la página. En el caso de que quisiéramos utilizar XHTML la declaración de documento sería:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

El segundo de los elementos es la etiqueta <head>. Esta sección de la página contiene un serie de elementos muy importantes. En primer lugar encontramos la etiqueta <meta charset> que dice qué tipo de codificación de caracteres estamos utilizando. En este caso utilizaremos UTF-8, ya que incluye caracteres especiales para todos los idiomas. A continuación podemos observar la etiqueta <title>, que establece el título de la página web. Ambos son elementos obligatorios que debemos incluir en nuestro código para poder validar el documento.

Finalmente, la etiqueta <body> contiene los diferentes elementos que serán visibles en nuestra página web. En nuestro caso, de momento sólo tenemos un elemento <div> con el atributo id y el valor “map”. Por si sólo, este elemento no mostrará nada, pero una vez creemos la hoja de estilo e incorporemos algo de JavaScript, el valor “map” nos ayudará a identificar y conectar los tres documentos (HTML, CSS y JavaScript).

La hoja de estilos

Para fijar el tamaño del mapa debemos establecer el estilo del elemento <div> que contendrá el mapa. El tamaño de este contenedor define el tamaño del mapa. Una buena práctica consiste en mantener separados el código HTML y el CSS, por lo tanto, crearemos otro archivo con extensión .css llamado “estilo.css”. Además, para mantener una estructura ordenada, crearemos una carpeta con el nombre css en la que guardaremos las diferentes hojas de estilo que vayamos creando.

Vamos a trabajar con un mapa que ocupe todo el ancho de la página y 500 píxels de alto. Además, agregaremos un borde de 1 píxel de color negro a nuestro contenedor.

#map {
width: 100%;
height: 500px;
border: 1px solid #000;
}

 

Una vez creado el fichero CSS con los estilos, es necesario hacer una referencia en el archivo HTML apuntando al archivo CSS. Esta referencia se hace con el elemento <link> dentro de la sección <head>. Aprovecharemos también, para definir el idioma de nuestra página con la etiqueta <html lang=”es”>:

<!DOCTYPE html>
<html lang="es">
 	<head>
    	<meta charset="utf-8">
    	<link type="text/css" href="css/estilo.css" rel="stylesheet" media="all" />
		<title>GoogleMaps APIv3</title>
	</head>
	<body>
	<div id="map"></div>
	</body>
</html>

 

Referencia a la API de Google Maps

Desde octubre de 2016, es necesario obtener una clave de API para poder acceder a los servicios de la API de Google Maps. Aquellos sitios o aplicaciones que no la venían utilizando han ido viendo progresivamente como les aparecía el error “MissingKeyMapError”. Más información en la entrada Cómo obtener una clave API para Google Maps.

La API de Google Maps se encuentra alojada en los servidores de Google. Para poder cargar la API de Google Maps debemos hacer una referencia desde nuestro archivo HTML hacia el lugar en el que se encuentra ésta. La referencia se ha de incluir en la sección <head> del documento. La cargaremos con el elemento <script>. Este elemento tiene dos atributos que debemos utilizar. El primero es el tipo de script que deseamos utilizar y el otro es la URL que apunta a la API.

<!DOCTYPE html>
<html lang="es">
 	<head>
    		<meta charset="utf-8">
    		<link type="text/css" href="css/estilo.css" rel="stylesheet" media="all" />
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<title>GoogleMaps APIv3</title>
	</head>
	<body>
	<div id="map"></div>
	</body>
</html>

Sensor

La API de Google Maps requiere que se indique si la aplicación que estamos creando utiliza algún tipo de sensor, por ejemplo para determinar la ubicación del usuario a través de un localizador de GPS. Esto es especialmente útil en las aplicaciones pensadas para dispositivos móviles. En nuestro caso no utilizaremos ningún tipo de sensor por lo que el valor utilizado será “false”. En caso contrario utilizaríamos el valor “true”

Localización (idioma)

La API de Google Maps intentará determinar automáticamente qué idioma utiliza la interfaz de usuario. No obstante, también podemos indicarlo en el <script> que hemos utilizado para referenciar la API de Google Maps. Para hacerlo, debemos añadir el parámetro (opcional) &language=”codigo_del_idioma”  al final de la cadena:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=es"></script>

Localización (región)

Al cargar la API de Google Maps desde maps.googleapis.com se aplica un sesgo por defecto hacia los Estados Unidos. Si deseamos modificar este comportamiento predeterminado, lo podemos hacer mediante la adición de un nuevo parámetro a la etiqueta <script>: “region”. Los valores válidos para este parámetro son los de la ISO 3166-1 alpha-2 code. El valor para España es “ES”.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&region=ES"></script>

Crear nuestro primer mapa

Ahora que ya tenemos nuestro fichero HTML vinculado a la API de Google Maps y a la hoja de estilos, ya podemos empezar a escribir código JavaScript para inicializar nuestro mapa. De la misma manera que con las hojas de estilo, también es una buena práctica separar el código JavaScript de nuestro HTML. Así que crearemos un fichero llamado “map.js” y lo guardaremos en una carpeta con nombre “js”.

Una vez creada esa estructura, debemos referenciar el fichero “map.js” desde nuestra página HTML. Para ello, utilizaremos de nuevo la etiqueta <script>, pero esta vez referenciando un fichero ubicado en nuestro PC o servidor:

<!DOCTYPE html>
<html lang="es">
 	<head>
    		<meta charset="utf-8">
    		<link type="text/css" href="css/estilo.css" rel="stylesheet" media="all" />
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=es"></script>
		<script type="text/javascript" src="js/map.js"></script>
		<title>GoogleMaps APIv3</title>
	</head>
	<body>
	<div id="map"></div>
	</body>
</html>

La posición de esta nueva etiqueta no es trivial. Debe estar ubicada a continuación de la referencia a la API de Google Maps, y no antes. De esta manera nos aseguramos de que la API de Google Maps sea cargada antes de que la página HTML intente usarla.

El contenedor del Mapa

Llegados a este punto, inicializaremos un mapa dentro del <div> que anteriormente habíamos creado en nuestra página HTML. Para ello, haremos una referencia desde nuestro fichero “map.js”, utilizando el método “document.getElementById()”. Este método busca el ID de un elemento HTML y devuelve una referencia al mismo elemento. Es imporante tener en cuenta que un mismo ID sólo puede ser utilizado una vez por página. En el caso de que no se pueda encontrar el ID indicado, el valor devuelto será “null” o lo que es lo mismo, nada.

Crearemos una variable llamada mapDiv usando el método getElementById() referenciando nuestro <div id=”map”>:

var mapDiv = document.getElementById('map');

El objeto “mapOptions” es necesario y define las propiedades de visualización del mapa. Por lo tanto, crearemos una variable llamada “options” con las tres propiedades mínimas necesarias para que el mapa funcione:

  • center: Define el centro del mapa mediante unas coordenadas.
  • zoom: Define el nivel inicial de zoom del mapa. Debe ser un número comprendido entre 1 y 23.
  • mapTypeId: Define el tipo de mapa que será cargado inicialmente. Los diferentes tipos de mapas los encontramos en el objeto google.maps.MapTypeId. Por ejemplo, google.maps.MapTypeId.ROADMAP o google.maps.MapTypeId.SATELLITE.

Antes de proporcionar los valores a nuestra variable “options”, prepararemos los valores de la propiedad “center” mediante el objeto google.maps.LatLng:

var catalunya = new google.maps.LatLng(41.652393,1.691895);

En esta variable hemos grabado las coordenadas de Cataluña, mediante las cuales centraremos posteriormente nuestro mapa en esa posición.

A continuación ya podemos añadir las tres opciones comentadas anteriormente:

var mapDiv = document.getElementById('map');
var catalunya = new google.maps.LatLng(41.652393,1.691895);
var options = {
center: catalunya,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Como se puede observar en el código anterior, hemos utilizado el valor de la variable “catalunya” para establecer el centro de nuestro mapa, hemos establecido un nivel de 8 a nuestro zoom, y finalmente, hemos escogido el tipo de mapa ROADMAP como mapa que debe cargarse por defecto.

La propiedad “center” también la podemos definir utilizando directamente el objeto “google.maps.LatLng”:

var mapDiv = document.getElementById('map');
var options = {
center: new google.maps.LatLng(41.652393,1.691895),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

Ahora que ya hemos hecho referencia al elemento <div> mediante el “mapDiv” y hemos establecido las diferentes opciones, sólo nos falta pasarlas al objeto “Map”:

var mapa = new google.maps.Map(mapDiv, options);

Ahora que lo tenemos todo, sólo nos queda poner en marcha el código cuando la página cargue. Para ello, abriremos y cerraremos el código de la siguiente manera:

window.onload = function() {
// Aquí el código que deseamos cargar
}

El resultado final es:

window.onload = function() {
var mapDiv = document.getElementById('map');
var catalunya = new google.maps.LatLng(41.652393,1.691895);
var options = {
center: catalunya,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapa = new google.maps.Map(mapDiv, options);
}

Sobre mí Rubén Alcaraz

Bibliotecario-documentalista e informático en continua iteración que habla de web y tecnología. There's no place like 127.0.0.1
Lee todas las entradas de Rubén Alcaraz

52 thoughts on “Introducción a Google Maps API v3: fundamentos

      1. Gracias, Rubén. Pude hacerlo. Casualmente ayer estaba consultando la documentación de la API. El tema es que hay tanta información que a veces es difícil encontrar algo en particular. Ahora intentaré personalizar el ícono.

  1. Buenas tardes gente yo estoy haciendo un mapa con poligons superpuestos en el mapa sobre la region en que vivo y al dar clic sobre ellos cambian de color,por ejemplo doy un clic cambia a verde, rojo y asi lo que quiero hacer es guardar el estado de ese mapa osea si se quedo en verde que se guarde en verde.. no se si me explico

  2. Hola Ruben, te cuento que soy novato y estoy tratando de reproducir tu ejemplo, pero no lo logro. Me aparece en el navegador lo siguiente al correr el documento html :

    link type=”text/css” href=”css/estilo.css” rel=”stylesheet” media=”all” /> script type=”text/javascript” src=”js/map.js”>

    no se is porque no encuentra los archivos .css y .js (Los tengo ambos en la misma carpeta del documento html)

    Te agradezco tu ayuda
    Sldos
    Ivan

    1. Hola Ivan,
      Si lo tienes todo en la misma carpeta debería constar como:

      link type=”text/css” href=”estilo.css” rel=”stylesheet” media=”all” />
      script type=”text/javascript” src=”map.js”>

      Es decir, sin la referencia a las carpetas en la ruta.

      Saludos

      1. Gracias Ruben por tu respuesta, pero te cuento que ahora al corrrer el documento html lo único que me aparece en el navegador es el siguiente mensaje:

        link type=”text/css” href=”estilo.css” rel=”stylesheet” media=”all” /> script type=”text/javascript” src=”map.js”>

        Cualquier ayuda o orientación te lo agradeceria mucho
        Sldos
        Ivan

  3. Excelente ejemplo Ruben, muy didáctico. Me gustaría preguntarte como se hace para sobre este mismo ejemplo insertar un mapa personalizado creado con google maps?
    Muchas Gracias
    Sldos

    1. Hola Mario,
      Cuando dices un “mapa personalizado” ¿a qué te estas refiriendo, al estilo del mapa (color de las diferentes zonas, agua, etc.)? Si a lo que te refieres es a cambiar el centro a otro lugar, sólo debes cambiar el valor de las coordenadas –> new google.maps.LatLng(41.652393,1.691895);

  4. Ruben, muy buen articulo. Estoy realizando un proyecto y quisiera saber como puedo incluir calculo de rutas de automoviles, es para calcular los km y el valor de los taxis, saludos.

  5. Hola Rubén, muy buena explicación, justo lo que estaba buscando para comenzar a aprender, hay una pregunta que te hicieron arriba que no veo la respuesta que estoy buscando y me gustaría saber si me puedes ayudar.
    Yo sí necesito insertar un mapa personalizado, o sea, señalizar zonas con distintos colores, una vez que lo tengo hecho, como podría insertarlo en este ejemplo?
    Saludos y gracias de antemano por la respuesta.

  6. Estoy empezando con este apasionante tema de los mapas.
    No tengo claro cuál es el contenido del /js/map.js.
    ¿Podrías por favor echarme un halo de luz sobre esto? Gracias
    ¿Se pueden bajar los archivos ya completados?

    1. Hola Raul,
      Para crear el ejemplo que se muestra en esta página, el fichero map.js debería contener:

      window.onload = function() {
      var mapDiv = document.getElementById(‘map’);
      var catalunya = new google.maps.LatLng(41.652393,1.691895);
      var options = {
      center: catalunya,
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
      };
      var mapa = new google.maps.Map(mapDiv, options);
      }

      Puedes crear tu mismo el fichero con extensión .js y copiar el contenido que comparto en la entrada sin problemas. Lo mismo con el fichero HTML y CSS.

      Saludos.

  7. Excelente aporte.
    quisiera saber como puedo ir agregando marcas sin tener que cargar de nuevo el mapa, algo así como refrescarlo en vez de cargarlo de nuevo.

  8. Hola, Ruben mira estoy trabajando con una pagina web y en ella llevara un mapa lo que yo necesito es que por ejemplo yo ponga la calle de donde vive un cliente y las entre calles y el mapa se ubique en el lugar correcto me podrias ayudar

      1. HOLA, Ruben 🙂 ok le explico estoy trabajando sobre un proyecto el cual debe llevar mapa la intesion es que yo a travez del nombre de la calle y entre calles el mapa se ubique en los parámetros mencionados. ejemplo yo vivo en MÉXICO CIUDAD VERACRUZ MUNICIPIO TIERRA BLANCA , COLONIA CENTRO CALLE SERDAN ENTRE CALLES SERAN LIVERTAD Y CONSTITUCION AL MOEMNTO DE YO SOLO PONER LA COLONIA Y LA CALLE KIERO Q EL MAPA ESTE MAS O MENOS UBICADAO DONDE VIVO, AKI SON SIENTO QUE TENGO QUE ALIMENTAR UNA BASE DE DATOS PERO NO SE COMO HACERLO

        1. Hola Sandra,
          Para localizar un punto geográfico no necesitas saber las “entre calles” como decís vosotros, sólo necesitas las coordenadas del lugar o su dirección completa y realizar un proceso de geocodificación inversa. Tienes un ejemplo de buscador de calles y lugares funcional en https://developers.google.com/maps/documentation/javascript/examples/places-searchbox
          Para el tema de la base de datos tienes un ejemplo muy completo en: https://developers.google.com/maps/articles/phpsqlajax_v3?hl=es
          Saludos.

  9. Buenas, necesito poner google maps en mi web, es para el trabajo final de carrera y me estoy volviendo loco. Uso tu codigo y no me funciona, lo estoy probando con Netbeans y con apache, incluso me puse un no-ip para tener acceso a mi web desde Internet.
    Segun he leido la web tiene que ser publica, es eso cierto?, no hay manera de probarlo

    Gracias

    1. Hola Héctor,
      No, no es necesario que la página web sea pública. Puedes probarlo en un servidor local o, incluso, desde cualquier equipo si se trata simplemente de una página estática en HTML. Eso sí, necesitas tener conexión a Internet para llamar a la API de Google Maps.
      El código de esta entrada funciona correctamente, así que revisa línea a línea que no te falta o sobre nada.
      Saludos

  10. HOLA RUBEN YA VERIFIQUE EL LINK QUE ME COMPARTES SOLO QUE COMO SOY NUEVA EN ESTO NO SE QUE DATO VA EN ESTA PARTE:

    var input = AQUI NO SE CUAL ES EL ELEMNETO{HTMLInputElement} */(
    document.getElementById(‘pac-input’));
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  11. Gracias Rubén por compartir tus conocimientos.
    Una consulta: Cuando entras en google maps y colocas una ubicación como origen y posteriormente el destino1, destino2, destinoN, la aplicación traza toda la ruta con el total de KM.
    Me podrás apoyar por favor con un ejemplo de como hacer esto en mi web.
    Gracias.

  12. Buenos dias Rubén.

    Me podrías indicar donde hay documentación para agregar la ubicación actual al mapa(gps).
    O solo es necesario lo de sensor?

  13. hola Rubén
    He escrito tu código tal cual con unas pequeñas diferencias tu escribes las coordenadas de Cataluña y yo las de la provincia de Cáceres y además en el script tu das false y yo true porque estoy intentando hacer un aplicación, y necesito el gps, pero al cargar las imágenes en el navegador me sale la página en blanco.
    Soy estudiante de primero de informática en la Uned y con un juego basado en el spaceinvaders me ocurre lo mismo, no me carga las imágenes, ¿a que puede ser debido?
    Gracias

    1. Hola Nestor,
      Cuando dices que no te carga las imágenes, supongo que te refieres al contenido del div. Explicado así, sólo se me ocurre que sea un tema de la CSS. Revisa el enlace a la hoja de estilo, o incluso prueba poniendo el estilo en la misma página para ver si ese es el problema.
      Saludos.

  14. Decirte que estos ejemplos que pones me han servido mucho ya para iniciarme en esto. Pero verás tengo que hacer un caso y no se como enfocarlo. A ver si me pudieras ayudar.
    A modo de introducción; si entro en google maps y me pongo en búsqueda y escribo “farmacias barcelona” GMaps me devuelve con `puntos rojos diminutos todas las farmacias geolocalizadas en la provincia de Barcelona.
    Se puede hacer lo mismo con la API V3 de alguna forma?
    Gracias por adelantado

      1. Gracias Rubén, de hecho me metí en la libreria de places y algo saqué. pero el problema es que creo que Places solo muestra los comercios adscritos al servicio a través de Google MyBusiness. Pero son muy pocos comercios los que hay. Yo quisiera que se mostraran todos.
        Entiendo que Google a través del servicio Street view captura fotos y también da de alta comercios según su posición, y deduzco que Google muestra todos los comercios en base a esa información.
        Mi pregunta es si puedo “atacar” esa inmensa base de datos no la de Places.
        para entendernos, si activo places me muestra aprox 20 en un radio de 5000 m en Madrid. Mientras que si en Google Maps indico en la búsqueda “Farmacias de Madrid” me salen miles!
        Gracias.

  15. Hola, estamos realizando una web movil en la que necesitamos conocer la distancia que hay a ciertos lugares. esta web sería utilizada por los usuarios, para consultar en cualquier momento el tiempo que se tardaría en llegar a esos lugares.

    Mi duda es si el limite de la API para calcular esos tiempos se suma por cada usuario que se conecta o solo cuenta para cada usuario.

    Por ejemplo si un usuario X realiza una consulta en la que al acceder se encuentran 50 lugares, y luego se conecta un usuario Z, y hace lo mismo, ¿ se han consumido 100 consultas? o solo cuenta las consultas por usuario?

    Gracias

  16. Muy bueno el articulo pero queria hacer una consulta. Como puedo hacer el tratamiento de errores en caso de tener problemas y que no se carge bien el mapa o demore mucho por diversas razones. Yo utilizo el callback para llamar la funcion que me inicializa el mapa una vez que estuviera cargado. Lo que quiero es saber como lanzar alertas cuando halla problemas para cargar el mapa ya sea por problemas con la internet o porque sea muy lenta. Quedo atento a la respuesta y muchas gracias por adelantado.

  17. Buenos dias

    La idea es crear un mapa con marcadores leyendo de una base de datos con api3 (Esto ya lo tengo). la pregunta es una vez creado el mapa con mis marcadoes puedo descargar el mapa en algun formato para poderlo llevar a google earth o a my maps o verlo en otro ordenador sin conexion a la base de datos etc…

  18. Que tal Ruben, estoy realizando una aplicacion, la cual requiere que al momento de loguearse el usuario, se guarde en automatico las coordenadas de latitud y longitud, lo cuales las almaceno en una BD, lo he implementado, haciendo uso de las APIS de google maps, pero siempre me solicita el permiso de compartir ubicacion, la pregunta seria: ¿hay alguna manera de evitar que ese mensaje no aparezca?, pues lo que se requiere es tener un control de donde se esta accesando la aplicación, gracias por tu tiempo.
    PD. La aplicacion la estoy realizando con .net haciendo uso de MVC 5

  19. Hola antes de nada Agradecerte por tomarte el tiempo y hacer estas entradas, estoy haciendo un proyecto de las bicirutas en bogota asi que hay vamos .. Con esto empeze y los estare molestando cualquier duda.. Gracias Nuevamente

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.