Google maps básico I

Publicado por Quanticbyte en 20 octubre, 2014
Categorias : GoogleMaps

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 😀

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

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.

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.

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 :

mapa básico

Los mapas pueden ser de tipo:

  1. MapTypeId.ROADMAP : muestra la vista de mapa de carretera predeterminada.
  2. MapTypeId.SATELLITE : muestra imágenes de satélite de Google Earth.
  3. MapTypeId.HYBRID : muestra una mezcla de vistas normales y de satélite.
  4. 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.

coordenadas de un lugar

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


Deja un comentario






Acepto la política de privacidad