Agregue un mapa personalizado a su sitio web

Agregue un mapa personalizado a su sitio web

Una vez que se carga la API de Google Maps, llama al initMap función que inicializa la tarjeta. Si desglosamos nuestro código aún más, usamos un div vacío con un ID de map para declarar dónde queremos que esté el mapa.

let map; function initMap() { map = new google.maps.Map( document.getElementById( 'map' ), { center: { lat: 51.513329, lng: -0.088950 }, zoom: 14 }); }

En nuestro JavaScript, primero definimos un map variable fuera de la función, por lo que es parte del alcance global para que podamos modificar el mapa más tarde. En nuestro initMap función, primero declaramos un nuevo mapa de Google y lo configuramos para que se muestre llamando al elemento con la identificación de map. Después de eso, especificamos nuestras opciones, que son el centro del mapa y el nivel de zoom.

Usamos las coordenadas de la ciudad de Londres, un monumento histórico en el centro de Londres, como centro del mapa. Más adelante, veremos cómo puede usar la API de Maps para encontrar las coordenadas de cualquier ubicación en el mapa. Pero por ahora, si tiene curiosidad, puede usar latlong.net para encontrar rápidamente los datos de contacto de cualquier dirección.

Tipos de cartas

Ahora que tenemos un mapa básico, podemos echar un vistazo a las opciones de personalización que nos brinda la API de JavaScript de Google Maps. La primera opción que vamos a utilizar es tipo de tarjeta. Google Maps admite cuatro tipos de mapas, a saber:

  • hoja de ruta: el mapa predeterminado que suele ver.
  • satélite: vista de satélite de Google Maps y Google Earth, si está disponible.
  • híbrido: una combinación de mapa de ruta y vista de satélite.
  • terreno: un mapa basado en información del terreno, como montañas y valles.

En nuestras opciones de tarjeta podemos agregar un mapType propiedad para seleccionar la vista que queremos, así:

map = new google.maps.Map(document.getElementById( 'map' ), { center: { lat: 51.513329, lng: -0.08895 }, zoom: 14, mapTypeId: 'hybrid' });

Para nuestro ejemplo, estamos usando una tarjeta híbrida. Puede experimentar con diferentes tipos para ver cuál es el adecuado para su caso de uso.

Opciones de mapa

Después del tipo de tarjeta al que llegamos pedidos de tarjetas. Google Maps le permite utilizar cualquiera de sus seis comandos en sus mapas. Puedes encontrar una lista de controles en su sitio web.

Puede especificar el control que desea usar y su ubicación si es necesario, así:

map = new google.maps.Map(document.getElementById( 'map' ), { center: { lat: 51.513329, lng: -0.08895 }, zoom: 14, mapTypeId: 'hybrid', scaleControl: true, fullscreenControlOptions: { position: google.maps.ControlPosition.RIGHT_BOTTOM }, });

Permitimos scaleControl, que muestra la escala del mapa en la parte inferior junto a los derechos de autor de Google, declarando que es VERDADERO. Y en la siguiente línea cambiamos la apariencia de fullscreenControl desde su posición predeterminada en la parte superior derecha a la parte inferior derecha utilizando el fullscreenControlOptions bienes. Asimismo, puede ajustar la posición de otros controles.

¿Quiere un control que haga más que los controles integrados? No se preocupe, Google Maps también le permite crear órdenes personalizadas para su mapa.

¡Hablemos de marcadores!

Agregar un marcador

Los marcadores son increíbles y le permiten crear muchas aplicaciones interactivas con un mapa. Por ejemplo, algunos sitios de reserva de hoteles utilizan marcadores para mostrarle la ubicación de los hoteles en un mapa. Y también son muy fáciles de agregar.

Vamos agregar un marcador en London Bridge con el siguiente código:

let marker = new google.maps.Marker({ position: { lat: 51.506821, lng: -0.0879 }, map: map, title: 'The London Bridge' });

Como puede ver arriba, nuestro código de etiqueta tiene tres propiedades. El primero son las coordenadas. Después de eso pasamos la variable del mapa donde almacenamos nuestro mapa al principio, y finalmente pasamos el título del marcador.

También puede pasar la URL a un icono de marcador personalizado con una propiedad de icono en el bloque de código de arriba.

Agregar ventana de información

Puede encontrar algo que falta en nuestros marcadores. Por lo general, cuando hace clic en un marcador en el mapa, le muestra una ventana emergente con más detalles. Esta ventana emergente es un componente diferente en sí mismo llamado InfoWindow.

Google Maps con un marcador personalizado.
Google Maps con un marcador personalizado.

Afortunadamente para nosotros, es muy fácil adjuntar una ventana de información a nuestro marcador.

let infoWindow = new google.maps.InfoWindow({ content: '<h2>London Bridge</h2>' }); marker.addListener( 'click', function() { infoWindow.open( map, marker ); });

En primer lugar, creamos un nuevo infoWindow variable que almacena nuestro componente InfoWindow. Solo le pasamos una propiedad de contenido que contiene el HTML que muestra cuando se hace clic. Después de eso, agregamos un detector de eventos al hacer clic a nuestro marcador, que le indica que abra la ventana de información cuando haga clic en el marcador.

Así, puede usar un marcador y una ventana de información para crear experiencias interactivas con su mapa.

Ahora es el momento de hacer una pausa por un segundo y recordar el progreso que hemos logrado. En solo 30 líneas de código, usamos la API de JavaScript de Google Maps para crear un mapa personalizado con marcadores y cuadros de información. Vale la pena señalar lo fácil que es usar la API de Google Maps para hacer cosas que habrían parecido difíciles para un principiante.

Oyentes de eventos y modificaciones dinámicas

Los marcadores y las opciones de mapas no son necesariamente las razones por las que alguien podría deshacerse de un complemento de Google Map prediseñado y cambiar a la API. Son prometedores, pero muchos complementos ya ofrecen estas funciones. Probemos algo que no es posible con un complemento.

Modificación dinámica

Google Maps tiene muchos métodos para interactuar con la tarjeta y modificar su comportamiento. Si está acostumbrado a trabajar con DOM, no debería tener muchos problemas con estos métodos.

Algunos de estos métodos le permiten obtener información del mapa, como getCenter, que devuelve las coordenadas del centro del mapa. Y de manera similar, algunos le permiten modificar el comportamiento, como setCenter, que cambia el centro del mapa.

Existen muchos métodos y debería echarles un vistazo a todos para descubrir qué es posible con la API. Usemos uno de estos métodos con nuestro mapa.

Podemos agregar un botón a nuestro ejemplo que devuelva el centro de nuestro mapa a la ciudad de Londres.

Primero, necesitamos agregar un botón a nuestro código:

<button id="bringToCenter">Bring to Center</button>

Ahora adjuntamos un detector de eventos a nuestro botón que activa el setCenter método:

const centerButton = document.querySelector( '#bringToCenter' ); centerButton.addEventListener( 'click', function( e ) { e.preventDefault(); map.setCenter({ lat: 51.513329, lng: -0.08895 }); });

Y es todo. Simple, ¿verdad? Hemos utilizado map.setCenter en el cual map es la variable que declaramos al principio para contener nuestro mapa.

Debería intentar experimentar con diferentes métodos y explorar los límites de la API.

Oyentes de eventos

Otro concepto con el que los desarrolladores de JavaScript pueden estar familiarizados es el de oyentes de eventos. Puede asociar acciones con eventos específicos, lo que significa que cuando ocurre un evento, como un cambio de centro, esas acciones se activan.

Considere uno de los ejemplos en la documentación de Google Maps para obtener las coordenadas del mapa cuando hace clic en cualquier parte de él.

let infoWindowLatLang; map.addListener( 'click', function( mapsMouseEvent ) { if ( infoWindowLatLang ) infoWindowLatLang.close(); infoWindowLatLang = new google.maps.InfoWindow({ position: mapsMouseEvent.latLng }); infoWindowLatLang.setContent( mapsMouseEvent.latLng.toString() ); infoWindowLatLang.open( map ); });

Como puede ver, el concepto es prácticamente el mismo que el funcionamiento de los detectores de eventos en JavaScript. Primero, adjuntamos un detector de eventos onClick a nuestro mapa. En nuestro detector de eventos, obtenemos las coordenadas de dónde hace clic el usuario y las colocamos en una ventana de información.

Si marca el Bloque de mapa de Google de Otter, puede ver cómo usamos estos métodos y detectores de eventos para hacer cosas como arrastrar y soltar marcadores y eliminar un marcador haciendo clic en él.

Crea un control personalizado

Y finalmente, terminamos este artículo con un ejemplo de construcción. cheques personalizados para su Google Maps.

Como se indicó anteriormente, estamos creando un botón personalizado que agrega un marcador al centro del mapa. Aunque el código para esto parece un poco complicado, es sencillo.

Primero, estamos construyendo una función similar a un botón, que tiene un detector de eventos para agregar un marcador al centro del mapa.

Debes reemplazar YOUR_API_KEY en el bloque de código de arriba con su clave API. Muestra un mapa de Google simple con la latitud y la longitud dadas como centro.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba