Cómo incrustar Bing Maps en WordPress

¿Quieres incrustar Bing Maps en tu sitio web de WordPress? Si buscas una alternativa a Google Maps, entonces Bing Maps es el candidato adecuado para ti

Al igual que Google Maps, puedes utilizar Bing Maps para mostrar direcciones, tráfico, rutas e instrucciones de navegación en tu sitio web de WordPress. Como es propiedad de Microsoft, es una gran aplicación de mapas con un montón de datos útiles

En este artículo, te mostraremos cómo incrustar fácilmente Bing Maps en WordPress, paso a paso

Cómo incrustar Bing Maps en WordPress

Cómo incrustar los mapas de Bing en WordPress (sin necesidad de un plugin)

Lo primero que tienes que hacer es ir a Bing Maps y busca la ubicación o el mapa que quieres incrustar

Una vez que hayas encontrado la ubicación, haz clic en la opción "Más" con el icono de los tres puntos, y selecciona la opción "Incrustar un mapa".

Opción de incrustar un mapa en Bing Maps

Después, se abrirá una nueva pestaña donde podrás personalizar el mapa para incrustarlo en tu sitio web

Personalizar el mapa de Bing para incrustarlo en el sitio de WordPress

Puedes elegir el tamaño del mapa, el tipo de mapa (estático o arrastrable), el estilo del mapa (vial o aéreo) y los enlaces del mapa. Revisa las opciones de personalización y luego haz clic en Generar código

Después, te proporcionará un fragmento de código. Sigue adelante y copia el código porque lo necesitarás en el siguiente paso.

código de inserción generado para Bing Maps

Ahora, vuelve a tu sitio de WordPress y crea una nueva página o edita una existente donde quieras añadir el mapa

En la pantalla de edición de la página, haz clic en el icono Añadir nuevo bloque y selecciona el bloque HTML personalizado

Añadir un bloque HTML personalizado en el editor de páginas de WordPress

Después, pega el código de incrustación de Bing Map que has copiado antes en el campo HTML

Código de incrustación del mapa de Bing añadido en el editor de WordPress

Ahora puedes guardar o publicar tu página y hacer clic en el botón de vista previa para ver el mapa incrustado en tu página. Así es como aparece el mapa de Bing en nuestro sitio web de demostración

Mapa de Bing incrustado en WordPress manualmente -vista previa

Añadir mapas de Bing mediante un plugin

Si necesitas incrustar sólo un mapa en tu sitio web, el método manual mostrado arriba es la mejor opción

Sin embargo, si diriges un sitio web en el que necesitas añadir mapas con frecuencia, entonces sería más fácil utilizar un plugin para añadir Bing Maps

Lo primero que tienes que hacer es instalar y activar el Ultimate Maps de Supsystic plugin. Para obtener instrucciones detalladas, puedes ver nuestra guía paso a paso sobre cómo instalar un plugin de WordPress

Es un plugin de mapas para WordPress gratuito que te permite incrustar mapas de Bing, mapas de Leaflet y otras alternativas a Google Maps en tu blog de WordPress

Para utilizar este plugin con los mapas de Bing, necesitarás tener una clave API de mapas de Bing

Simplemente crea una cuenta en Centro de desarrollo de Bing Maps sitio web. Si ya tienes una cuenta de Microsoft, sólo tienes que iniciar sesión con las credenciales de tu cuenta

Inicia sesión en el Centro de Desarrollo de Bing

Una vez que hayas iniciado sesión en tu cuenta, tienes que hacer clic en el menú "Mi cuenta" y seleccionar la opción "Mis claves"

Centro de desarrollo de Bing Maps Opción Mis llaves

En la siguiente pantalla, tienes que rellenar la información de tu sitio web para crear una clave

Crear la clave API de Bing Map para incrustar en WordPress

Después de eso, puedes ver un mensaje 'Clave creada con éxito' y los detalles de la clave en un cuadro

Clave de API de Bing Maps creada

Sólo tienes que hacer clic en el enlace "Copiar clave" o "Mostrar clave" y copiar la clave API de Bing Maps

Después, tienes que pegar la clave en la configuración de tu plugin

Visita Ultimate Maps by Supsystic " Ajustes en tu panel de control y selecciona "Bing Microsoft" como motor de mapas. Después, pega la clave API que has copiado antes en el campo de la clave API de Bing Maps

Pega tu clave API de Bing Maps en la configuración del plugin Ultimate Maps by Supsystic

No olvides guardar la configuración del plugin

Después, tienes que añadir categorías de marcadores visitando Ultimate Maps by Supsystic " Categorías de marcadores " Añadir categoría

Añadir categorías de marcadores para Bing Maps

Crea tantas categorías de marcadores como necesites

A continuación, haz clic en el menú Añadir mapa para crear un nuevo mapa. Introduce un nombre para tu mapa, define la anchura y la altura del mapa, elige el modo de la barra de navegación, etc

Añadir un mapa de Bing mediante un plugin

También puedes configurar las opciones para que el mapa se pueda arrastrar, utilizar el doble clic para hacer zoom, etc. Lo más importante es que introduzcas la ubicación que se mostrará en el centro del mapa

A continuación, desplázate hacia abajo y configura más opciones. Una vez hecho esto, haz clic en el botón "Guardar mapa" situado debajo del cuadro de vista previa del mapa

Después, puedes añadir marcadores para mostrar los principales puntos de ubicación en tu mapa. Haz clic en la pestaña Marcadores, y luego añade un nombre para tu marcador

Añadir un nuevo marcador para el mapa de Bing en WordPress

Puedes utilizar el nombre del lugar o de la organización como nombre del marcador

Por ejemplo, hemos utilizado "Universidad de Florida" como nombre de marcador porque queremos mostrar algunas de las mejores universidades de Florida en nuestro mapa de demostración

Después, puedes añadir el texto de descripción del marcador, así como la imagen

Desplázate hacia abajo y elige un icono para tu nuevo marcador. A continuación, tienes que introducir la dirección para señalar el marcador. Y, además, seleccionar la categoría del marcador

Guardar marcador para Bing Maps

Revisa todas las demás opciones y luego haz clic en el botón "Guardar marcador"

Puedes añadir más marcadores siguiendo los mismos pasos

A medida que vas añadiendo los marcadores, puedes previsualizarlos en directo en el cuadro de vista previa. Una vez que estés satisfecho con tu mapa, navega hasta la opción "Mapa shortcode" en la parte superior, y copia el shortcode

Copiar el código corto del mapa de Bing para incrustarlo en WordPress

Después, crea una nueva página o edita una existente para incrustar tu nuevo mapa de Bing

Una vez en el editor de la página, haz clic en el icono Añadir nuevo bloque y elige el bloque Shortcode en la sección Widgets

Añadir bloque de código corto en WordPress

Ahora tienes que pegar el shortcode del mapa de Bing que has copiado antes

Pegar el código corto para incrustar el mapa de BIng en el editor de la página de WordPress

Una vez hecho esto, guarda o publica tu página, y previsualiza cómo se ve el mapa de Bing en tu sitio web

Así es como aparece el mapa de Bing incrustado en nuestro sitio web de demostración

Mapa de Bing incrustado en WordPress mediante un plugin

Esperamos que este artículo te haya ayudado a aprender cómo incrustar Mapas de Bing en WordPress fácilmente. Quizás también quieras ver nuestra guía sobre cómo incrustar tweets reales en las entradas del blog de WordPress.

Si te ha gustado este artículo, suscríbete a nuestro Canal de YouTube para los videotutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.

Si quieres conocer otros artículos parecidos a Cómo incrustar Bing Maps en WordPress puedes visitar la categoría Tutoriales.

¡Más Contenido!

Deja un comentario

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

Go up