Cómo crear un mapa de Google personalizado con elegantes marcadores SVG

Como de costumbre, para entender mejor lo que vamos a construir, mira el página de demostración. Asegúrese de hacer clic en las ubicaciones o en los marcadores del mapa.

Estructura del proyecto

Para este ejercicio, nuestra demostración personalizada de Google Map estará disponible en GitHub (no en CodePen). Aquí esta la estructura del proyecto:

1. Andamiaje del proyecto

Antes de comenzar a crear nuestro proyecto (que se verá como una mini aplicación), hay algunas cosas que debemos tener en cuenta.

Obtenga una clave API de Google Maps

Como primera y obligatoria, deberíamos obtener una clave API de Google Maps. Para ello, debemos seguir estas instrucciones y configure un proyecto en Google Cloud Console con el API de JavaScript de mapas activado.

Para esta demostración, tomaremos prestada una clave API de una serie antigua pero aún popular llamada API de Google Maps para diseñadores. También hay un asociado manifestación de donde podemos extraer la API.

advertencia
¡Esta clave API de demostración tiene límites de uso! Asegúrese de registrarse para obtener su propia clave API y reemplace la del ejemplo.

Por último, pero no menos importante, tan pronto como configure un proyecto de este tipo en Google Cloud Console, siempre es aconsejable restringir la API asociada. Por ejemplo, puede tener un solo proyecto y una API que comparte con todos los clientes de su sitio web. En tal caso, puede restringir las solicitudes de API a sitios web específicos.

Toma algunos datos

Para crear los marcadores y hacer que nuestro proyecto sea lo más realista posible, necesitaremos algunos datos del mundo real. Con esto en mente, como se mencionó anteriormente, tomaremos 13 de las ubicaciones de las oficinas de Adobe y las fijaremos en nuestro mapa.

Como veremos más adelante, cada ubicación debe incluir su latitud y longitud. Como esta información no está disponible en página de contacto de adobeusaremos el LangLong.net sitio web para recuperar sus coordenadas. Algunas de las coordenadas pueden no ser perfectamente precisas, pero entiendes el punto.

Coge algunos iconos

Para mejorar la apariencia de la demostración, necesitaremos algunos íconos.

Elementos de Envato proporciona cientos de iconos de mapa y navegación diferentes para nuestras necesidades. En este caso, elegiremos un conjunto de iconos que sigue un estilo de línea rellena. Como vimos en la estructura del proyecto, los íconos SVG seleccionados vivirán dentro del img carpeta.

El paquete de íconos que vamos a usar

Estos son los íconos SVG que usaremos en nuestro proyecto:

iconos svg para mapa de google personalizado

Incluir archivos Bootstrap

Por último, aunque no es obligatorio, para acelerar el proceso de desarrollo, también incluiremos Bootstrap en nuestro proyecto siguiendo el enfoque de CDN, como se describe en esta página.

2. Definir el marcado de la página

Ahora que tenemos todo configurado, veamos nuestro marcado.

Archivos requeridos

A continuación, puede ver el marcado inicial con todos los archivos Bootstrap necesarios, nuestros archivos y el script etiqueta para la API de JavaScript de Google Maps:

Solo echa un vistazo a la script etiqueta para la API de JavaScript de Google Maps. Verás dos atributos:

  • los src El atributo incluye la llamada base a la API de JavaScript de Google Maps junto con tres parámetros: dos obligatorios y uno opcional. Lo requerido key El parámetro almacena nuestra clave API tal como se recupera de Google Cloud Console. el opcional language El parámetro determina el idioma del mapa (nombres de ubicación, etiquetas, etc.). Lo requerido callback El parámetro define el nombre de la función global que se activará una vez que la API de JavaScript de Maps finalice su carga.
  • los async El parámetro le dice al navegador que descargue y ejecute el script de forma asíncrona.

Diseño personalizado de mapas de Google

Antes de echar un vistazo más de cerca a los elementos de la página, analicemos los requisitos de diseño.

  • En pantallas móviles (<768px), el diseño será así:
El diseño móvil
  • En pantallas medianas y grandes (≥768px), habrá dos columnas de igual ancho:
El diseño del escritorio
  • En cada caso, el mapa cubrirá la altura de la ventana.

Aquí está el marcado asociado lleno de clases auxiliares de Bootstrap:

Lo más importante, observe dos cosas:

  • Cada enlace de ubicación, que representa una ubicación de Adobe, viene con el data-index atributo. Tenga en cuenta este atributo, ya que lo usaremos más adelante.
  • Hay un elemento vacío con el map IDENTIFICACIÓN. Esto incluirá los contenidos del mapa y se generará a través de JavaScript.

3. Agregar el JavaScript

En este punto, estamos listos para construir la funcionalidad central de nuestro proyecto personalizado de Google Map. ¡Vamos a hacerlo!

Ubicaciones de las tiendas

Capturamos las ubicaciones en el marcado, pero también las necesitamos en JavaScript. Entonces, almacenémoslos en una matriz como esta:

Tenga en cuenta que conservamos el orden en que aparecen las ubicaciones tanto en el marcado como en el objeto. Un lugar con la data-index="0" en el marcado denota que la misma ubicación debe estar en el primer lugar de la pins formación.

Nota: en un escenario del mundo real, probablemente habría un lenguaje de fondo para administrar todas las ubicaciones en un solo lugar. Por ejemplo, si está familiarizado con WordPress y el ACFPRO complemento, probablemente tendrá un contenido flexible o un reloj de repetición campo donde pones todas las ubicaciones. En su interior, habrá campos adicionales para administrar los detalles de la ubicación. Especialmente para obtener las coordenadas de cada ubicación, puede tener una Mapa de Google campo. Entonces, a través de la wp_localize_script() puede pasar las ubicaciones en JavaScript y crear un objeto similar al que tenemos aquí.

Inicializar mapa de Google personalizado

A continuación, inicializaremos el mapa a través del initMap() que mostramos antes.

Nuestro mapa tendrá las siguientes personalizaciones:

  • Tendrá su centro en Londres, Reino Unido.
  • tendrá zoom: 3 para ver tantas ubicaciones como sea posible de forma predeterminada.
  • Personalizaremos sus estilos predeterminados a través de esta herramientapero siempre puedes optar por cestilo de mapa basado en ruido. En particular, cambiaremos el color predeterminado del agua de esta manera:
Google Maps: estilos personalizados frente a estilos predeterminados

Con todo lo anterior en mente, aquí está el cuerpo inicial de nuestra función:

Crear marcadores de mapas de Google

Dentro de initMap() función, también llamaremos a la createMarkers() función para crear los marcadores de ubicación:

Dentro de esta función, haremos lo siguiente:

  • Inicialice una ventana de información que mostrará información sobre un marcador cada vez que alguien haga clic en él.
  • Reemplace el ícono de marcador predeterminado con uno SVG personalizado.
marcador personalizado vs marcador predeterminado
  • Recorra las ubicaciones y colóquelas en el mapa según sus coordenadas. Además, haz que aparezcan con una animación DROP.
  • Guarde cada instancia de marcador en el markers formación. Veremos por qué más tarde.

Aquí está la declaración de la función:

Alternar ventana de información

Dentro de createMarkers() función, también registraremos un click evento para cada marcador.

Cada vez que un usuario haga clic en un marcador, realizaremos las siguientes acciones:

  • Rellene el contenido de la ventana de información con contenidos asociados con este marcador gracias a la createInfoContent() función.
  • Establezca el centro del mapa en función de las coordenadas de este marcador.
  • Mostrar la ventana de información.
  • Quitar el active class desde cualquier enlace de ubicación asociado, si lo hay.
  • Encuentre el enlace de ubicación cuyo índice coincida con el índice de este marcador y asígnele el active clase. Esto le dará al enlace de destino un color de fondo azul.
El estado activo
  • Desplazamiento suave hasta el enlace de la ubicación correspondiente.

Llenar ventana de información

Como dijimos, el trabajo del createInfoContent() La función será alimentar la ventana de información con el contenido del marcador en el que se hizo clic.

Usaremos marcado directo para mostrar el contenido de cada marcador. Dado que algunas ubicaciones no siempre tienen todos los detalles, aplicaremos algunas comprobaciones para asegurarnos de que nuestro marcado no se infle.

Cómo se verá la ventana de información

Aquí está la declaración de la función:

Discutimos lo que debería suceder cuando se hace clic en un marcador. Pero también necesitamos aplicar alguna funcionalidad cuando sucede lo contrario. En otras palabras, queremos asegurarnos de que cada vez que un usuario haga clic en un enlace de ubicación, se mostrará el marcador correspondiente. hizo clic

Otra función, la showLocations() one, será responsable de manejar esta funcionalidad. Esto también vivirá dentro del initMap() función.

Entonces, cada vez que se haga clic en un enlace de ubicación, realizaremos las siguientes acciones:

  • Cancele su comportamiento predeterminado.
  • Quitar el active clase desde cualquier enlace de ubicación, si lo hay.
  • Añade el active clase a este enlace.
  • Desplazamiento suave al mapa.
  • Encuentre el marcador cuyo índice coincida con el índice de este enlace y active su click evento. Podemos apuntar al marcador especificado porque lo hemos almacenado en un paso anterior dentro del markers formación.

Aquí está la definición de la función:

Conclusión

¡Y hemos terminado! Este fue un viaje bastante largo, pero espero que lo hayas disfrutado y que te haya ayudado a mejorar tus habilidades con respecto a la API de JavaScript de Google Maps.

Una vez más, ¡no olvide poner su propia clave para la prueba del proyecto en vivo! Aquí esta la enlace del proyecto.

Las cosas no se detienen aquí. Podemos continuar mejorando/ampliando este proyecto haciendo varias cosas, por ejemplo:

  • Colóquelos en grupos de marcadores de mesa para agrupar marcadores. Esta es una buena adición, especialmente para los casos en los que hay muchos marcadores.
  • Dinamice este proyecto utilizando WordPress y ACF PRO, como se explica en algunas secciones anteriores. Dependiendo de cómo vaya este proyecto, probablemente volveré con un tutorial de este tipo en el futuro 🙂
  • Restrinja los límites del mapa para evitar mostrar un área gris durante el arrastre o el alejamiento.
El área gris que aparece al arrastrar y alejar

Como siempre, ¡muchas gracias por leer!

Deja una respuesta

Tu dirección de correo electrónico no será publicada.