NorfiPC
NorfiPC + informática, internet y redes sociales....
Trucos, ideas, para la PC, Laptop o el celular
NorfiPC » Diseño y edición web » Insertar mapas de Google

Como insertar y mostrar los mapas de Google en las páginas web



Códigos y ejemplos prácticos para insertar mapas de Google Maps usando la versión 2 de la API y Google Earth, en las páginas de un blog o sitio web solo copiando y pegando. Como mostrar los controles de navegación, marcadores y otros elementos.
Como insertar y mostrar los mapas de Google en las páginas web
Insertar en las páginas web mapas de Google Maps o Google Earth, pueden ser muy útiles para añadirle funcionalidad, interactividad, dinamismo y atractivo a un blog o sitio web.
Siempre existe la posibilidad de pegar el código que ofrece Google en la versión web, pero disponemos de más opciones insertándolos usando la API que ofrece gratis.
En este artículo mostramos varios ejemplos prácticos de como hacerlo.
Es posible de esta forma aprovechar toda la funcionalidad que ofrecen estos mapas, como desplazarse por ellos, hacer zoom, insertarles marcadores, vínculos a páginas, así como escoger el tipo de mapa necesario.
Google Maps permite los modos Mapa o callejero, el predeterminado que muestra los datos mediante diagramas de la forma clásica, Satélite que consiste en una unión de diferentes fotos satelitales, hibrido que es una mezcla de los modos anteriores y Relieve donde se resaltan las elevaciones y cursos de agua.
En este artículo se indica solo cómo usar la versión 2 de la API de Google Maps.
Todavía está completamente funcional, pero ahora esta disponible la nueva API 3 con otras funcionalidades.
Lee más información en la siguiente página:
Códigos para crear y mostrar mapas de Google Maps usando la API 3



Como usar la clave API AJAX para cargar los mapas


Para poder mostrar los mapas de Google Maps usando la versión 2 de la API, es necesario poseer una clave o key personal.
La clave se debe insertar en un script de la siguiente forma:
<script type="text/javascript" 
src="http://www.google.com/jsapi?key=CODIGO-PERSONAL"></script>
Este script se puede insertar en cualquier área de la página.
Si se usa en el área del HEAD se garantiza que el mapa se escriba más rápidamente.
Si la página carga otro contenido que se considera más importante como texto o imágenes, el script se debe insertar en el final, antes del cierre de la etiqueta </body>
Al cargar la página se comprobará rápidamente la clave y se obtendrán los permisos necesarios para cargar el o los módulos que se deseen utilizar.
En los códigos de los ejemplos que se muestran más abajo se cargan los módulos maps y earth que permiten representar los mapas de Google Maps y Google Earth.
Otros módulos disponibles son: search para búsquedas, feeds, language para idiomas, gdata para datos, visualization y friendconnect para los servicios correspondientes.



¿Cómo insertar los mapas de Google Maps en las páginas?


En este artículo se detallan las formas elementales de insertar dichos mapas, se muestra la vista previa y a continuación el código necesario, el que se debe insertar en el código HTML o código fuente de la página donde se desean mostrar.
En cada ejemplo solo es necesario modificar los siguientes parámetros:
• La latitud y longitud geográfica de la ubicación que se desea quede enfocada en el centro del mapa.
Es necesario que estén en valor decimal, no el valor tradicional de grados, minutos y segundos.
Puedes extraer los datos de la ubicación en cualquier mapa impreso o plegable y convertirlos a decimales usando el convertidor en nuestro sitio: Convertir grados, minutos y segundos a decimales

• Los niveles de zoom oscilan desde 0, el más alejado donde todo el planeta se muestra en el mapa, hasta 21 en el que se muestran edificios individuales, este nivel está disponible solo en zonas aisladas, por ejemplo ciudades como New York.

• En caso de usar marcadores los datos de la ubicación exacta de cada uno y la información a mostrar en ellos.
Código del script para cargar Google Maps en las páginas web
El código Javascript se puede usar en cualquier lugar de la página, pero para optimizar la carga de la misma lo ideal es insertarlo al final, antes del cierre de la etiqueta </body>
El lugar exacto donde se va a representar el mapa se define con la etiqueta que contiene el identificador ID, por ejemplo:
<div id="map"></div>
La etiqueta STYLE incluida en dicho contenedor define el tamaño del mapa, así como el color y forma del borde, se pude personalizar al gusto de cada cual.



Ejemplos y códigos para insertar Google Maps en las páginas web


1- Mapa simple sin controles


El primer ejemplo muestra como insertar un mapa sencillo, el más simple, solo sustituye en el código los datos como se explicó anteriormente.
El tamaño se puede definir cambiando los valores ancho (width) y alto (height) en el contenedor que se debe colocar en el lugar exacto donde desea mostrar el mapa.
El zoom usado en este caso es 4.
En todos los ejemplos de esta página se utiliza un botón como evento para cargar los mapas, con el objetivo que no retrasen la carga de la página.
En los códigos no sucede así, se incluye en el script la función "onload" para que el mapa cargue automáticamente en la página donde se inserte, y no sea necesario esperar por la intervención del usuario.
Codigo:



2- Mapa simple con controles y opciones adicionales


El segundo ejemplo es similar, pero en este caso se agregan los controles de zoom y mover, así como los botones para otras opciones diferentes de mapas.
También se usa un nivel de zoom mayor, en este caso el 7.
Codigo:



3- Mapa con marcadores


En el tercer ejemplo se agregan dos marcadores, cada uno tiene una descripción y el primero incluso un vínculo para dar a la opción de acceder a una página web externa, funcionan al usuario dar un clic en ellos.
Al usar marcadores y especificar en ellos correctamente los parámetros, no es necesario definir la ubicación y el nivel de zoom del mapa, se ajustará de forma automática.
Codigo:



Mostrar en el mapa la ubicación geográfica del usuario


Hasta hace un tiempo era posible con la misma API usar el servicio de Geolocalización de Google.
Actualmente solo está disponible para las versiones de pago para negocios.
Siempre queda la alternativa de utilizar la API de Geolocalización del W3C que es gratis y entonces con los datos que proporciona escribir un mapa de Google Maps.
Lee en otro artículo nuestro de forma detallada como hacerlo o comprueba un ejemplo práctico.

Ejemplo y el código para insertar Google Earth en una página web


De forma similar a las anteriores y usando la misma clave API se puede insertar Google Earth, que ofrece una perspectiva diferente, al mostrar el globo terráqueo en 3ra dimensión.
Codigo:

Crear una página web con mapas insertados, que funcione en el equipo local


No es necesario en lo absoluto tener acceso a un servidor web, para crear una página que muestre mapas diferentes, puedes tener una página en el escritorio del equipo, en ella experimentar con códigos diferentes y finalmente tener a mano todos los mapas que te interesen en un solo archivo.
Para eso descarga la plantilla siguiente a tu equipo.
✔ Descomprime el archivo que descargues y mapa.html que encontrarás en su interior, arrástralo al Bloc de notas de Windows para editarlo.
✔ Sustituye CODIGO-PERSONAL por tu código y en el área del BODY pega los códigos que copies de este artículo.
Es todo, dos clics en mapa.html y tendrás a mano tus mapas personalizados.
La plantilla en su interior contiene comentarios que te ayudarán.

Descargar Descargar plantilla de una página web para insertar mapas

Mas información y toda la documentación de las API de Google puedes encontrarlas en:
code.google.com

Insertar otros elementos en las páginas usando la API de Google


Google ofrece opciones de insertar distinto tipo de contenido en las páginas usando una API personal e incluso sin que sea necesario emplearla.
Es posible insertar gráficos, códigos QR, etc.
Lee más información y conoce más de los servicios disponibles de forma gratis:
Como mostrar gráficos en las páginas web usando la API de Google Charts
Como crear e insertar gráficos con Chart.js en páginas web
Lista de servicios y productos gratis de Google en internet

Página Trucos de NorfiPC en Facebook Hazte fan de nuestra página en Facebook, para recibir información técnica actualizada y trucos para el uso de la computadora, el celular e internet

NorfiPC en Twitter Recibe en Twitter a diario, sugerencias sobre contenido útil e interesante, solo síguenos.

¡Damos follow-back a los que nos siguen!

Síguenos en Google+ y te seguimos de vuelta


Páginas relacionadas



¿Necesitas buscar algo en nuestro sitio? ¡Usa a Google!


 
Anterior |  Subir  | Siguiente