Cdigos para crear y mostrar mapas de Google

Maps

Insertar mapas en un blog o pgina web o cargarlos desde la PC

usando la nueva API 3 de Google. Como crear marcadores, globos
o cuadros con informacin y mostrar imgenes y fotos en el mapa.
Cdigos para copiar y pegar o descargar con varios ejemplos
prcticos.

En otra pgina de este sitio mostramos varios ejemplos de cmo

insertar mapas de Google Maps en las pginas de un sitio, pero
usando la anterior versin 2 de la API de Google.
Esta versin se mantiene funcional, pero ahora solo se entregan
claves o key de la para la nueva V3.
A diferencia de la versin anterior, la API v3 se puede usar sin
poseer una clave o key, salvo para propsitos ms avanzados.
Esta nueva versin es ms ventajosa, principalmente porque los
mapas cargan mucho ms rpido, factor importantsimo para

mostrarlos en dispositivos portables.

Adems muchas opciones que haba que especificarlas
manualmente en el cdigo, ahora estn implementadas de forma
predeterminada, por lo que todo se hace ms sencillo.

Cmo usar los mapas de Google?

Este tutorial no es solo para los que necesitan insertar mapas en
un blog o sitio web, tambin podemos usarlos en nuestra PC o
Laptop con un sencillo archivo HTML que se puede crear con el
Bloc de notas o descargarlo desde este mismo artculo.
En una pgina o blog podemos mostrarlos y agregarles
marcadores, globos de informacin y hasta imgenes y fotos.
Adems definir acciones al dar un clic en cualquier elemento, de
forma similar a como sucede en la web de Google Maps.
Es una opcin excelente para promocionar gratis un negocio, para
mostrar la ubicacin de lugares interesantes, usos tursticos,
educativos, etc.
Para el que necesita consultar regularmente zonas de un mapa,
puede descargar un archivo HTML y modificarlo a su gusto.

El cdigo para crear un mapa de Google Maps

Crear un mapa elemental o bsico de Google Maps es algo sencillo.
Solo necesitamos conocer las coordenadas donde deseamos
centrarlo en formato decimal, el tipo de mapa a mostrar (Callejero,
Satlite, Mixto o Relieve) y el nivel de zoom.
Son dos cdigos, el script que carga el archivo JS de la API y el que
posee los valores para escribir el mapa en un lugar indicado de la
pgina.
En este ejemplo es un contenedor o bloque identificado como

"map".
Los cdigos necesarios son los siguientes:
<script src="http://maps.google.com/maps/api/js?
sensor=false&callback=iniciar">
</script>
<script>
function iniciar() {
var mapOptions = {
center: new google.maps.LatLng(25.80, -80.30),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new
google.maps.Map(document.getElementById("map"),mapOptions);}
</script>
<div id="map"></div>

Presiona el siguiente botn para cargar un pequeo mapa en esta

pgina, creado con un cdigo similar al anterior.
Cargar mapa
Ms abajo puedes descargar un archivo HTML listo para usar en la
PC con estos valores o lee como cambiarlos a tu gusto.

Parmetros a modificar en el cdigo para mostrar un mapa

El primer script que carga la API no es necesario tocarlo.
El parmetro "callback=iniciar" inicia la funcin que escribe el
mapa, solo despus que el archivo de la API ha cargado
completamente.
MapOptions contiene los valores de lo que se escribir en el mapa.
center: Contiene las coordenadas en las que se centrar el mapa.
El primer valor es la latitud y el siguiente la longitud.
Se expresan usando nmeros decimales separados por coma, no
grados sexagesimales como es habitual en los mapas.
En caso de solo tener la ubicacin en grados decimales es

necesario convertirla.
Por ejemplo 23 45' 30'' corresponde a 23.758333 en decimal.
No es necesario usar varios decimales, 2 bastan para centrar un
pas, 3 para una ciudad, 4 para detalles, el mximo es 6.
Usa la siguiente herramienta en nuestro sitio: Convertir grados,
minutos y segundos a decimales

zoom: El nivel de zoom o resolucin inicial. Un nmero entre el 1 y

el 23.

mapTypeId: El tipo de mapa, puede escogerse entre cuatro

valores diferentes:
ROADMAP - Callejero o de carreteras, el predeterminado de Google
Maps.
SATELLITE - Se compone de fotos de satlite.
HYBRID - Una combinacin de los dos anteriores.
TERRAIN Muestra el relieve fsico, elevaciones del terreno y
corrientes de agua.

El mapa se escribe en el contenedor <div id="map"></div>

Se puede especificar el acho y la altura mediante una etiqueta

estilo, por ejemplo los que se muestran en esta pgina por
limitaciones usan 500 pixeles de ancho por 250 pixeles de altura:
<div id="map" style="width:500px;height:250px;"></div>

Archivo HTML para cargar mapas de Google Maps en la PC

El archivo que contiene el cdigo anterior para descargar, muestra
a todo lo ancho y alto del navegador un mapa de la ciudad de
Miami con el nivel de zoom 10.
Se puede cambiar la ubicacin como se explic anteriormente.
Incluye un cuadro de bsqueda en la parte inferior y lgicamente
carga mucho ms rpido que si accedemos a Google Maps en la
red, por no tener interface ni cargar elementos adicionales.
Puedes probarlo online en este enlace o descargar el archivo a tu
equipo.
No dejes de probarlo.
Descargar mapa

Agregar elementos al mapa de Google Maps

Podemos agregarle varios elementos a los mapas que necesitamos
insertar en una pgina web, para hacerlos ms informativos,
atractivos y dinmicos.
Iremos mostrando el cdigo y el ejemplo prctico de un mapa, que
ser necesario cargarlo con un evento, en este caso un botn.
Los cdigos podemos agregarlos al elemental que vimos ms
arriba, siempre antes de la llave de cierre de la funcin.

Agregar marcadores al mapa de Google Maps

Los marcadores son pequeos iconos de color que permiten

precisar un punto exacto, puede ser donde est centrado el mapa

o lugares especficos.
Para agregar un marcador se emplea el objeto
"google.maps.Marker" y son obligatorias dos propiedades:
"position" y "map".
En este ejemplo situamos dos marcadores en un mapa de La
Habana, uno en el centro del mapa con el ttulo "Tienda Carlos III"
que aparece al situar el ratn encima y el otro especificando las
coordenadas de la Universidad.
Para eso agregamos el siguiente cdigo:
Ojo, las lneas antecedidas de dos barras inclinadas solo son
comentarios.
//marcador con la ubicacin de la Universidad
var place = new google.maps.LatLng(23.1368,-82.3816);
var marker = new google.maps.Marker({
position: place
, title: 'La Universidad de la Habana'
, map: map
, });
//marcador en el centro del mapa
var marker2 = new google.maps.Marker({
position: map.getCenter()
, title: 'La tienda Carlos III'
, map: map
, });

Presiona el botn para cargar un mapa creado con el cdigo

anterior.
Cargar mapa

Agregar globos de informacin al mapa de Google Maps

En los globos o cuadros de informacin se puede escribir texto o
cdigo para crear enlaces que conduzcan a una pgina web.
Se pueden mostrar de forma esttica o al dar clic en un marcador.
Para definirlos se emplea el objeto: new

google.maps.InfoWindow().
En el siguiente ejemplo mostramos un globo esttico en la Tienda
Carlos III y uno al dar un clic en el marcador de la Universidad.
De forma adicional se ampla el nivel de zoom del mapa en este
caso.
//globo de informacion del marcador 2
var popup = new google.maps.InfoWindow({
content: 'Esta es la tienda Carlos III'});
popup.open(map, marker2);
//globo de informacion al dar un clic en el marcador 2
function showInfo() {
map.setZoom(16); //aumenta el zoom
map.setCenter(marker.getPosition());
var contentString = 'Ubicacin Actual';
var infowindow = new google.maps.InfoWindow({
content: 'Aqui es donde estudio, lee mas informacin en:
<a href="http://norfipc.com">NorfiPC</a>'});
infowindow.open(map,marker);}
//Dispara accion al dar un clic en el marcador
google.maps.event.addListener(marker, 'click', showInfo);

Presiona el botn para cargar un mapa creado con el cdigo

anterior.
Cargar mapa

Agregar imgenes o fotos al mapa de Google Maps

Tambin podemos agregar fotos o imgenes en determinado punto
de un mapa.
Lo que hacemos en este caso es sustituir el icono del marcador por
una imagen que debe estar alojada en internet.
Necesitamos crear la variable "image" con el objeto:
google.maps.MarkerImage(), a continuacin la ruta a la imagen y
sus dimensiones en pixeles.

Ahora en el marcador con la ubicacin de lugar donde mostrar la

imagen, agregamos el parmetro: "icon: image"
//Imagen a mostrar con su ruta
var image = new google.maps.MarkerImage(
'http://norfipc.com/img/cuba/cayo-pajaros.jpeg'
, new google.maps.Size(120,72));
//Marcador con la imagen anterior como icono
var place = new google.maps.LatLng(22.168000,-78.296);
var marker = new google.maps.Marker({
position: place
, map: map
, title: 'Cayo Los Pajaros, un clic para ver a tamao
completo'
, icon: image
, animation: google.maps.Animation.DROP,});
//Cargar la imagen en una nueva pestaa a un tamao mayor
function showInfo() {
window.open('http://www.pinterest.com/pin/126241595778264236/')}
google.maps.event.addListener(marker, 'click', showInfo);

En el ejemplo a continuacin se inserta un mapa de una zona

protegida de la fauna silvestre.
Se usa la funcin showInfo() que permite al dar un clic en la
miniatura, abrir una nueva pestaa del navegador con la imagen a
tamao completo en Pinterest.
Presiona el botn para cargar un mapa creado con el cdigo
anterior.
Cargar mapa

Otras opciones para personalizar los mapas de Google Maps

En los mapas creados se muestran de forma predeterminada los
controles de navegacin y el control de tipo de mapa, aunque se
pueden desactivar de ser necesario.

Para eso dentro de MapOptions se pueden agregar las siguientes

propiedades y especificar su valor:
mapTypeControl: true - Habilitar el control de tipo de mapa.
navigationControl: false Quitar los controles de navegacin.
scaleControl: false - Inhabilitar el control de escala.
streetViewControl: true Quitar Street View.
Son solo algunos ejemplos, otras opciones permiten modificar el
uso del ratn, teclado, color de fondo del mapa, etc.
Encuentra ms informacin avanzada sobre las clases, mtodos y
propiedades de la API de Google Maps en: http://code.google.com/

Mostrar en un mapa la localizacin geogrfica del lector

Se puede mostrar en una pgina un mapa centrado en la ubicacin
geogrfica (latitud, longitud) de la persona que la carga en su
navegador.
Para eso es necesario usar un cdigo que obtenga esta ubicacin
usando la API de Geolocalizacin del W3C y centrar el mapa con
estos datos, es algo sencillo.
Observa un ejemplo prctico usando la siguiente herramienta de
nuestro sitio y lee en otra pgina como hacerlo con todos los
detalles.

Mostrar varios mapas de Google Maps en una misma pgina

Se pueden insertar cualquier cantidad de mapas en una misma
pgina, pero para eso es necesario:
1- Crear distintos contenedores DIV con un identificador diferentes
(map1, map2, etc.)
2- Reflejarlo en el cdigo que escribe cada mapa
(document.getElementById("map1"),

document.getElementById("map2"), etc.)
3- Renombrar la variable mapOptions (mapOptions1, mapOptions2,
etc.)

Hazte fan de nuestra pgina en Facebook, para recibir

informacin tcnica actualizada y trucos para el uso de la computadora, el
celular e internet

Recibe en Twitter a diario, sugerencias sobre

contenido til e interesante, solo sguenos.

Sguenos en Google+ y te seguimos de vuelta

Pginas relacionadas
Como insertar mapas de Google en las pginas web usando la
API 2
Como insertar y mostrar los mapas de OpenStreetMap en las
pginas web
Como editar los mapas de OpenStreetMap y agregar datos e

informacin
Convertir grados geogrficos, minutos y segundos a decimales
Cdigos para detectar y mostrar la localizacin geogrfica en las
pginas web
Ver en un mapa de Google Maps mi localizacin geogrfica
Como subir a Panoramio nuestras fotos y mostrarlas en Google
Earth
Como guardar y restaurar la cach de Google Earth
Como mostrar grficos en las pginas web usando la API de
Google Charts
Cdigos para mostrar el pas que corresponde a una direccin IP
Necesitas buscar algo en nuestro sitio? Usa a Google!