Códigos para crear y mostrar mapas de Google Maps
Actualizado: 05 de diciembre del 2022
Por: Norfi Carrodeguas
Por: Norfi Carrodeguas
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 ejemplos prácticos.
En otra página de este sitio mostramos varios ejemplos de cómo insertar mapas de Google Maps en las páginas de un sitio, pero usando la anterior versión 2 de la API de Google.
Esta versión se mantiene funcional, pero ahora solo se entregan claves o key de la para la nueva V3.
Esta nueva versión es más ventajosa, principalmente porque los mapas cargan mucho más rápido, factor importantísimo para mostrarlos en dispositivos portables.
Además muchas opciones que había que especificarlas manualmente en el código, ahora están implementadas de forma predeterminada, por lo que todo se hace más sencillo.
Este tutorial no es solo para los que necesitan insertar mapas en un blog o sitio web, también 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 artículo.
En una página o blog podemos mostrarlos y agregarles marcadores, globos de información y hasta imágenes y fotos. Además definir acciones al dar un clic en cualquier elemento, de forma similar a como sucede en la web de Google Maps.
Es una opción excelente para promocionar gratis un negocio, para mostrar la ubicación de lugares interesantes, usos turísticos, educativos, etc.
Para el que necesita consultar regularmente zonas de un mapa, puede descargar un archivo HTML y modificarlo a su gusto.
Crear un mapa elemental o básico de Google Maps es algo sencillo.
Solo necesitamos conocer las coordenadas donde deseamos centrarlo en formato decimal, el tipo de mapa a mostrar (Callejero, Satélite, Mixto o Relieve) y el nivel de zoom.
Son dos códigos, 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 página.
En este ejemplo es un contenedor o bloque identificado como "map".
Los códigos necesarios son los siguientes:
Más abajo puedes descargar un archivo HTML listo para usar en la PC con estos valores o lee como cambiarlos a tu gusto.
El primer script que carga la API no es necesario tocarlo.
El parámetro "callback=iniciar" inicia la función que escribe el mapa, solo después que el archivo de la API ha cargado completamente.
MapOptions contiene los valores de lo que se escribirá en el mapa.
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 página por limitaciones usan 500 pixeles de ancho por 250 pixeles de altura:
<div id="map" style="width:500px;height:250px;"></div>
Podemos agregarle varios elementos a los mapas que necesitamos insertar en una página web, para hacerlos más informativos, atractivos y dinámicos.
Iremos mostrando el código y el ejemplo práctico de un mapa, que será necesario cargarlo con un evento, en este caso un botón.
Los códigos podemos agregarlos al elemental que vimos más arriba, siempre antes de la llave de cierre de la función.
Los marcadores son pequeños iconos de color que permiten precisar un punto exacto, puede ser donde está centrado el mapa o lugares específicos.
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 título "Tienda Carlos III" que aparece al situar el ratón encima y el otro especificando las coordenadas de la Universidad.
Para eso agregamos el siguiente código:
Ojo, las líneas antecedidas de dos barras inclinadas solo son comentarios.
En los globos o cuadros de información se puede escribir texto o código para crear enlaces que conduzcan a una página web.
Se pueden mostrar de forma estática o al dar clic en un marcador.
Para definirlos se emplea el objeto: new google.maps.InfoWindow().
En el siguiente ejemplo mostramos un globo estático en la Tienda Carlos III y uno al dar un clic en el marcador de la Universidad.
De forma adicional se amplía el nivel de zoom del mapa en este caso.
También podemos agregar fotos o imágenes 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 continuación la ruta a la imagen y sus dimensiones en pixeles.
Ahora en el marcador con la ubicación de lugar donde mostrar la imagen, agregamos el parámetro: "icon: image"
Se usa la función showInfo() que permite al dar un clic en la miniatura, abrir una nueva pestaña del navegador con la imagen a tamaño completo en Pinterest.
Presiona el botón para cargar un mapa creado con el código anterior.
En los mapas creados se muestran de forma predeterminada los controles de navegación 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:
Encuentra más información avanzada sobre las clases, métodos y propiedades de la API de Google Maps en: http://code.google.com/
Se puede mostrar en una página un mapa centrado en la ubicación geográfica (latitud, longitud) de la persona que la carga en su navegador.
Para eso es necesario usar un código que obtenga esta ubicación usando la API de Geolocalización del W3C y centrar el mapa con estos datos, es algo sencillo.
Observa un ejemplo práctico usando la siguiente herramienta de nuestro sitio y lee en otra página como hacerlo con todos los detalles.
Se pueden insertar cualquier cantidad de mapas en una misma página, pero para eso es necesario:
1- Crear distintos contenedores DIV con un identificador diferentes (map1, map2, etc.)
2- Reflejarlo en el código que escribe cada mapa (document.getElementById("map1"), document.getElementById("map2"), etc.)
3- Renombrar la variable mapOptions (mapOptions1, mapOptions2, etc.)
Esta versión se mantiene funcional, pero ahora solo se entregan claves o key de la para la nueva V3.
Esta nueva versión es más ventajosa, principalmente porque los mapas cargan mucho más rápido, factor importantísimo para mostrarlos en dispositivos portables.
Además muchas opciones que había que especificarlas manualmente en el código, ahora están implementadas de forma predeterminada, por lo que todo se hace más sencillo.
Actualización
Este artículo fue creado para mostrar como insertar mapas de Google en las páginas de un sitio web, usando la API gratis de Google.
El 2 de mayo del 2018 Google anuncio la implementación de Google Maps Platform.
Ahora se requiere facturar para poder obtener la API que permita usar el servicio.
Los sitios con pocas peticiones podrán obtener un crédito gratis, pero no obstante tendrán que facturar con una tarjeta de crédito.
Los códigos de ejemplo que comparto, a partir de este momento se podrán usar, pero especificando una clave de API.
Siempre queda la opción de insertar los mapas en las páginas, en un iframe o marco.
Este artículo fue creado para mostrar como insertar mapas de Google en las páginas de un sitio web, usando la API gratis de Google.
El 2 de mayo del 2018 Google anuncio la implementación de Google Maps Platform.
Ahora se requiere facturar para poder obtener la API que permita usar el servicio.
Los sitios con pocas peticiones podrán obtener un crédito gratis, pero no obstante tendrán que facturar con una tarjeta de crédito.
Los códigos de ejemplo que comparto, a partir de este momento se podrán usar, pero especificando una clave de API.
Siempre queda la opción de insertar los mapas en las páginas, en un iframe o marco.
¿Cómo usar los mapas de Google?
Este tutorial no es solo para los que necesitan insertar mapas en un blog o sitio web, también 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 artículo.
En una página o blog podemos mostrarlos y agregarles marcadores, globos de información y hasta imágenes y fotos. Además definir acciones al dar un clic en cualquier elemento, de forma similar a como sucede en la web de Google Maps.
Es una opción excelente para promocionar gratis un negocio, para mostrar la ubicación de lugares interesantes, usos turísticos, educativos, etc.
Para el que necesita consultar regularmente zonas de un mapa, puede descargar un archivo HTML y modificarlo a su gusto.
El código para crear un mapa de Google Maps
Crear un mapa elemental o básico de Google Maps es algo sencillo.
Solo necesitamos conocer las coordenadas donde deseamos centrarlo en formato decimal, el tipo de mapa a mostrar (Callejero, Satélite, Mixto o Relieve) y el nivel de zoom.
Son dos códigos, 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 página.
En este ejemplo es un contenedor o bloque identificado como "map".
Los códigos 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>
Más abajo puedes descargar un archivo HTML 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
El primer script que carga la API no es necesario tocarlo.
El parámetro "callback=iniciar" inicia la función que escribe el mapa, solo después 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 números decimales separados por coma, no grados sexagesimales como es habitual en los mapas.
En caso de solo tener la ubicación 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 país, 3 para una ciudad, 4 para detalles, el máximo es 6.
Usa la siguiente herramienta en nuestro sitio: Convertir grados, minutos y segundos a decimales
zoom: El nivel de zoom o resolución inicial. Un número 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 satélite.
HYBRID - Una combinación de los dos anteriores.
TERRAIN – Muestra el relieve físico, elevaciones del terreno y corrientes de agua.
El primer valor es la latitud y el siguiente la longitud.
Se expresan usando números decimales separados por coma, no grados sexagesimales como es habitual en los mapas.
En caso de solo tener la ubicación 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 país, 3 para una ciudad, 4 para detalles, el máximo es 6.
Usa la siguiente herramienta en nuestro sitio: Convertir grados, minutos y segundos a decimales
zoom: El nivel de zoom o resolución inicial. Un número 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 satélite.
HYBRID - Una combinación de los dos anteriores.
TERRAIN – Muestra el relieve físico, 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 página por limitaciones usan 500 pixeles de ancho por 250 pixeles de altura:
<div id="map" style="width:500px;height:250px;"></div>
Agregar elementos al mapa de Google Maps
Podemos agregarle varios elementos a los mapas que necesitamos insertar en una página web, para hacerlos más informativos, atractivos y dinámicos.
Iremos mostrando el código y el ejemplo práctico de un mapa, que será necesario cargarlo con un evento, en este caso un botón.
Los códigos podemos agregarlos al elemental que vimos más arriba, siempre antes de la llave de cierre de la función.
Agregar marcadores al mapa de Google Maps
Los marcadores son pequeños iconos de color que permiten precisar un punto exacto, puede ser donde está centrado el mapa o lugares específicos.
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 título "Tienda Carlos III" que aparece al situar el ratón encima y el otro especificando las coordenadas de la Universidad.
Para eso agregamos el siguiente código:
Ojo, las líneas antecedidas de dos barras inclinadas solo son comentarios.
//marcador con la ubicación 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
, });
Agregar globos de información al mapa de Google Maps
En los globos o cuadros de información se puede escribir texto o código para crear enlaces que conduzcan a una página web.
Se pueden mostrar de forma estática o al dar clic en un marcador.
Para definirlos se emplea el objeto: new google.maps.InfoWindow().
En el siguiente ejemplo mostramos un globo estático en la Tienda Carlos III y uno al dar un clic en el marcador de la Universidad.
De forma adicional se amplía 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 = 'Ubicación Actual';
var infowindow = new google.maps.InfoWindow({
content: 'Aqui es donde estudio, lee mas información 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);
Agregar imágenes o fotos al mapa de Google Maps
También podemos agregar fotos o imágenes 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 continuación la ruta a la imagen y sus dimensiones en pixeles.
Ahora en el marcador con la ubicación de lugar donde mostrar la imagen, agregamos el parámetro: "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 tamaño completo'
, icon: image
, animation: google.maps.Animation.DROP,});
//Cargar la imagen en una nueva pestaña a un tamaño mayor
function showInfo() {
window.open('http://www.pinterest.com/pin/126241595778264236/')}
google.maps.event.addListener(marker, 'click', showInfo);
Se usa la función showInfo() que permite al dar un clic en la miniatura, abrir una nueva pestaña del navegador con la imagen a tamaño completo en Pinterest.
Presiona el botón para cargar un mapa creado con el código anterior.
Otras opciones para personalizar los mapas de Google Maps
En los mapas creados se muestran de forma predeterminada los controles de navegación 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 navegación.
scaleControl: false - Inhabilitar el control de escala.
streetViewControl: true – Quitar Street View.
Son solo algunos ejemplos, otras opciones permiten modificar el uso del ratón, teclado, color de fondo del mapa, etc.navigationControl: false – Quitar los controles de navegación.
scaleControl: false - Inhabilitar el control de escala.
streetViewControl: true – Quitar Street View.
Encuentra más información avanzada sobre las clases, métodos y propiedades de la API de Google Maps en: http://code.google.com/
Mostrar en un mapa la localización geográfica del lector
Se puede mostrar en una página un mapa centrado en la ubicación geográfica (latitud, longitud) de la persona que la carga en su navegador.
Para eso es necesario usar un código que obtenga esta ubicación usando la API de Geolocalización del W3C y centrar el mapa con estos datos, es algo sencillo.
Observa un ejemplo práctico usando la siguiente herramienta de nuestro sitio y lee en otra página como hacerlo con todos los detalles.
Mostrar varios mapas de Google Maps en una misma página
Se pueden insertar cualquier cantidad de mapas en una misma página, pero para eso es necesario:
1- Crear distintos contenedores DIV con un identificador diferentes (map1, map2, etc.)
2- Reflejarlo en el código que escribe cada mapa (document.getElementById("map1"), document.getElementById("map2"), etc.)
3- Renombrar la variable mapOptions (mapOptions1, mapOptions2, etc.)
Páginas relacionadas
✓ Como insertar los mapas de Google en una página con un iframe
✓ Como insertar mapas de Google en las páginas web usando la API 2
✓ Como insertar y mostrar los mapas de OpenStreetMap en las páginas web
✓ Los mejores servicios de mapas de internet
✓ Convertir grados geográficos, minutos y segundos a decimales
✓ Códigos para detectar y mostrar la localización geográfica en las páginas web
✓ Guardar o descargar un mapa como una imagen
✓ Como insertar mapas de Google en las páginas web usando la API 2
✓ Como insertar y mostrar los mapas de OpenStreetMap en las páginas web
✓ Los mejores servicios de mapas de internet
✓ Convertir grados geográficos, minutos y segundos a decimales
✓ Códigos para detectar y mostrar la localización geográfica en las páginas web
✓ Guardar o descargar un mapa como una imagen
Comparta esta página
Facebook
Twitter