Manual Api Google Maps
Manual Api Google Maps
JavaScript API v3
juliol 2019
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
Sumario
1. Fundamentos ...................................................................................................................... 10
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
2.4.1. Ubicar los controles fuera del mapa: el selector de tipo de mapa ........ 30
2.4.2. Ubicar los controles fuera del mapa: el control de zoom ....................... 32
externo .............................................................................................................................. 53
4.1. Indicar una ruta desde un punto dado a otro punto dado .............................. 59
de HMTL5 .......................................................................................................................... 68
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
4.4. Indicar una ruta tomando como punto de partida la ubicación GPS del
usuario................................................................................................................................... 76
integration)....................................................................................................................... 79
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
Resumen
Manual de referencia de carácter introductorio para el uso de la versión 3 de la
web, así como a estudiantes que deseen iniciarse en el uso de esta API.
controles del mapa, añadir uno o varios marcadores a través del código
HTML5, la creación de polígonos y otras formas sobre el mapa, así como algunas
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
0. Antes de empezar
Desde octubre de 2016, es necesario obtener una clave de API para poder
acceder a los servicios de la API de Google Maps. Podemos conseguir una clave
llamada que también funcionará, aunque mostrando los mapas creados con un
Mapa creado sin una clave API. Al pulsar sobre el botón aceptar el mensaje desaparece.
1 https://console.developers.google.com/apis
6
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
uso.
APIs, deberemos seguir los mismos pasos que se muestran en este apartado una
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
Habilitando la API.
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
Una vez finalizado el proceso, se nos asignará una clave que debemos incorporar
clave"></script>
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
1. Fundamentos
En este apartado se explican los fundamentos o elementos básicos necesarios
para empezar a trabajar con la API de Google Maps: los ficheros HMTL, CSS i JS,
Google.
Para crear un mapa con la API de Google Maps, en primer lugar, debemos crear
continuación.
<!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?key=aqui-miclave&sensor=false"></script>
<title>GoogleMaps APIv3</title>
</head>
<body>
<div id="mapa"></div>
</body>
</html>
para todos los idiomas. A continuación, podemos observar la etiqueta <title>, que
10
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
debemos incluir en nuestro código para poder validar el documento, según los
Para fijar el tamaño del mapa debemos establecer el estilo del elemento <div>
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
nuestro contenedor.
#mapa {
width: 100%;
height: 500px;
border: 1px solid #000;
}
Una vez creado el fichero CSS con los estilos, es necesario hacer una referencia
definido en el mismo fichero HTML. En ese caso, podemos probar alguna de las
11
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
<style>
#mapa {
width: 100%;
height: 500px;
border: 1px solid #000;
}
</style>
el atributo "style":
poder cargar esta API, debemos hacer una referencia desde nuestro archivo
elemento tiene dos atributos que debemos utilizar. El primero es el tipo de script
1.3.1. Sensor
creando utiliza algún tipo de sensor, por ejemplo, para determinar la ubicación
del usuario a través de un localizador de GPS. Los posibles valores son "true" y
"false".
12
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
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".
Ahora que ya tenemos nuestro fichero HTML vinculado a la API de Google Maps y
inicializar nuestro mapa. De la misma manera que con las hojas de estilo,
Una vez creada esa estructura, debemos referenciar el fichero "mapa.js" desde
nuestra página HTML. Para ello, utilizaremos de nuevo la etiqueta <script>, pero
13
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
manera nos aseguramos de que la API de Google Maps sea cargada antes de
anteriormente habíamos creado en nuestra página HTML. Para ello, haremos una
que un mismo ID sólo puede ser utilizado una vez por página. En el caso de que
mismo, nada.
del mapa. Para utilizarlo, crearemos una variable llamada "mapOptions" con las
• zoom: Define el nivel inicial de zoom del mapa. Debe ser un número
14
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
google.maps.MapTypeId.ROADMAP o
google.maps.MapTypeId.SATELLITE.
o
var catalunya = new google.maps.LatLng(41.652393,1.691895);
center: catalunya,
hemos establecido las diferentes opciones, sólo falta pasarlas al objeto "Map".
Una vez lo tenemos todo, sólo nos queda poner en marcha el código cuando la
15
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
window.onload = function() {
var mapDiv = document.getElementById('mapa');
var catalunya = new google.maps.LatLng(41.652393,1.691895);
var mapOptions = {
center: catalunya,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapa = new google.maps.Map(mapDiv, mapOptions);
}
de la siguiente manera:
Todo junto:
window.onload = function() {
var catalunya = new google.maps.LatLng(41.652393,1.691895);
var mapOptions = {
center: catalunya,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapa'), mapOptions);
}
16
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
1.5. JSON
[
{
"title": "Barcelona",
"lat": 41.385064,
"lng": 2.173404,
"description": "Barcelona"
},
{
"title": "Girona",
"lat": 41.9794,
"lng": 2.821426,
"description": "Girona"
}
]
17
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
nombre/valor.
• Objetos (object)
• Números (number)
otro de final ([ ]), y representauna lista ordenada de objetos. A su vez, cada objeto
valor puede contener nuevos objetos, con lo cual se pueden crear estructuras
[{
"nombre": "Ateneu Barcelonès",
"coords": {
"lng": 2.1716089115143404,
"lat": 41.3846241973006
}
},
…
]
18
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
proporcionados por gobiernos, etc.). También lo podemos utilizar para definir las
información asociada.
2. Propiedades de control
Los mapas que podemos crear mediante la API de Google Maps disponen de
diferentes elementos que permiten a los usuarios interactuar con el mapa. Esta
interfaz de usuario.
individualmente.
disableDefaultUI: true
19
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
A la izquierda, un mapa con la interfaz de usuario desactivada y a la derecha, otro con la interfaz
por defecto.
aparece ubicado por defecto en la esquina superior derecha del mapa. Se utiliza
mapTypeControl: false
El mapTypeControl nos permite escoger entre los diferentes tipos de mapa disponibles.
20
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
2.1.2.1. mapTypeControlOption
estilo, posición y los tipos de mapa entre los que nuestros usuarios podrán
2.1.2.2. Estilo
forma de desplegable.
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
}
2.1.2.3. Posición
21
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
Mapa con las diferentes posiciones disponibles para los elementos de la interfaz.
no se muestra en la esquina inferior izquierda, sino que, para evitar tapar el logo
mapTypeControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
}
para los usuarios. Es posible controlar que tipos de mapa aparecerán como
• MapTypeId.ROADMAP
• MapTypeId.SATELLITE
• MapTypeId.HYBRID
• MapTypeId.TERRAIN
22
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
var mapOptions = {
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.HYBRID
]
}
}
mostrar una barra larga o un mini control más adecuado, por ejemplo, en el caso
• google.maps.ZoomControlStyle.SMALL
• google.maps.ZoomControlStyle.LARGE
var mapOptions = {
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
}
Hacer doble clic dentro del mapa equivale a aumentar el zoom. Si deseamos
23
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
disableDoubleClickZoom: true
scrollwheel: false
var mapOptions = {
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
Por defecto podemos movernos por el mapa, arrastrando el cursor. Si por alguna
draggable: false
mapa con el teclado. Los atajos de teclado disponibles por defecto para navegar
24
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
son las cuatro teclas de dirección y las teclas +/- para el zoom. El valor por
defecto es true.
keyboardShortcuts: false
streetViewControl: true
en casos anteriores:
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
}
window.onload = function() {
var catalunya = new google.maps.LatLng(41.652393,1.691895);
var mapOptions = {
center: catalunya,
zoom: 8,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
keyboardShortcuts: true,
disableDoubleClickZoom: true,
draggable: true,
scrollwheel: false,
panControl: true,
panControlOptions: {
25
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
position: google.maps.ControlPosition.TOP_RIGHT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER
},
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_CENTER,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.HYBRID
]
}
};
map = new google.maps.Map(document.getElementById('mapa'), mapOptions);
}
26
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
Por defecto, cuando el mapa se carga en la página HTML, éste borra cualquier
valor "true".
var mapOptions = {
noClear: true
};
este caso podemos definir el color de fondo del contenedor. El valor de esta
HTML y CSS (red, green, yellow, etc.). Cuando cargamos la página HTML es
var mapOptions = {
backgroundColor: '#000'
};
27
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
window.onload = function() {
var mapOptions = {
center: catalunya,
zoom: 8,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
noClear: true,
backgroundColor: '#000000',
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position: google.maps.ControlPosition.TOP_RIGHT,
mapTypeIds: [
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.HYBRID
};
28
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
Con esta propiedad es posible controlar la apariencia del cursor cuando se sitúa
sobre algún objeto "arrastable" dentro del mapa. Podemos establecer el aspecto
del cursor mediante alguno de los iconos definidos en la API de Google Maps, o
var mapOptions = {
draggableCursor: 'crosshair'
};
29
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
situarnos encima.
var mapOptions = {
draggingCursor: 'crosshair'
};
provoca que la mayoría de los mapas creados con la API de Google Maps no
sean accesibles. El problema radica en que los controles del mapa están creados
con elementos <div> que no pueden recibir el foco. Existen dos alternativas para
fuera del mapa los diferentes controles de la interfaz, utilizando elementos que si
segunda de las opciones pasa por insertar en el código HTML generado por
Google Maps, es decir, dentro del mismo mapa, elementos que si capten el foco
2.4.1. Ubicar los controles fuera del mapa: el selector de tipo de mapa
Ahora que conocemos los diferentes controles que actúan sobre la interfaz de
Google Maps, vamos a crear unos botones accesibles fuera del mapa que nos
map.setMapTypeId(MapTypeId-al-que-cambiará);
30
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
(onclick) dentro de un botón en el código HTML. Así, por ejemplo, para cambiar el
<button onkeypress="map.setMapTypeId(google.maps.MapTypeId.TERRAIN);"
onclick="map.setMapTypeId(google.maps.MapTypeId.TERRAIN);">TERRAIN</button>
Javascript
window.onload = function() {
var mapOptions = {
center:new google.maps.LatLng(41.652393,1.691895),
zoom:8,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
HTML
<body>
<button onkeypress="map.setMapTypeId(google.maps.MapTypeId.TERRAIN);"
onclick="map.setMapTypeId(google.maps.MapTypeId.TERRAIN);">TERRAIN</button>
<button onkeypress="map.setMapTypeId(google.maps.MapTypeId.ROADMAP);"
onclick="ap.setMapTypeId(google.maps.MapTypeId.ROADMAP);">ROADMAP</button>
<button onkeypress="map.setMapTypeId(google.maps.MapTypeId.SATELLITE);"
onclick="map.setMapTypeId(google.maps.MapTypeId.SATELLITE);">SATELLITE</butto
n>
<button onkeypress="map.setMapTypeId(google.maps.MapTypeId.HYBRID);"
onclick="map.setMapTypeId(google.maps.MapTypeId.SATELLITE);">HYBRID</button>
31
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
<br><br>
<div id="mapa"></div>
</body>
Para poder llevar fuera del mapa el control de zoom, en primer lugar debemos
es el nivel de zoom actual en el mapa. Para ello podemos utilizar una función
como:
function Zoomactual() {
return map.getZoom();
El siguiente paso es crear otras dos funciones a las que llamaremos "subirZoom"
"map.getZoom()" (es decir, el zoom actual del mapa) y le sumarán el valor del
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
function subirZOOM(nivel) {
map.setZoom(maszoom);
function bajarZOOM(nivel) {
map.setZoom(menoszoom);
nivel de zoom. Así, por ejemplo, si el valor del argumento "nivel" es 1, cada vez
bajar el nivel del zoom en 1 punto respecto al valor de zoom actual del mapa.
33
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
Todo junto
window.onload = function() {
var mapOptions = {
center:new google.maps.LatLng(41.652393,1.691895),
zoom:8,
mapTypeControl: false,
zoomControl: false,
panControl: true,
streetViewControl: false,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
map = new
google.maps.Map(document.getElementById("mapa"),mapOptions);
function Zoomactual() {
return map.getZoom();
function subirZOOM(nivel) {
map.setZoom(maszoom);
function bajarZOOM(nivel) {
map.setZoom(menoszoom);
34
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
Para hacer accesibles los controles internos del mapa, debemos generar
elementos que sean capaces de recibir el foco, en lugar de los <div> que se
En primer lugar, debemos crear una nueva capa sobre el objeto "mapa",
A continuación, crearemos otras dos variables para los elementos "button" y para
35
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
elementos "div".
de la variable "divs".
Utilizaremos una estructura condicional if dentro del bucle para obtener el valor
if ( divs[i].getAttribute('title')) {
button = document.createElement("button");
añadimos el atributo "tabindex" para ordenar la tabulación, evitando así que los
2
En el apartado 3.2.2, se explican con más detalle los bucles y las estructuras condicionales.
36
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
términos de uso.
button.setAttribute('id','boton-mapa-'+i);
button.setAttribute('tabindex', 0+i);
button.setAttribute('value',divs[i].getAttribute('title'));
"button".
button.setAttribute('style',button_estilo);
// Para IE
button.style.cssText = button_estilo;
"button" al mapa.
divs[i].appendChild(button);
37
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
Todo junto:
window.onload = function() {
var myOptions = {
center: catalunya,
zoom: 8,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
setTimeout('gmaps_teclado();',500);
function gmaps_teclado() {
var divs =
document.getElementById(capaAccesible).getElementsByTagName('div');
if ( divs[i].getAttribute('title')) {
button = document.createElement("button");
button.setAttribute('id','boton-mapa-'+i);
button.setAttribute('tabindex', 0+i);
38
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
button.setAttribute('value',divs[i].getAttribute('title'));
// estilos
button.setAttribute('style',button_estilo); // Para la
mayoría de navegadores
// Se añade el button
divs[i].appendChild(button);
39
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
google.maps.LatLng.
añadir el marcador.
representan los POI. Es posible utilizar los iconos creados por Google 3
Ejemplo
var marker = new google.maps.Marker({
position: new google.maps.LatLng(41.381269, 2.138956),
map: map,
title: 'Facultat de Biblioteconomia',
icon: 'iconos/green.png'
});
3
http://gmaps-samples.googlecode.com/svn/trunk/markers
40
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
marcador para que al pulsar sobre él, el bocadillo aparezca. Para ello añadiremos
un objeto dentro del DOM, y a una función que se ejecuta cuando se activa el
evento.
41
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
• 'click'
• 'dblclick'
• 'mouseup'
• 'mousedown'
• 'mouseover'
• 'mouseout'
infowindow.open(map, marker);
Todo junto
window.onload = function() {
var catalunya = new google.maps.LatLng(41.652393,1.691895);
var mapOptions = {
center: catalunya,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapa'), mapOptions);
42
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
los marcadores. En este caso no podemos utilizar el mismo código que cuando
último lugar, y el texto que aparecerá tampoco coincidirá con el que le tocaría
43
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
Para generar los marcadores, una posibilidad consiste en definir una variable
// marcador 1
var marker1 = new google.maps.Marker({
position: new google.maps.LatLng(41.385064, 2.173404),
map: map,
});
// marcador 2
var marker2 = new google.maps.Marker({
...
44
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
que se ejecutan un determinado número de veces, llamados bucles for, y los que
En este caso utilizaremos un bucle for para ejecutar el mismo código varias
var marcadores = [
['Barcelona',41.385064,2.173404,'Barcelona'],
['Tarragona',41.119019,1.245212,'Tarragona'],
['Girona',41.9794,2.821426,'Girona'],
['Lleida',41.60034,0.609762,'Lleida'],
];
Una vez tenemos el vector con los datos que necesitamos para crear los
marcadores, tenemos que extraer esos datos del vector mediante un bucle:
45
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
for:
índice del valor al que deseamos acceder. En este caso al ser el primer
valores del vector, que si recordamos era el texto que deseábamos que
apareciera en el bocadillo.
46
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
google.maps.event.addListener(marker,'click',function() {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
infowindow.setContent(marcadores[i][3]);
infowindow.open(map, marker);
});
"google.maps.events.addListener()".
google.maps.event.addListener(marker,'click',function() {
if (!infowindow) {
infowindow = new google.maps.InfoWindow();
}
es el valor que debe mostrar. En este caso, el cuarto valor de cada vector
(posición 3 en el índice).
infowindow.setContent(marcadores[i][3]);
infowindow.open(map, marker);
Para evitar que el último valor de "i" al finalizar el bucle sea el valor asignado a
todos los marcadores por el event handler, debemos aislar la "i" de esta función,
de la "i" del bucle, usando un closure. Así, pondremos el event listener dentro de
una función anónima, pasándole las variables del bucle, de "i", del marcador y
sus parámetros. Los cambios en la "i" del bucle no afectarán a los valores ya
47
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
(function(i, marker) {
//código
})(i, marker);
Todo junto
window.onload = function() {
function initialize() {
var latlng = new google.maps.LatLng(41.652393,1.691895);
var mapOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById('mapa'),
mapOptions);
setMarkers(map, marcadores);
}
var marcadores = [
['Barcelona',41.385064,2.173404,'Barcelona'],
['Tarragona',41.119019,1.245212,'Tarragona'],
['Girona',41.9794,2.821426,'Girona'],
['Lleida',41.60034,0.609762,'Lleida'],
];
var infowindow;
function setMarkers(map, marcadores) {
48
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
}
infowindow.setContent(marcadores[i][3]);
infowindow.open(map, marker);
});
})(i, marker);
}
};
initialize();}
Empezamos por los datos en formato JSON. Creamos un vector con una
var json = [
{
"title": "Barcelona",
"lat": 41.385064,
"lng": 2.173404,
"description": "<h1>Barcelona</h1><p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p>"
},
{
"title": "Girona",
"lat": 41.9794,
"lng": 2.821426,
"description": "<h1>Girona</h1><p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p>"
},
{
"title": "Tarragona",
"lat": 41.119019,
"lng": 1.245212,
"description": "<h1>Tarragona</h1><p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>"
},
{
49
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
"title": "Lleida",
"lat": 41.60034,
"lng": 0.609762,
"description": "<h1>Lleida</h1><p>Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.</p>"
}
]
Para crear los marcadores a partir de los datos del fichero JSON, lo recorremos
("data.title").
50
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
Ahora utilizamos un evento de clic para cada marcador. El código que se ejecuta
toma el valor de cada nombre "description" del JSON para llenar el "InfoWindow"
correcto.
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
Como en el apartado anterior, debemos utilizar un closure para evitar que todos
(function(marker, data) {
})(marker, data);
Todo junto
window.onload = function() {
var json = [
{
"title": "Barcelona",
"lat": 41.385064,
"lng": 2.173404,
"description": "<h1>Barcelona</h1><p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</p>"
},
{
51
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
"title": "Girona",
"lat": 41.9794,
"lng": 2.821426,
"description": "<h1>Girona</h1><p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</p>"
},
{
"title": "Tarragona",
"lat": 41.119019,
"lng": 1.245212,
"description": "<h1>Tarragona</h1><p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</p>"
},
{
"title": "Lleida",
"lat": 41.60034,
"lng": 0.609762,
"description": "<h1>Lleida</h1><p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua.</p>"
}
]
(function(marker, data) {
52
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
google.maps.event.addListener(marker, "click",
function(e) {
infoWindow.setContent(data.description);
infoWindow.open(map, marker);
});
})(marker, data);
}
}
externo
como Apache 4.
interacción mediante AJAX a páginas web. jQuery, al igual que otras bibliotecas,
4
http://www.apachefriends.org/es/xampp.html
53
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
requerirían de mucho más código, es decir, con las funciones propias de esta
Para utilizar Jquery debemos hacer una referencia desde nuestro archivo HTML
[{
"nombre": "Ateneu Barcelonès",
"coords": {
"lng": 2.1716089115143404,
"lat": 41.3846241973006
}
}, {
"nombre": "Biblioteca Arús",
"coords": {
"lng": 2.1786953077316866,
"lat": 41.39295110192035
}
}, {
"nombre": "Centre Excursionista de Catalunya",
"coords": {
"lng": 2.177043066978513,
54
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
"lat": 41.38346100200511
}
}]
$.getJSON('json/bibliotecas.json',insertar_marcador);
método ".each()". Este método realiza una iteración sobre un objeto JQuery,
ejecutando una función para cada uno de los elementos (en este caso
marcadores).
google.maps.LatLng(obj.coords.lat,obj.coords.lng),
map : map,
});
});
marcadores.push(marcador);
55
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
Todo junto
window.onload = function() {
var catalunya = new google.maps.LatLng(41.387325,2.17332);
var opciones = {
zoom : 12,
center: catalunya,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var div = document.getElementById('mapa');
var map = new google.maps.Map(div, opciones);
var marcadores = [];
google.maps.LatLng(obj.coords.lat,obj.coords.lng),
map : map,
});
marcadores.push(marcador);
});
};
$.getJSON('json/bibliotecas.json',insertar_marcador);
}
Una de las maneras de conseguir que los marcadores del mapa puedan tener el
foco y así ser accesibles, es disponer de una lista externa al mapa con los
Para crear los enlaces que apuntarán a los marcadores del mapa usaremos el
56
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
Código HTML
<a href="javascript:google.maps.event.trigger(markers['Ateneu'],'onkeypress');">Ateneu
Barcelonès</a>
Código JavaScript
for (var i = 0; i < marcadores.length; i++) {
markers[marcadores[i][0]] =
createMarker(new google.maps.LatLng(marcadores[i][2],
marcadores[i][3]), marcadores[i][0] + "<br>" + marcadores[i][1]);
}
Todo junto
Javascript
window.onload = function() {
var marcadores = [
["Ateneu","Carrer de la Canuda, 6","41.3846241973006","2.1716089115143404"],
["CEC","Carrer Paradís, 10-12","41.38346100200511","2.177043066978513"],
["Biblioteca Arus","Passeig de Sant Joan,
26","41.39295110192035","2.1786953077316866"]
];
markers = [];
57
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
};
HTML
<!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>
<script type="text/javascript" src="js/mapa.js"></script>
<title>Lista externa con los marcadores</title>
</head>
<body>
<div id="mapa"></div>
<ul>
<li><a
href="javascript:google.maps.event.trigger(markers['Ateneu'],'onkeypress');">Ateneu
Barcelonès</a></li>
<li><a
href="javascript:google.maps.event.trigger(markers['CEC'],'onkeypress');">Centre
Excursionista de Catalunya</a></li>
<li><a href="javascript:google.maps.event.trigger(markers['Biblioteca
Arus'],'onkeypress');">Biblioteca Arús</a></li>
</ul>
</body>
</html>
58
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
En la parte inferior del mapa se observa la lista con acceso a los marcadores.
4.1. Indicar una ruta desde un punto dado a otro punto dado
etiqueta <script> con la que cargamos la API de Google Maps, para evitar el
sesgo por defecto hacia los Estados Unidos que aplica la interfaz. Los valores
válidos para este parámetro son los de la ISO 3166-1 alpha-2 code. En el caso de
España es "ES".
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false®ion=ES"></script>
los desplegables que nos permitirán seleccionar el punto de inicio y el punto final
<div id="directions-panel"></div>
59
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
<div id="control">
<strong>Start:</strong>
<select id="start" onchange="calcRoute();">
<option value="Carrer de Melcior de Palau, 140, 08014 Barcelona">Facultat
de Biblioteconomia (UB)</option>
<option value="Facultad de Comunicación y Documentación @37.1931,-
3.596606">Facultad de Comunicación y Documentación
(UM)</option>
<option value="Calle Madrid, 126, 28903, Getafe">Facultad de Humanidades,
Comunicación y Documentación (UC3)</option>
<option value="Calle Campus de Cartuja, 0, 18011 Granada"> Facultad de
Comunicación y Documentación (UGR)</option>
</select>
<strong>End:</strong>
<select id="end" onchange="calcRoute();">
<option value="Carrer de Melcior de Palau, 140, 08014 Barcelona">Facultat
de Biblioteconomia (UB)</option>
<option value="Facultad de Comunicación y Documentación @37.1931,-
3.596606">Facultad de Comunicación y Documentación
(UG)</option>
<option value="Calle Madrid, 126, 28903, Getafe">Facultad de Humanidades,
Comunicación y Documentación (UC3)</option>
<option value="Calle Campus de Cartuja, 0, 18011 Granada"> Facultad de
Comunicación y Documentación (UGR)</option>
</select>
</div>
<div id="directions-panel"></div>
<div id="mapa"></div>
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
medios de transporte:
público.
function calcRoute() {
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
".route()".
61
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
});
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
62
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(41.652393,1.691895)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
var control = document.getElementById('control');
control.style.display = 'block';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}});
}
google.maps.event.addDomListener(window, 'load', initialize);
63
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
acceso a un GPS. A pesar de ello, están conectados a una red, y tienen una IP
Para tener acceso a la ubicación del usuario a través de su IP, debemos cargar la
Para poder utilizar la API de Google AJAX, o cualquier otra API adicional, tenemos
64
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
Los parámetros que pasamos son el nombre de la API (maps), la versión (3), y un
(function() {
google.load('maps', 3, {
'other_params': 'sensor=false&language=en'
});
window.onload = function() {
//aquí el resto de código
}
})();
65
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
window.onload = function() {
if (google.loader.ClientLocation.latitude &&
google.loader.ClientLocation.longitude) {
} else {
66
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
marcador
(function() {
google.load('maps', 3, {
'other_params': 'sensor=false&language=en'
});
window.onload = function() {
if (google.loader.ClientLocation.latitude && google.loader.ClientLocation.longitude)
{
var latLng = new google.maps.LatLng(google.loader.ClientLocation.latitude,
google.loader.ClientLocation.longitude);
var location = 'Te encuentras en '
location += google.loader.ClientLocation.address.city + ', ';
location += google.loader.ClientLocation.address.country;
} else {
var latLng = new google.maps.LatLng(0, 0);
var location = 'No es posible geolocalizarte';
}
var options = {
zoom: 2,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapa'), options);
67
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
geolocalización de HMTL5
var mapOptions = {
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapa'),
mapOptions);
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var posicionUsuario = new
google.maps.LatLng(position.coords.latitude,position.coords.longitude);
68
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
Creamos una función que centrará la posición del usuario en las coordenadas
map.setCenter(posicionUsuario);
}, function() {
handleNoGeolocation(true);
});
} else {
// el navegador no es compatible o no lo permite
handleNoGeolocation(false);
}
}
69
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: El servicio de geolocalización ha
fallado.';
} else {
var content = 'Error: Tu navegador no soporta el servicio de
geolocalización.';
}
Por último, definimos las características del mapa que se mostrará en los dos
var options = {
map: map,
position: new google.maps.LatLng(0,0),
content: content
};
var map;
function initialize() {
var mapOptions = {
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapa'),
mapOptions);
70
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var posicionUsuario = new
google.maps.LatLng(position.coords.latitude,position.coords.longitude)
;
var marker = new google.maps.Marker({
position: posicionUsuario,
map: map,
title: 'Geolocalización HTML5',
});
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
};
(function() {
var map;
window.onload = function() {
var options = {
zoom: 1,
center: new google.maps.LatLng(31.35, 3.51),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapa'), options);
// aquí irá la llamada a la librería geo.js
}
function handleError() {
}
function setPosition() {
}
})();
5
https://code.google.com/p/geo-location-javascript/
72
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
un else para que en caso de que el valor del método "init()" sea falso, devuelva un
mensaje de error.
if (geo_position_js.init()) {
} else {
alert('No es posible geolocalizar');
}
localización del dispositivo. Este método tiene tres argumentos. El primero es una
función que será devuelta en caso de que la API sea capaz de determinar la
posible.
if (geo_position_js.init()) {
var settings = {
enableHighAccuracy: true
};
geo_position_js.getCurrentPosition(setPosition, handleError,
settings);
} else {
alert('No es posible geolocalizar');
}
y " handleError()"
73
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
function handleError(error) {
alert('Error = ' + error.message);
}
function setPosition(position) {
var latLng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
var infoWindow = new google.maps.InfoWindow({
content: 'Estás aquí'
});
infoWindow.open(map, marker);
map.setZoom(6);
}
Todo junto
(function() {
var map;
window.onload = function() {
// Creamos el mapa
var options = {
zoom: 1,
center: new google.maps.LatLng(31.35, 3.51),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('mapa'), options);
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
var settings = {
enableHighAccuracy: true
};
// Creamos un InfoWindow
var infoWindow = new google.maps.InfoWindow({
content: 'Estás aquí'
});
75
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
$Selectors = {
mapCanvas: jQuery('#mapCanvas')[0],
dirPanel: jQuery('#directionsPanel'),
dirInputs: jQuery('.directionInputs'),
dirSrc: jQuery('#dirSource'),
dirDst: jQuery('#dirDestination'),
getDirBtn: jQuery('#getDirections'),
dirSteps: jQuery('#directionSteps'),
paneToggle: jQuery('#paneToggle'),
useGPSBtn: jQuery('#useGPS'),
paneResetBtn: jQuery('#paneReset')
},
HTML con un id. Es la forma con que jQuery nos permite elegir un elemento de
eventos.
Google Maps debe hacer una llamada a un servidor externo. Por ese motivo,
"DirectionsRenderer".
76
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
directionsSetup = function() {
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel($Selectors.dirSteps[0]);
},
directionsDisplay.setPanel($Selectors.dirSteps[0])
directionsDisplay.setDirections(response)
También crearemos una variable (selectedMode) que cogerá como valor, una de
las tres opciones del cuadro desplegable con id "mode" disponible en la página
77
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
var request = {
origin: source,
destination: destination,
provideRouteAlternatives: false,
travelMode: google.maps.TravelMode[selectedMode]
};
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
});
},
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=pl
aces"></script>
78
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
autoCompleteSetup = function() {
},
integration)
$Selectors.useGPSBtn.on('click', function(e) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
fetchAddress(position);
});
});
una dirección.
79
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
fetchAddress = function(p) {
if (status == google.maps.GeocoderStatus.OK) {
var _r = results[0];
$Selectors.dirSrc.val(_r.formatted_address);
});
Todo junto
El código JavaScript
(function(mapDemo, $, undefined) {
mapDemo.Directions = (function() {
function _Directions() {
var map,
directionsService, directionsDisplay,
autoSrc, autoDest,
$Selectors = {
mapCanvas: jQuery('#mapCanvas')[0],
dirPanel: jQuery('#directionsPanel'),
dirInputs: jQuery('.directionInputs'),
dirSrc: jQuery('#dirSource'),
dirDst: jQuery('#dirDestination'),
getDirBtn: jQuery('#getDirections'),
80
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
dirSteps: jQuery('#directionSteps'),
paneToggle: jQuery('#paneToggle'),
useGPSBtn: jQuery('#useGPS'),
paneResetBtn: jQuery('#paneReset')
},
autoCompleteSetup = function() {
},
directionsSetup = function() {
});
directionsDisplay.setPanel($Selectors.dirSteps[0]);
},
trafficSetup = function() {
controlUI = document.createElement('div'),
jQuery(controlDiv).addClass('gmap-control-
container').addClass('gmnoprint');
jQuery(controlUI).text('Traffic').addClass('gmap-control');
jQuery(controlDiv).append(controlUI);
jQuery(controlUI).addClass('gmap-control-active');
81
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
trafficLayer.setMap(map);
} else {
trafficLayer.setMap(null);
jQuery(controlUI).removeClass('gmap-control-active');
});
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(controlDiv);
},
mapSetup = function() {
zoom: 9,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DEFAULT,
position: google.maps.ControlPosition.TOP_RIGHT
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_TOP
82
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
},
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
autoCompleteSetup();
directionsSetup();
trafficSetup();
},
$Selectors.dirSteps.find('.msg').hide();
directionsDisplay.setMap(map);
var request = {
origin: source,
destination: destination,
provideRouteAlternatives: false,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
});
},
fetchAddress = function(p) {
83
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
if (status == google.maps.GeocoderStatus.OK) {
var _r = results[0];
$Selectors.dirSrc.val(_r.formatted_address);
});
},
invokeEvents = function() {
$Selectors.getDirBtn.on('click', function(e) {
e.preventDefault();
dst = $Selectors.dirDst.val();
directionsRender(src, dst);
});
$Selectors.paneResetBtn.on('click', function(e) {
$Selectors.dirSteps.html('');
$Selectors.dirSrc.val('');
$Selectors.dirDst.val('');
directionsDisplay.setMap(null);
});
$Selectors.paneToggle.toggle(function(e) {
$Selectors.dirPanel.animate({'left': '-=305px'});
jQuery(this).html('>');
84
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
}, function() {
$Selectors.dirPanel.animate({'left': '+=305px'});
jQuery(this).html('<');
});
$Selectors.useGPSBtn.on('click', function(e) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
fetchAddress(position);
});
});
},
_init = function() {
mapSetup();
invokeEvents();
};
this.init = function() {
_init();
return this;
}());
85
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
El código HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></scr
ipt>
</head>
<body>
<div id="mapCanvas"> </div>
<div id="directionsPanel">
<p class="or">O</p>
<div class="directionInputs">
<form>
<p><label>Medio de transporte</label>
<select id="mode">
</select></p>
86
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
</form>
</div>
<div id="directionSteps">
</div>
</div>
</body>
</html>
5.1. Polígonos
En primer lugar, debemos definir las coordenadas de la línea o polígono. Para ello
var poligono = [
];
ocupa, del polígono. Para ello nos podemos valer de diferentes propiedades. Es
importante que el valor del atributo "paths" sea el nombre de la variable en la que
hemos almacenado nuestro array con todas las coordenas. Mediante el resto de
87
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
paths: poligono,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.4
});
Una vez definidos los puntos que formarán la línea o polígono y su estilo, sólo nos
miPoligono.setMap(mapa);
window.onload = function() {
var poligono = [
];
var options = {
center: catalunya,
88
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
paths: poligono,
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 3,
fillColor: "#FF0000",
fillOpacity: 0.4
});
miPoligono.setMap(mapa);
89
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
5.2. Círculos
En primer lugar, crearemos un array de objetos que contengan las coordenadas y
la población de cada ciudad.
var citymap = {
Barcelona: {
population: 5524000
},
Tarragona: {
population: 800962
},
Lérida: {
population: 438001
},
Gerona: {
population: 706185
};
Una vez creadas todas las localizaciones, nos faltará generar el mapa.
window.onload = function() {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
90
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
strokeColor: '#0000FF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#5882FA',
fillOpacity: 0.35,
map: mapa,
center: citymap[city].center,
radius: Math.sqrt(citymap[city].population) * 10
});
El resultado final es
91
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
Bibliografía
<https://developers.google.com/places/documentation/autocomplete?hl=es>.
[Consulta: 12/02/2016].
<https://developers.google.com/maps/documentation/javascript/directions>.
[Consulta: 19/07/2019].
19/07/2019].
<https://developers.google.com/maps/articles/geolocation>. [Consulta:
19/07/2019].
Jeedigunta, Giri. "Custom Directions Panel with Google Maps API v3".
theWebStoreByG!. <http://thewebstorebyg.wordpress.com/2013/01/11/custom-
directions-panel-with-google-maps-api-v3/>. [Consulta: 19/07/2019].
Outbook. <http://blog.outbook.es/desarrollo-web/google-maps-accesibilidad-
<http://www.w3schools.com/html/html5_geolocation.asp>. [Consulta:
19/07/2019].
92
https://creativecommons.org/licenses/by-sa/4.0/
Rubén Alcaraz Martínez Manual de Google Maps JavaScript API v3
<https://developers.google.com/maps/documentation/javascript/maptypes?hl=es>.
[Consulta: 19/07/2019].
<http://www.w3schools.com/googleAPI/ref_getzoom.asp>. [Consulta:
19/07/2019].
<http://w3schools.com/googleapi/ref_setmaptypeid.asp>. [Consulta:
19/07/2019].
Svennerberg, Gabriel. Beginning Google Maps API 3. [Berkeley, CA]: Apress; cop.
2010.
"The Google Maps Geocoding API". En: Google Maps Geocoding API .
<https://developers.google.com/maps/documentation/geocoding/?hl=es>.
[Consulta: 19/07/2019].
93
https://creativecommons.org/licenses/by-sa/4.0/