Como poner un mapa de Google Maps en una pagina web
Lo primero que debemos hacer es obtener el api key de Google Maps. Para eso debemos acceder a la dirección del Api de Google Maps utilizando nuestra cuenta de gmail.
 |
| Consola de Google APIs |
 |
| Crear Proyecto |
 |
| Biblioteca |
 |
| Habilitar API |
 |
| Crear Credenciales |
 |
| Clave de Navegador |
 |
| Nombrar API |
Finalmente copiamos la clave generada y le damos aceptar.
 |
| Clave |
Ahora vamos a crear nuestra pagina web donde vamos a insertar el mapa. Para ello vamos a necesitar un servidor local de prueba, puede ser un servidor WAMP o XAMP. Yo voy a utilizar un servidor LAMP que tengo instalado en una maquina virtual con Ubuntu.
Nos ponemos en el directorio donde esta nuestro sitio web LAMP (para otras servidores web consultar su respectiva documentacion):
Ahi creamos una carpeta para nuestra pagina:
Como ejemplo crearemos un mapa de Google centrado en el estadio del equipo de los Yankees de Nueva York. Necesitaremos conocer la longitud y latitud de la ubicación del estadio. Para ello utilizaremos la siguiente pagina:
 |
| Latitud y Longitud |
Con nuestro editor favorito procedemos a crear la pagina:
Procederemos a describir el ejemplo paso a paso.
- Cargar la API de Google
La API de Google Maps es una biblioteca JavaScript. Puede ser agregada a una página web con una etiqueta <script>:
La clave sería la que obtuvimos en el paso anterior.
Crear una función para inicializar el mapa:
En la función de inicialización, crear un objeto (mapProp) para definir las propiedades para el mapa:
La propiedad center especifica dónde centrar el mapa. Crea un objeto LatLng para centrar el mapa en un punto específico. Pasamos las coordenadas en el orden: latitud, longitud.
La propiedad zoom hace referencia al nivel de zoom del mapa. Zoom: 0 muestra un mapa de la Tierra totalmente ampliada. Un nivel elevado de zoom acerca a una resolución más alta.
La propiedad mapTypeId especifica el tipo de mapa para mostrar.
- Crear un contenedor para el mapa
Crear un elemento <div> para contener el mapa. Usar CSS para el tamaño del elemento:
El mapa será siempre "heredara" su tamaño de su elemento contenedor.
- Crear el objeto del mapa
El código anterior crea un nuevo mapa en el interior del elemento <div> con id = "googleMap", usando los parámetros que se le pasan (mapProp).
- Añadir un detector de eventos para cargar el mapa
Añadir un DOM listener que ejecutará la función initialize () en la ventana de carga (cuando se cargue la página):
- Añadir un marcador
El constructor de marcador crea un marcador. (Tenga en cuenta que la propiedad de posición se debe establecer para que se muestre el marcador). Añadir el marcador para el mapa utilizando el método setMap ():
Con esto quedaría terminado nuestro código. Solo restaría copiarlo en nuestro servidor con el nombre index.html al directorio mapa que creamos previamente. Para ver nuestro mapa escribimos desde cualquier navegador la dirección http://myservidor/mapa:
 |
| Nuestro mapa de Google |
0 comentarios:
Publicar un comentario