códigos para crear y mostrar mapas de google maps

8/18/2019 Códigos Para Crear y Mostrar Mapas de Google Maps

1/11

Códigos para crear y mostrar mapas de GoogleMaps

Insertar mapas en un blog o página web o cargarlos desde la PC

usando la nueva API 3 de Google. Como crear marcadores, globos

o cuadros con información y mostrar imágenes y fotos en el mapa.

Códigos para copiar y pegar o descargar con varios eemplos

prácticos.

!n otra página de este sitio mostramos varios eemplos de cómo

insertar mapas de Google "aps en las páginas de un sitio, pero

usando la anterior versión # de la API de Google.

!sta versión se mantiene funcional, pero a$ora solo se entregan

claves o %ey de la para la nueva &3.

A diferencia de la versión anterior, la API v3 se puede usar sin

poseer una clave o %ey, salvo para propósitos más avan'ados.

!sta nueva versión es más ventaosa, principalmente por(ue los

mapas cargan muc$o más rápido, factor important)simo para

http://norfipc.com/web/como-insertar-mostrar-mapas-google-paginas-web.phphttp://norfipc.com/web/como-insertar-mostrar-mapas-google-paginas-web.php


2/11

mostrarlos en dispositivos portables.

Además muc$as opciones (ue $ab)a (ue especi*carlas

manualmente en el código, a$ora están implementadas de forma

predeterminada, por lo (ue todo se $ace más sencillo.

¿Cómo usar los mapas de Google?

!ste tutorial no es solo para los (ue necesitan insertar mapas en

un blog o sitio web, tambi+n podemos usarlos en nuestra PC o

aptop con un sencillo arc$ivo -" (ue se puede crear con el

/loc de notas o descargarlo desde este mismo art)culo.

!n una página o blog podemos mostrarlos y agregarles

marcadores, globos de información y $asta imágenes y fotos.

Además de*nir acciones al dar un clic en cual(uier elemento, de

forma similar a como sucede en la web de Google "aps.

!s una opción e0celente para promocionar gratis un negocio, para

mostrar la ubicación de lugares interesantes, usos tur)sticos,

educativos, etc.

Para el (ue necesita consultar regularmente 'onas de un mapa,

puede descargar un arc$ivo -" y modi*carlo a su gusto.

El código para crear un mapa de Google Maps

Crear un mapa elemental o básico de Google "aps es algo sencillo.

1olo necesitamos conocer las coordenadas donde deseamos

centrarlo en formato decimal, el tipo de mapa a mostrar 2Calleero,

1at+lite, "i0to o elieve4 y el nivel de 'oom.

1on dos códigos, el script (ue carga el arc$ivo 51 de la API y el (ue

posee los valores para escribir el mapa en un lugar indicado de la

página.

!n este eemplo es un contenedor o blo(ue identi*cado como


3/11

6map6.

os códigos necesarios son los siguientes7

function iniciar()

!ar mapptions =

center: ne# google.maps.$at$ng(%.' *'.+)

,oom: -

mappe01: google.maps.2appe01.34524678

!ar map = ne#

google.maps.2ap(1ocument.get9lement01("map")mapptions)87

Presiona el siguiente botón para cargar un pe(ue8o mapa en esta

página, creado con un código similar al anterior.

Cargar mapa

"ás abao puedes descargar un arc$ivo -" listo para usar en la

PC con estos valores o lee como cambiarlos a tu gusto.

Parámetros a modificar en el código para mostrar un mapa

!l primer script (ue carga la API no es necesario tocarlo.

!l parámetro 6callbac%9iniciar6 inicia la función (ue escribe el

mapa, solo despu+s (ue el arc$ivo de la API $a cargado

completamente.

"ap:ptions contiene los valores de lo (ue se escribirá en el mapa.center7 Contiene las coordenadas en las (ue se centrará el mapa.

!l primer valor es la latitud y el siguiente la longitud.

1e e0presan usando n;meros decimales separados por coma, no

grados se0agesimales como es $abitual en los mapas.

!n caso de solo tener la ubicación en grados decimales es


4/11

necesario convertirla.

Por eemplo #3< =>? 3@?? corresponde a #3.>B333 en decimal.

o es necesario usar varios decimales, # bastan para centrar un

pa)s, 3 para una ciudad, = para detalles, el má0imo es D.

Esa la siguiente $erramienta en nuestro sitio7 Convertir grados,minutos y segundos a decimales

zoom7 !l nivel de 'oom o resolución inicial. En n;mero entre el F y

el #3.

mapTypeId7 !l tipo de mapa, puede escogerse entre cuatro

valores diferentes7

:A"AP H Calleero o de carreteras, el predeterminado de Google

"aps.

1A!I! H 1e compone de fotos de sat+lite.

-/I H Ena combinación de los dos anteriores.

!AI J "uestra el relieve f)sico, elevaciones del terreno y

corrientes de agua.

!l mapa se escribe en el contenedor Kdiv id96map6LKMdivL

http://norfipc.com/herramientas/convertir-grados-geograficos-minutos-segundos-decimales.phphttp://norfipc.com/herramientas/convertir-grados-geograficos-minutos-segundos-decimales.phphttp://norfipc.com/herramientas/convertir-grados-geograficos-minutos-segundos-decimales.phphttp://norfipc.com/herramientas/convertir-grados-geograficos-minutos-segundos-decimales.php


5/11

1e puede especi*car el ac$o y la altura mediante una eti(ueta

estilo, por eemplo los (ue se muestran en esta página por

limitaciones usan >@@ pi0eles de anc$o por #>@ pi0eles de altura7

Kdiv id96map6 style96widt$7>@@p0N$eig$t7#>@p0N6LKMdivL

Archivo HM! para cargar mapas de Google Maps en la PC

!l arc$ivo (ue contiene el código anterior para descargar, muestra

a todo lo anc$o y alto del navegador un mapa de la ciudad de

"iami con el nivel de 'oom F@.

1e puede cambiar la ubicación como se e0plicó anteriormente.

Incluye un cuadro de b;s(ueda en la parte inferior y lógicamente

carga muc$o más rápido (ue si accedemos a Google "aps en la

red, por no tener interface ni cargar elementos adicionales.

Puedes probarlo online en este enlace o descargar el arc$ivo a tu

e(uipo.

o dees de probarlo.

escargar mapa

Agregar elementos al mapa de Google Maps

Podemos agregarle varios elementos a los mapas (ue necesitamos

insertar en una página web, para $acerlos más informativos,

atractivos y dinámicos.

Iremos mostrando el código y el eemplo práctico de un mapa, (ue

será necesario cargarlo con un evento, en este caso un botón.

os códigos podemos agregarlos al elemental (ue vimos másarriba, siempre antes de la llave de cierre de la función.

Agregar marcadores al mapa de Google Maps

os marcadores son pe(ue8os iconos de color (ue permiten

http://norfipc.com/codigos/mapa-miami-gmaps.phphttp://norfipc.com/codigos/mapa-miami-gmaps.php


6/11

precisar un punto e0acto, puede ser donde está centrado el mapa

o lugares espec)*cos.

Para agregar un marcador se emplea el obeto

6google.maps."ar%er6 y son obligatorias dos propiedades7

6position6 y 6map6.!n este eemplo situamos dos marcadores en un mapa de a

-abana, uno en el centro del mapa con el t)tulo 6ienda Carlos III6

(ue aparece al situar el ratón encima y el otro especi*cando las

coordenadas de la Eniversidad.

Para eso agregamos el siguiente código7

Ojo, las líneas antecedidas de dos barras inclinadas solo son

comentarios.

//marca1or con la ubicaci;n 1e la ni!ersi1a1!ar place = ne# google.maps.$at$ng(%+.-+'*'%.+'-)8

!ar marker = ne# google.maps.2arker(

position: place

title: $a ni!ersi1a1 1e la abana

map: map

7)8

//marca1or en el centro 1el mapa

!ar marker% = ne# google.maps.2arker(

position: map.get@enter()

title: $a tien1a @arlos 000 map: map

7)8

Presiona el botón para cargar un mapa creado con el código

anterior.

Cargar mapa

Agregar glo"os de información al mapa de Google Maps

!n los globos o cuadros de información se puede escribir te0to o

código para crear enlaces (ue condu'can a una página web.

1e pueden mostrar de forma estática o al dar clic en un marcador.

Para de*nirlos se emplea el obeto7 new


7/11

google.maps.InfoOindow24.

!n el siguiente eemplo mostramos un globo estático en la ienda

Carlos III y uno al dar un clic en el marcador de la Eniversidad.

e forma adicional se ampl)a el nivel de 'oom del mapa en este

caso.

//globo 1e informacion 1el marca1or %

!ar popup = ne# google.maps.0nfoAin1o#(

content: 9sta es la tien1a @arlos 0007)8

popup.open(map marker%)8

//globo 1e informacion al 1ar un clic en el marca1or %

function sho#0nfo()

map.setBoom(-)8 //aumenta el ,oom

map.set@enter(marker.get6osition())8

!ar contentCtring = bicaci;n 4ctual8

!ar info#in1o# = ne# google.maps.0nfoAin1o#(

content: 4Dui es 1on1e estu1io lee mas informaci;n en:

Eorfi6@7)8

info#in1o#.open(mapmarker)87

//5ispara accion al 1ar un clic en el marca1or

google.maps.e!ent.a11$istener(marker click sho#0nfo)8


anterior.Cargar mapa

Agregar imágenes o fotos al mapa de Google Maps

ambi+n podemos agregar fotos o imágenes en determinado punto

de un mapa.

o (ue $acemos en este caso es sustituir el icono del marcador por

una imagen (ue debe estar aloada en internet.

ecesitamos crear la variable 6image6 con el obeto7

google.maps."ar%erImage24, a continuación la ruta a la imagen y

sus dimensiones en pi0eles.


8/11

A$ora en el marcador con la ubicación de lugar donde mostrar la

imagen, agregamos el parámetro7 6icon7 image6

//0magen a mostrar con su ruta

!ar image = ne# google.maps.2arker0mage(

http://norfipc.com/img/cuba/cao*pajaros.jpeg ne# google.maps.Ci,e(-%F%))8

//2arca1or con la imagen anterior como icono

!ar place = ne# google.maps.$at$ng(%%.-'*F'.%G)8

!ar marker = ne# google.maps.2arker(

position: place

map: map

title: @ao $os 6ajaros un clic para !er a tamaHo

completo

icon: image animation: google.maps.4nimation.5367)8

//@argar la imagen en una nue!a pestaHa a un tamaHo maor

function sho#0nfo()

#in1o#.open(http://###.pinterest.com/pin/-%%I-GFF'%I%+/)7

google.maps.e!ent.a11$istener(marker click sho#0nfo)8

!n el eemplo a continuación se inserta un mapa de una 'ona

protegida de la fauna silvestre.

1e usa la función s$owInfo24 (ue permite al dar un clic en la

miniatura, abrir una nueva pesta8a del navegador con la imagen a

tama8o completo en Pinterest.


anterior.

Cargar mapa

#tras opciones para personali$ar los mapas de Google Maps

!n los mapas creados se muestran de forma predeterminada los

controles de navegación y el control de tipo de mapa, aun(ue se

pueden desactivar de ser necesario.


9/11

Para eso dentro de "ap:ptions se pueden agregar las siguientes

propiedades y especi*car su valor7

mapypeControl7 true H -abilitar el control de tipo de mapa.

navigationControl7 false J uitar los controles de navegación.

scaleControl7 false H In$abilitar el control de escala.street&iewControl7 true J uitar 1treet &iew.

1on solo algunos eemplos, otras opciones permiten modi*car el

uso del ratón, teclado, color de fondo del mapa, etc.

!ncuentra más información avan'ada sobre las clases, m+todos y

propiedades de la API de Google "aps en7 $ttp7MMcode.google.comM

Mostrar en un mapa la locali$ación geográfica del lector

1e puede mostrar en una página un mapa centrado en la ubicación

geográ*ca 2latitud, longitud4 de la persona (ue la carga en su

navegador.

Para eso es necesario usar un código (ue obtenga esta ubicación

usando la API de Geolocali'ación del O3C y centrar el mapa con

estos datos, es algo sencillo.

:bserva un eemplo práctico usando la siguiente $erramienta de

nuestro sitio y lee en otra página como $acerlo con todos los

detalles.

Mostrar varios mapas de Google Maps en una misma página

1e pueden insertar cual(uier cantidad de mapas en una mismapágina, pero para eso es necesario7

FH Crear distintos contenedores I& con un identi*cador diferentes

2mapF, map#, etc.4

#H eQearlo en el código (ue escribe cada mapa

2document.get!lement/yId26mapF64,

http://code.google.com/intl/es/apis/maps/documentation/javascript/reference.htmlhttp://norfipc.com/internet/saber-mi-localizacion-ubicacion-geografica.phphttp://norfipc.com/codigos/como-detectar-mostrar-localizacion-geografica-paginas-web.phphttp://code.google.com/intl/es/apis/maps/documentation/javascript/reference.htmlhttp://norfipc.com/internet/saber-mi-localizacion-ubicacion-geografica.phphttp://norfipc.com/codigos/como-detectar-mostrar-localizacion-geografica-paginas-web.php


10/11

document.get!lement/yId26map#64, etc.4

3H enombrar la variable map:ptions 2map:ptionsF, map:ptions#,

etc.4

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

ecibe en !"itter a diario, sugerencias sobre

contenido #til e interesante, solo síguenos.

$íguenos en %oogle& y te seguimos de 'uelta

Páginas relacionadas

✓ Como insertar mapas de Google en las páginas web usando la

API #

✓ Como insertar y mostrar los mapas de :pen1treet"ap en las

páginas web

✓ Como editar los mapas de :pen1treet"ap y agregar datos e

https://plus.google.com/+Norfipc/http://norfipc.com/web/como-insertar-mostrar-mapas-google-paginas-web.phphttp://norfipc.com/web/como-insertar-mostrar-mapas-google-paginas-web.phphttp://norfipc.com/web/como-insertar-mostrar-mapas-open-street-maps-paginas-web.htmlhttp://norfipc.com/web/como-insertar-mostrar-mapas-open-street-maps-paginas-web.htmlhttp://norfipc.com/web/como-editar-mapas-openstreetmap-agregar-datos-informacion.htmlhttps://plus.google.com/+Norfipc/http://norfipc.com/web/como-insertar-mostrar-mapas-google-paginas-web.phphttp://norfipc.com/web/como-insertar-mostrar-mapas-google-paginas-web.phphttp://norfipc.com/web/como-insertar-mostrar-mapas-open-street-maps-paginas-web.htmlhttp://norfipc.com/web/como-insertar-mostrar-mapas-open-street-maps-paginas-web.htmlhttp://norfipc.com/web/como-editar-mapas-openstreetmap-agregar-datos-informacion.html


11/11

información

✓ Convertir grados geográ*cos, minutos y segundos a decimales

✓ Códigos para detectar y mostrar la locali'ación geográ*ca en las

páginas web

✓ &er en un mapa de Google "aps mi locali'ación geográ*ca

✓ Como subir a Panoramio nuestras fotos y mostrarlas en Google

!art$

✓ Como guardar y restaurar la cac$+ de Google !art$

✓ Como mostrar grá*cos en las páginas web usando la API de

Google C$arts

✓ Códigos para mostrar el pa)s (ue corresponde a una dirección IP

Recesitas buscar algo en nuestro sitioS TEsa a GoogleU
http://norfipc.com/web/como-editar-mapas-openstreetmap-agregar-datos-informacion.htmlhttp://norfipc.com/herramientas/convertir-grados-geograficos-minutos-segundos-decimales.phphttp://norfipc.com/codigos/como-detectar-mostrar-localizacion-geografica-paginas-web.phphttp://norfipc.com/codigos/como-detectar-mostrar-localizacion-geografica-paginas-web.phphttp://norfipc.com/internet/saber-mi-localizacion-ubicacion-geografica.phphttp://norfipc.com/redes-sociales/como-subir-panoramio-fotos-mostrarlas-google-earth.phphttp://norfipc.com/redes-sociales/como-subir-panoramio-fotos-mostrarlas-google-earth.phphttp://norfipc.com/articulos/cache-google-earth.htmlhttp://norfipc.com/web/como-mostrar-graficos-paginas-web-usando-api-google-charts.phphttp://norfipc.com/web/como-mostrar-graficos-paginas-web-usando-api-google-charts.phphttp://norfipc.com/codigos/como-saber-pais-corresponde-direccion-ip-internet.phphttp://norfipc.com/web/como-editar-mapas-openstreetmap-agregar-datos-informacion.htmlhttp://norfipc.com/herramientas/convertir-grados-geograficos-minutos-segundos-decimales.phphttp://norfipc.com/codigos/como-detectar-mostrar-localizacion-geografica-paginas-web.phphttp://norfipc.com/codigos/como-detectar-mostrar-localizacion-geografica-paginas-web.phphttp://norfipc.com/internet/saber-mi-localizacion-ubicacion-geografica.phphttp://norfipc.com/redes-sociales/como-subir-panoramio-fotos-mostrarlas-google-earth.phphttp://norfipc.com/redes-sociales/como-subir-panoramio-fotos-mostrarlas-google-earth.phphttp://norfipc.com/articulos/cache-google-earth.htmlhttp://norfipc.com/web/como-mostrar-graficos-paginas-web-usando-api-google-charts.phphttp://norfipc.com/web/como-mostrar-graficos-paginas-web-usando-api-google-charts.phphttp://norfipc.com/codigos/como-saber-pais-corresponde-direccion-ip-internet.php

códigos para crear y mostrar mapas de google maps

Documents