Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Google Maps
Webdesign

Cómo agregar ubicaciones de sucursales de marca a Google Maps

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by CYC (you can also view the original English article)

Final product image
What You'll Be Creating

El plan

En este tutorial analizaremos el proceso de creación de un mapa de marcas de Google para un cliente imaginario. Nuestro mapa incluirá tres características clave:

  1. Marcadores personalizados en cada una de las sucursales de los clientes
  2. El logotipo del cliente estará en una posición fija del mapa
  3. Asignación de mapas que complementa la marca del cliente

En este caso, nuestro cliente imaginario va a ser "The Hobby Shoppe", proveedores de juegos de mesa y otra parafernalia de pasatiempos en la ciudad de Melbourne, Australia.

Creando el mapa base

Vamos a ponernos en marcha creando un mapa básico centrado en la ciudad de Melbourne. Después de que agreguemos nuestros marcadores de rama, afinaremos la posición central del mapa, pero por el momento empezaremos por encontrar la latitud y la longitud correctas para mostrar la ciudad como un todo.

Latitud inicial y longitud

Para hacer esto, ve a Google Maps y busca Melbourne, luego amplía un poco para que no incluyas áreas despobladas. A medida que ajustes la posición del mapa, notarás que la URL cambia para reflejar tu nueva latitud, longitud y nivel de zoom. Cuando coloques el mapa donde desees, copia la URL en algún lugar para referencia futura, por ejemplo:

https: //www.google.com/maps/place/Melbourne+VIC / @ - 37.804627 ...

Después del símbolo @ en la URL, verás valores separados por comas para la latitud, la longitud y el nivel de zoom: -37.8046274,144.972156,12z

El primer valor -37.8046274 es la latitud, el segundo valor 144.972156 es la longitud, y el valor 12z significa que el nivel de zoom está establecido en 12. Ahora vamos a conectar estos valores en un mapa básico.

Marcado básico

Crea un documento HTML en blanco y agrega el siguiente código:

Con este marcado hemos creado un documento HTML que incluye un div con el id map-canvas que mantendrá nuestro mapa. También hemos agregado algunos CSS básicos para dimensionar y posicionar el div map-canvas.

Por último, hemos cargado el script requerido de la API de Google Map con:

y hemos creado una función de JavaScript para establecer las opciones básicas del mapa y cargarlo en nuestro div vacío.

Nota: Mira cómo los valores que tomamos de la URL de Google Maps anteriormente se han utilizado en las variables centerPos y zoomLevel, que a su vez se utilizan en la matriz mapOptions. La variable centerPos usa los valores de latitud y longitud separados por comas de -37.8046274,144.972156, y la variable zoomLevel usa el valor de 12.

Guarda tu archivo HTML y ábrelo en cualquier navegador. Tu mapa base debe verse un poco así:

Agregar marcadores de ubicación

El siguiente paso es encontrar la latitud y la longitud para cada una de las ubicaciones de las sucursales del cliente, por lo que podemos crear marcadores para ellas en esas posiciones. La forma más sencilla de hacerlo es buscar las direcciones de cada sucursal a través de una búsqueda en Google Maps y obtener la latitud y la longitud desde allí.

Encuentra latitud y longitud de cada rama

Regresa a Google Maps nuevamente y ejecuta una búsqueda para cada ubicación de la sucursal. Suponiendo que el cliente te haya dado las direcciones de cada ubicación, simplemente puedes buscar esa dirección y aparecerá un marcador en el mapa. Haz clic con el botón derecho en ese marcador y elige ¿Qué hay aquí? desde el menú contextual.

Aparecerá una pequeña ventana emergente en la parte superior izquierda del mapa que muestra los detalles de este marcador, incluida la latitud y la longitud:

Agregando las ubicaciones a la función de inicialización

Toma nota de la latitud y la longitud de cada una de las ubicaciones de las sucursales que deseas agregar a tu mapa. En el caso de "The Hobby Shoppe", tenemos siete sucursales y agregaremos marcadores para cada una insertando el siguiente código justo antes del final de la función initialize() de nuestro mapa, después de la línea map = new google.maps.Map...:

En este código, primero estamos creando una matriz de ubicaciones de sucursales con el nombre, la latitud y la longitud de cada una. Estamos iterando a través de ese conjunto para agregar cada ubicación como un marcador al mapa, con el título que se mostrará como información sobre herramientas si el marcador está sobrevolado.

Tu mapa ahora debería tener marcadores añadidos como los siguientes:

Pero espera, hay algo mal con esta imagen. Agregamos siete ubicaciones y, sin embargo, solo aparecen seis marcadores. ¿Por qué?

Es simplemente porque nuestro séptimo marcador simplemente está fuera de la vista en función de la latitud y la longitud iniciales que establecimos para el mapa, por lo que debemos refinar esa posición central.

Ajustar la posición del centro del mapa

Ahora que tenemos todos nuestros marcadores en su lugar, podemos refinar la posición de inicio del mapa para garantizar que todos sean visibles en la carga. Para hacer eso agregaremos un botón en el que podemos hacer clic para darnos nuevas coordenadas una vez que encontremos la posición de partida del mapa perfecto.

Agrega este código de botón a tu página, en cualquier lugar de la sección del body:

Ahora puedes mover tu mapa y luego hacer clic en el nuevo botón Get Map Co-ords cuando encuentres el lugar correcto.

La latitud, longitud y nivel de zoom de tu posición se escribirán en tu consola, así que asegúrate de abrir la consola Chrome Dev Tools o Firebug.

Actualiza la opción center de tu mapa con la nueva latitud y longitud, así como la opción de zoom si eso también ha cambiado:

Guarda y actualiza tu mapa y ahora los siete marcadores de mapa deberían estar visibles. Cuando estés satisfecho con la posición central refinada, puedes eliminar el código del botón Get Map Co-ords.

Agregar imágenes personalzidas a los marcadores de posición

Ahora que tenemos todos los marcadores en su lugar y visibles para las sucursales, vamos a convertirlos en una imagen personalizada, una que vaya con la marca del cliente y el estilo del mapa. Cualquier imagen creada para usar como un marcador de mapa debe tener un fondo transparente, por ejemplo.

Coloca tu marcador personalizado en una carpeta llamada "images", relativa a la carpeta en la que se encuentra tu mapa base, luego agrega la siguiente variable directamente debajo de la variable locations que creaste anteriormente:

A continuación, agrega una opción adicional de icon: image al bucle for que creamos anteriormente para colocar marcadores de mapa. Pasar esta variable a las opciones de generación del marcador del mapa especifica que deseas que los iconos del marcador sean reemplazados por tu imagen personalizada:

Echa otro vistazo a tu mapa y ahora deberías ver pequeñas casas en cada una de las siete sucursales:

Agregar el logotipo del cliente

Ahora vamos a agregar el logotipo del cliente de tal manera que seguirá siendo del mismo tamaño y en la misma posición, independientemente de dónde se haga zoom o se haga un desplazamiento panorámico del mapa.

Los únicos elementos de un mapa de Google que no se mueven con panorámica y zoom son los elementos de la interfaz de control del usuario, que normalmente se utilizan para cosas como la interacción con Street View o el cambio de tipos de mapas. Sin embargo, podemos utilizar la API de control personalizado igualmente bien para colocar un logotipo en la pantalla. También haremos que nuestro nuevo control personalizado restablezca el zoom y la posición central del mapa cuando se haga clic, por lo que además de mostrar el logotipo, se realiza una función UI útil.

Comienza agregando la imagen del logotipo de tu cliente en la misma carpeta "images" donde colocaste tu imagen de marcador personalizada. A continuación, agrega la siguiente función JavaScript justo antes de tu función existente initialize():

Cuando se ejecuta, esta función creará un elemento de IU de control de 600px por 116px de tamaño, utilizando la imagen del logotipo como fondo. También creará un receptor que restablecerá el centro y el zoom del mapa si se hace clic en el logotipo.

Luego, al final de tu función initialize(), inserta el siguiente código:

Cuando se ejecuta la función initialize(), ahora llamará a la función LogoControl() que acabamos de crear y agregará su salida a los controles del mapa.

Tu mapa debería verse así:

Colorear el mapa

Para configurar los colores de tu mapa, seguramente querrás usar el Asistente de mapas con estilo de Google para obtener comentarios visuales rápidos sobre tus elecciones.

El menú Tipo de función en el asistente te ofrece una gama de componentes de mapas disponibles para el diseño. Están organizados desde los más generales hasta los más específicos. En el nivel más general, puedes aplicar elecciones de color al tipo de característica All para afectar por igual a todo el mapa. En el otro extremo del espectro puedes profundizar tan específicamente como All > Transit > Station > Bus por ejemplo.

Con un Tipo de elemento seleccionado, puedes realizar una selección desde el menú Tipo de elemento para determinar si deseas que tus elecciones de color influyan en la geometría de la función o tus etiquetas (como las pequeñas etiquetas de texto que ves flotando en el mapa). Además, también puedes seleccionar el color de relleno o trazo para modificar.

Cuando se trata de elegir colores, hay dos áreas principales con las que querrás trabajar; el panel Color y el panel Tono. El panel Color aplicará un código hexadecimal de color de forma plana a las características y elementos que hayas seleccionado, mientras que el panel Tono teñirá tu selección con un rango de claridad y oscuridad influenciado por el color original de cada elemento.

Como regla general, debes comenzar aplicando un Tono a los niveles más generales de tu mapa para que tengas uniformidad en tu esquema de color; podrías compararlo con una capa base de pintura. Desde allí, puedes profundizar para "pintar" en la parte superior con ajustes de Color planos para características y elementos más específicos.

Nuestro mapa

Comienza por buscar en el asistente "Melbourne" y luego coloca el mapa de vista previa para mostrarte aproximadamente la misma área que configuraste tu propio mapa.

En el menú Tipo de función en el asistente, selecciona All y en el menú Tipo de elemento, selecciona Geometry. Luego marca la casilla Tono y haz clic en la barra de color hasta que obtengas un valor de alrededor de #ffa200. Por alguna razón, no puedes ingresar directamente un valor en este campo, por lo que debes obtenerlo lo más cerca posible haciendo clic. Luego marca la casilla Invertir claridad, activa la configuración de Saturación y arrástrala a 35, activa la configuración de Luminosidad y colócala en 50, y activa la configuración Gamma y acércala lo más que puedas a 1.3.

Estas configuraciones deberían haber teñido todo tu mapa así:

El mapa se ve un poco raro en esta etapa porque nuestro objetivo es hacer un mapa colorido, por lo que los ajustes de tinte aquí se han ampliado para garantizar que no haya zonas monótonas en ningún lado. Las áreas excesivamente brillantes se anularán con colores más atenuados en pasos posteriores.

Tonificando las cosas

Ahora que tienes aplicado tu primer estilo, haz clic en el botón Agregar en la esquina superior derecha del panel Estilo de mapa, (ubicado en el lado derecho del asistente de mapas). Al hacer clic en este botón se crea un segundo estilo llamado "Estilo 1" bajo el cual puedes seleccionar diferentes elementos y aplicar nuevos estilos.

Con "Estilo 1" seleccionado en el panel Estilo de mapa y All aún seleccionados en Tipo de elemento, haz clic en la opción Etiquetas en la segunda lista del menú Tipo de elemento. Marca la casilla de Tono y vuelve a establecerla en un valor de #ffa200 para que tus etiquetas estén todas teñidas en lugar de ser de color azul brillante o verde, como puedes ver en la imagen de arriba.

Haz clic en el botón Agregar en el panel Estilo de mapa para crear otro estilo nuevo, luego haz clic en Agua en la segunda lista del menú Tipo de función. En el menú Tipo de elemento, selecciona Geometría. Verifica el cuadro Color e ingresa un código hexadecimal de color de #8F9B98.

Los estilos restantes

Ahora deberías saber cómo crear nuevos estilos, seleccionando los elementos de menú Tipo de elemento y Elemento. Continúa y agrega el resto de estos estilos uno a la vez en el asistente de mapas con estilo:

  • Tipo de función: Todo
  • Tipo de elemento: Todo > Etiquetas > Texto > Relleno
  • Color: #f8ead0
  • Tipo de función: Todo
  • Tipo de elemento: Todo > Etiquetas > Texto > Trazo
  • Color: #6a5035
  • Tipo de función: Todo > Paisaje > Hecho por el hombre
  • Tipo de elemento: Todo > Geometría
  • Color: #9f8053
  • Tipo de función: Todo > Paisaje > Natural
  • Tipo de elemento: Todo > Geometría
  • Color: #9c9743
  • Tipo de función: Todo > Punto de interés
  • Tipo de elemento: Todo > Geometría
  • Color: #ACA74C
  • Tipo de función: Todo > Carretera
  • Tipo de elemento: Todo > Geometría > Relleno
  • Color: #d3b681
  • Tipo de función: Todo > Carretera
  • Tipo de elemento: Todo > Geometría > Trazo
  • Color: #644F34
  • Tipo de función: Todo > Carretera > Arterial
  • Tipo de elemento: Todo > Geometría > Relleno
  • Color: #c6a15e
  • Tipo de función: Todo > Carretera > Local
  • Tipo de elemento: Todo > Geometría > Relleno
  • Color: #b09061
  • Tipo de función: Todo
  • Tipo de elemento: Todo > Etiquetas > Texto > Trazo
  • Color: #483521
  • Tipo de función: Todo > Tránsito > Línea
  • Tipo de elemento: Todo > Geometría
  • Color: #876b48
  • Tipo de función: Todo > Tránsito > Estación
  • Tipo de elemento: Todo > Geometría
  • Color: #a58557

Exportación de estilos de mapas

Una vez que hayas agregado todos estos estilos, estarás listo para exportar las configuraciones que el asistente ha creado y agregarlas a tu mapa. En el panel Estilo de mapa, haz clic en el botón Mostrar JSON en la parte inferior. Verás aparecer una ventana blanca que muestra una matriz de opciones de JavaScript.

Copia todo el texto de esa ventana entre la apertura [y el cierre], es decir, todo menos el encabezado principal.

Al comienzo de tu función initialize(), agrega esta nueva línea:

Coloca tu cursor antes del ; luego pega el código que copiaste del asistente de mapas con estilo. Deberías terminar con:

Luego, al final de la función initialize() agrega estas tres líneas:

Estas líneas de código aplican todos los datos de esquema de color que acabas de extraer del asistente de estilo del mapa. Echa otro vistazo y ahora debería aparecer con todas tus selecciones de estilo en su lugar:

Echa un vistazo a la demostración en vivo para que puedas ver el mapa en su tamaño adecuado y jugar con el zoom y la panorámica aquí.

Terminando

Como toque final, también puedes agregar un efecto de marco alrededor del mapa para complementar aún más el diseño. Reemplaza el CSS existente #map-canvas { ... } en tu archivo con esto:

Como puedes ver, hay muchas cosas que puedes hacer con Google Maps más allá de la incrustación básica. En este tutorial, solo hemos explorado un par de aspectos de la API de Google Maps; puedes leer más sobre todas las otras funciones que ofrece la API en los documentos de ayuda de Google Map.

Si deseas llevar este tutorial aún más lejos, también puedes intentar agregar tus propios controles de zoom y panorámica con estilos personalizados (documentos de control personalizados) y crear ventanas de información que aparecen cuando se hace clic en los marcadores. Estas ventanas emergentes podrían contener detalles como el número de teléfono y la dirección de la calle (información de Windows Docs).

Prueba estas técnicas la próxima vez que un cliente te pida que incluyas un mapa de Google en su sitio. ¡Podrías obtener una bonificación!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.