NorfiPC
NorfiPC » Códigos » Mostrar mapas de Google Maps

Códigos para crear y mostrar mapas de Google Maps



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.
Códigos para crear y mostrar mapas de Google Maps
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.
A diferencia de la versión anterior, la API v3 se puede usar sin poseer una clave o key, salvo para propósitos más avanzados.
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.



¿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>
Presiona el siguiente botón para cargar un pequeño mapa en esta página, creado con un código similar al anterior.

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.
Funciones del código para crear un mapa de Google Maps
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>



Archivo HTML para cargar mapas de Google Maps en la PC


El archivo que contiene el código 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 ubicación como se explicó anteriormente.
Incluye un cuadro de búsqueda en la parte inferior y lógicamente carga mucho más rápido 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.




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
	, });
Presiona el botón para cargar un mapa creado con el código anterior.




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);
Presiona el botón para cargar un mapa creado con el código anterior.


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);	
En el ejemplo a continuación se inserta un mapa de una zona protegida de la fauna silvestre.
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.
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



Sígueme en las redes sociales




Buscar en este sitio

 
Inicio | Mapa del sitio | Sobre mí | RSS