Consejos útiles

Mapa de Google

Pin
Send
Share
Send
Send


Hola a todos! Hoy aprenderemos no solo cómo instalar un mapa de Google Maps en nuestro sitio web (cualquier página html), sino también cómo estilizar Google Maps: cambiar los colores del mapa, agregar una descripción al marcador en Google Maps, cambiar el tipo (imagen) del marcador y agregar el nuestro descripción. Vamos!)

Nota importante Haremos todos nuestros experimentos localmente. Para utilizar Google Maps en su sitio, necesita obtener una clave de autenticación especial. Hazlo fácil. Omitiremos su recibo y no lo consideraremos.

1. Insertar Google Maps

Primero, creemos una página html e insertemos un Google Maps en ella. Haremos esto usando la API de Google Maps. Es decir, vamos por el camino avanzado. Cabe señalar que Google tiene buena documentación e instrucciones en ruso e inglés sobre el uso de Google Maps. Para que los programadores puedan ir de inmediato allí. Si desea obtener una lección clara paso a paso, quédese.

Ahora describiré a su vez las acciones que deben realizarse y luego daré el código de la página con comentarios. Primero, crea una página HTML. Entonces:

    Crea un elemento en la página

Aquí está el código de la página que obtuvimos. Presta atención a los comentarios en el interior, describí lo que sucede y dónde.

Ahora tenemos ese mapa, pero no hay suficientes marcadores para indicar el lugar.
También preguntará cómo indicar en el mapa la dirección que necesitamos.

2.1 determinar el centro del mapa

Muestremos en el mapa la ubicación del Teatro Bolshoi. En el parámetro central, determinamos las coordenadas del centrado del mapa:

Necesitamos obtener tales coordenadas para nuestro lugar. Para hacer esto, vaya a la versión normal de Google Maps y haga clic derecho en la ubicación que nos interese. Haga clic en "Qué hay aquí" y obtenga las coordenadas del lugar. (55.760186, 37.618711). Al mismo tiempo, cambiaré la escala configurándola en 18: zoom: 18.

Cómo agregar un evento haciendo clic en un mapa o marcador en Google Maps

También puede agregar su evento haciendo clic en el marcador. En el código final de la página, no haremos esto. Pero esto se hace así:

El primer parámetro del método addListener es el objeto para el que se agrega el evento, en nuestro marcador de caso. El objeto puede ser no solo un marcador sino también la propia tarjeta. El segundo parámetro de clic determina el tipo de evento, en este caso un clic. El tercero es una función de controlador que funcionará.

Con más detalle sobre el marcador y las posibilidades de trabajar con él, recomiendo consultar la documentación.

3. Defina sus propios estilos para el mapa Google Maps

Es hora de colorear nuestro mapa. Dale un aspecto especial y único. Haremos esto usando el servicio Snazzy Maps que tiene una gran cantidad de máscaras para los mapas de Google. Y te permite hacer tarjetas tan geniales:

Elegí un estilo de mapa llamado Blue water. En la página de este estilo, puede encontrar el código para el diseño y descargar un archivo con un ejemplo, aplicando este estilo a Google Maps.

Agregamos estilos para el diseño del mapa a la propiedad de estilos que especificamos para la variable del mapa, cuando creamos un objeto con un mapa.

Aquí está el fragmento de código completo:

Ahora nuestro mapa se ve así:

4. Ventanas de información

El mapa se puede mejorar aún más agregando una ventana de información haciendo clic en nuestro marcador. La documentación para ellos se encuentra aquí. En resumen, para agregar una ventana de información necesita:

  1. Crea la propia ventana y el contenido dentro de ella
  2. Haz que aparezca haciendo clic en el marcador.

Todo esto sucede dentro de la función initMap ()

4.3 Lo hacemos de modo que al hacer clic en el marcador, aparece una ventana de información

Ahora el mapa con la ventana de información se ve así:

También puede eliminar los controles estándar de la tarjeta, activar / desactivar los necesarios e innecesarios, e incluso crear los suyos propios. Encontrará una descripción de todo esto en la documentación.

Mira el video: 12 Horripilantes cosas encontradas en google maps (Septiembre 2021).

Pin
Send
Share
Send
Send