Mostrar dirección en Google Maps con Javascript
En muchas Webs habrás visto un mapa de localización geográfica donde se puede ver la situación o lugar terrestre donde se encuentra la institución o empresa propietaria de la página Web.
Esto se puede conseguir fácilmente usando Javascript con la librería de Google Maps y el sistema de coordenadas geográficas.
Todas las direcciones del mundo tiene asociada unas coordenadas geográficas que no son más que un sistema de referencia que utiliza las dos coordenadas angulares: latitud (Norte y Sud) y longitud (Este y Oeste).
En Google Maps cuando vas a buscar una dirección siempre escribes la dirección en concreto pero Google al buscarla, la convierte a coordenada (latitud y longitud) para mostrar el mapa. Pura matemática.
En este artículo vamos a ver como crear un mapa y añadirle un marcador para mostrar información de la empresa o de la localización en el punto indicado.
Lo primero que tendremos que hacer es incluir la librería de Google Maps en la cabecera o <head> de nuestra página:
Dentro del <body>, allí donde queramos visualizar el mapa añadiremos el contenedor donde se depositará el mapa. En el caso de nuestro ejemplo:
Seguidamente a nuestro contenedor o antes de la etiqueta de cierre </body> añadiremos la siguiente función con su llamada:
<script type="text/javascript">
function showGoogleMaps()
{
//Creamos el punto a partir de la latitud y longitud de una dirección:
var point = new google.maps.LatLng('41.397122', '2.152873');
//Configuramos las opciones indicando zoom, punto y tipo de mapa
var myOptions = {
zoom: 15,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//Creamos el mapa y lo asociamos a nuestro contenedor
var map = new google.maps.Map(document.getElementById("showMap"), myOptions);
//Mostramos el marcador en el punto que hemos creado
var marker = new google.maps.Marker({
position:point,
map: map,
title: "Nombre empresa - Calle Balmes 192, Barcelona"
});
}
showGoogleMaps();
</script>Es una función que hemos preparado donde inicialmente estamos creando el punto o coordenada compuesto por la latitud y la longitud.
La longitud y latitud de una dirección se pueden conseguir fácilmente siguiendo estas indicaciones: Buscar y obtener coordenadas
Seguidamente configuramos unas cuantas opciones. En nuestro caso, tan solo el zoom, el punto y el tipo de mapa. En la API de Google Maps podrás ver todas las opciones disponibles.
Y por último definimos nuestro marcador con la información que deseemos obteniendo como resultado el mapa de la siguiente imagen:
Autor
¿Buscas trabajo de programador?
4 respuestas a “Mostrar dirección en Google Maps con Javascript”
Deja una respuesta
2 artículos que te podrían interesar
Ver más sobre
Excelente explicación, muchas gracias!!!
Quisiera preguntar me lo abre en modo FOR DEVELOPMENT y puse las coordenadas de mi residencia
lo abre con fondo gris y me pregunta si soy el propietario del sitio web y no entiendo a que se refiere
Estoy desarrollando una aplicacion que se dedica a cobros de usuarios y esto seria el complemento para ubicar sus direcciones
Hola,
Muchas gracias por tu mensaje.
Deberás revisar tu cuenta de Google y revisar en detalle. Posiblemente, actualmente se tenga que pagar por este servicio.
Saludos
Excelente, totalmente claro
[…] Source code […]