Creando un mapa básico.
Para empezar necesitaríais saber un poquito de HTML, lo básico: qué es un DIV, qué son el header y el body, etc., y algo de JavaScript, lo que hace más complicado el cuento. Si hay preguntas, sugerencias, cuestiones, etc., pues comentad.
Vamos a empezar con lo más sencillo que podemos crear, la mínima expresión de los mapas en google maps 😀
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>mapa1</title> <style type="text/css"> #map{ height: 400px; width: 80{1f0778fe2e852b61c79949ce7b4bb677680b76fea251b03768a071033ace27eb}; margin-left: 10{1f0778fe2e852b61c79949ce7b4bb677680b76fea251b03768a071033ace27eb}; background-color: #CCC; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=es"></script> <script type="text/javascript"> window.onload = function(){ var options = { zoom: 13 , center: new google.maps.LatLng(41.973174, 2.818134) , mapTypeId: google.maps.MapTypeId.SATELLITE }; var map = new google.maps.Map(document.getElementById('map'), options); }; </script> </head> <body> <div id="map"></div> </body> </html> |
En el body tenemos el DIV donde cargaremos el mapa, en el head tenemos el estilo para este DIV.
Cargamos la API de google maps
1 |
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=es"></script> |
Y ahora la parte molona: el código para generar nuestro mapa.
Al producirse el evento Windows.onload (cuando el documento este cargado) lanzará la función.
1 2 3 4 5 6 7 8 |
window.onload = function(){ var options = { zoom: 13, center: new google.maps.LatLng(41.973174, 2.818134), mapTypeId: google.maps.MapTypeId.SATELLITE }; var map = new google.maps.Map(document.getElementById('map'), options); }; |
La función
Las opciones: aquí definimos como queremos que sea el mapa.
-Definimos el zoom que habrá,
-que queremos el centro de nuestro mapa en las coordenadas 41.973174, 2.818134,
-y que queremos un mapa de tipo SATELLITE.
Y por último, creamos el mapa, pasándole donde lo queremos, en nuestro caso en el DIV #map; y las opciones con que queremos que se genere.
1 |
var map = new google.maps.Map(document.getElementById('map'), options); |
Guardamos el identificador que nos devuelve en una variable para tener el mapa localizado en páginas con varios mapas y para más cosas.
El resultado :
Los mapas pueden ser de tipo:
- MapTypeId.ROADMAP : muestra la vista de mapa de carretera predeterminada.
- MapTypeId.SATELLITE : muestra imágenes de satélite de Google Earth.
- MapTypeId.HYBRID : muestra una mezcla de vistas normales y de satélite.
- MapTypeId.TERRAIN : muestra un mapa físico basado en información del relieve.
Qué me decís, ¿cómo sé cuales son las coordenadas de un punto?
Nos vamos a google maps, botón derecho y en la opción “¿Qué hay aquí?” vemos que nos muestra la información del sitio.
Ahí tenemos las coordenadas.
Una cosa que me molesta de los mapas, los controles.
Así que para eliminarlos o mostrarlos lo único que tenemos que hacer es poner el tipo de control a true o false en nuestro options.
panControl: true o false,
zoomControl: true o false,
mapTypeControl: true o false,
scaleControl: true o false,
streetViewControl: true o false,
overviewMapControl: true o false
Sé el primero en comentar