Crea y personaliza mapas con Google Map Builder

Ahora hay muchos temas de WordPress basados ​​en geolocalización disponibles. Ofrecen mapas personalizados para que los usuarios puedan encontrar fácilmente lugares específicos, como restaurantes, lugares de eventos, hoteles y más. Noté que algunos desarrolladores web han incluido sus temas con el soporte de mapas y, a menudo, los utilizan en la página de contactos.

Utilizan mapas , Google Map para ser exactos. Y como habrás notado, Google Map es uno de los servicios de mapas más poderosos en la web. La personalización del mapa se puede hacer fácilmente utilizando el control API de estilos de mapa. Pero requiere que uno entienda un poco la programación javascript .

Pruebe este nuevo Google Map Builder, una herramienta para personalizar fácilmente su propio mapa de Google. Tiene una interfaz de usuario bastante agradable y amigable. Puede construir el mapa con solo un par de selecciones del cuadro de selección y ni siquiera tiene que codificar.

Hay muchas opciones para que pueda controlar el aspecto del mapa. También puede insertar su icono de marcador personalizado y lugares. Y la mejor parte es que tiene más de 75 mapas con temas listos de Snazzy Maps.

Visión de conjunto

Google Map Builder funciona exactamente igual que la personalización de Google Map utilizando la API de estilos de mapas. Le da una interfaz de usuario (UI) que es más bonita de lo que puede hacer con un código JavaScript simple. Dentro de la herramienta, todas las opciones se encuentran en el panel izquierdo, dejando el espacio restante para el mapa.

En la parte superior, puede proporcionar al mapa la clave API que es útil para monitorear el uso de la API de Maps de la aplicación. El tamaño y las coordenadas del centro del mapa también se pueden definir fácilmente.

Las opciones de la izquierda se utilizan para personalizar el aspecto del mapa: zoom, control de mapa, arrastrar, tipo de mapa y tema del mapa . Todos los cambios se verán automáticamente en el mapa.

Agregar marcador personalizado

Esta herramienta le permite agregar fácilmente su marcador personalizado para asignar lugares. Para hacer esto, primero debe proporcionar la URL de su icono de marcador y también la dirección del lugar que desea marcar.

Con este ícono del Edificio del Hospital de Map Icons, esta es la forma de agregar el marcador.

Para comenzar, dado que el ícono es sobre un hospital, ingresaré el nombre del hospital al campo de texto Agregar marcador (es) . También puede dar algunas direcciones (una por línea) aquí. Cuando agrega una dirección, el mapa la ubicará automáticamente, por lo que debe asegurarse de que la dirección y el mapa sean lo más precisos posible.

A continuación, coloque la URL del icono en el campo URL del icono del marcador .

Y aquí está el resultado.

Obtener el código

Ahora que ha personalizado el mapa, el siguiente paso es ponerlo en la Web. Para obtener el código, desplácese hasta la parte inferior de la página y verá el botón Obtener código .

Simplemente presiona el botón y el código aparecerá sobre el mapa. Aquí, obtendrá el código de JavaScript dentro de la etiqueta de script y el estilo de CSS para el tamaño del mapa, como lo que tiene si diseñó el mapa manualmente. Copie y pegue fácilmente todo el código y colóquelos en su HTML antes de la etiqueta de cierre de la head .

Pensamiento final

Hay muchas opciones en Google Map Builder, pero la mayoría de ellas son solo para control de mapas. Para personalizar el aspecto del mapa, solo puede depender de los temas de Snazzy Map, pero si no son de su agrado, puede personalizar el mapa manualmente (este tutorial puede ayudar) o trabajar con otras herramientas como Google Maps Colorizr o Google Styled. Mago del mapa

10 aplicaciones para mejorar tu experiencia de Instagram en Android

Instagram ha existido desde hace un tiempo y se ha convertido en una de las aplicaciones para compartir fotos más populares del mundo en todas las plataformas en las que ha sido lanzado. Pero al igual que muchas aplicaciones, tiene sus peculiaridades y pequeñas molestias que te hacen desear que haya una mejor alternativa en algún lado.En

(Consejos de tecnología y diseño)

Conceptos de desarrollo web que todos los diseñadores web deberían entender

Hay mucho que decir sobre la división encontrada entre diseñadores y desarrolladores . De acuerdo, hay muchos híbridos de diseñador / desarrollador que pueden entender ambas caras de la moneda, pero son pocos y distantes.Los proyectos creativos prosperan en la comunicación adecuada . Sin embargo, esto puede ser difícil cuando los diseñadores y desarrolladores no están seguros de cómo hablar entre ellos . No creo

(Consejos de tecnología y diseño)