Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo incrustar Bing Maps en WordPress (paso a paso)

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

¿Quieres incrustar Bing Maps en WordPress?

Puedes utilizar Bing Maps para mostrar direcciones, tráfico, rutas e instrucciones de navegación en tu sitio WordPress. Si no quieres utilizar Google Maps, Bing es una aplicación de mapas alternativa con una gran cantidad de datos útiles.

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

How to embed Bing Maps in WordPress

¿Por qué añadir Bing Maps en WordPress (y no Google Maps)?

Si tienes una tienda, un restaurante, un salón de belleza, una atracción turística o cualquier otro negocio físico, añadir Bing Maps a tu sitio web facilitará que los clientes te encuentren.

An example of an embedded Bing map

Los clientes potenciales también pueden obtener indicaciones para llegar a su negocio y compartir fácilmente su ubicación con amigos y familiares. No solo eso, sino que incrustar Bings Maps puede mejorar el SEO de WordPress y hacer que su sitio sea más visible en las búsquedas locales.

Cuando se trata de asignar un mapa a WordPress, Google Maps puede parecer la opción obvia, sobre todo porque ofrece un localizador de tiendas de Google Maps.

Sin embargo, en los últimos años Bing Maps se ha hecho más popular, y ambos servicios ofrecen características, cobertura de área y datos ligeramente diferentes. En particular, mucha gente cree que Google Maps sobrestima el tiempo que se tarda en llegar al destino.

Si no estás contento con Google Maps o simplemente prefieres Microsoft a Google, Bing Maps es una gran alternativa.

Dicho esto, veamos cómo puedes añadir Bing Maps a tu sitio web en WordPress. Simplemente usa los enlaces rápidos de abajo para saltar directamente al método que quieras usar:

Método 1: Añadir Bing Maps en WordPress (Mejor para mapas individuales)

Muchos empresarios sólo quieren añadir un mapa a su formulario de contacto o a su página Quiénes somos. Si sólo quiere añadir un mapa a su sitio web, puede utilizar un código de asignación.

Sólo tienes que ir a Bing Maps y buscar la ubicación o el mapa que quieras utilizar. Una vez que hayas encontrado la ubicación correcta, haz clic en el icono de los tres puntos y selecciona “Incrustar un mapa”.

Embed a Map option in Bing Maps

Bing abrirá ahora una nueva pestaña en la que podrás personalizar el mapa cambiando su tamaño, el tipo de mapa (estático o arrastrable), el estilo del mapa (de carretera o aéreo), etc.

A medida que realice cambios, la vista previa se actualizará automáticamente, de modo que podrá probar distintos ajustes para ver qué le parece mejor.

Customize Bing Map to Embed in WordPress site

Cuando esté satisfecho con cómo se ha establecido el mapa, haga clic en el botón “Generar código”.

Bing Maps mostrará un fragmento de código. Copie el código, ya que lo necesitará en el siguiente paso.

generated Embed Code for Bing Maps

Ahora, vuelva a su sitio de WordPress y abra la entrada o página en la que desea añadir el mapa.

A continuación, haga clic en el icono “+” y empiece a escribir “HTML personalizado”.

Embedding a Bing map using a custom HTML block

Cuando aparezca el bloque adecuado, basta con hacer clic para añadirlo a la página.

Una vez hecho esto, basta con pegar el código incrustado en el bloque HTML personalizado.

Bing Map Embed Code Added in WordPress Editor

Ahora puede hacer clic en el botón “Actualizar” o “Publicar” para que el mapa aparezca en su tienda en línea o sitio web.

Método 2: Añadir mapas de Bing mediante un plugin (mejor para asignar varios mapas)

Si solo necesitas añadir un mapa, el código incrustado es una buena solución. Sin embargo, este método puede llevar mucho tiempo y esfuerzo si necesitas añadir varios mapas de Bing.

Por ejemplo, si tiene un directorio de empresas, puede que necesite añadir un mapa a cada página. En este caso, recomendamos utilizar Ultimate Maps de Supsystic, ya que facilita la asignación de mapas de Bing, Leaflet y otras alternativas a Google Maps.

Lo primero que tienes que hacer es instalar y activar el plugin Ultimate Maps by Supsystic. Para obtener instrucciones detalladas, consulte nuestra guía práctica sobre cómo instalar un plugin de WordPress.

Para utilizar este plugin con Bing Maps, necesitarás una clave API de Bing Map.

Para obtener esta clave, basta con crear una cuenta en el Centro de desarrollo de Bing Maps. Si ya tienes una cuenta de Microsoft, puedes acceder con tus datos de acceso de Microsoft.

Sign in to Bing Dev Center

Después de acceder a su cuenta, haga clic en el menú “Mi cuenta”.

A continuación, selecciona “Mis claves”.

Bing Maps Dev Center My keys Option

En la siguiente pantalla, debe rellenar los datos de su blog o sitio web en WordPress.

A continuación, haga clic en “Crear”.

Create Bing Map API key to Embed in WordPress

Al cabo de unos instantes, aparecerá el mensaje “Clave creada correctamente”.

Ahora puedes hacer clic en “Mostrar clave” y copiar la clave API de Bing Maps, o simplemente enlazar el enlace “Copiar clave”.

Bing Maps API Key Created

El siguiente paso es pegar la clave en los ajustes del plugin.

En tu escritorio de WordPress, tienes que ir a Ultimate Maps by Supsystic ” Ajustes. A continuación, abra el menú desplegable “Motor de mapas” y seleccione “Bing Microsoft”.

How to add a Bing Map to your WordPress website

Ya puedes pegar la clave API en el campo “Clave API de Bing Maps”.

Una vez hecho esto, no olvides hacer clic en el botón “Guardar”.

Adding a Bing Map API key to your WordPress website

A continuación, puede añadir categorías de marcadores. De forma similar a las categorías y etiquetas de WordPress, pueden ayudar a organizar los puntos de interés en el mapa.

Por ejemplo, si crea un mapa para turistas, puede crear categorías como “Alojamiento”, “Restaurantes” y “Lugares de interés”.

Para crear una categoría, basta con seleccionar la pestaña “Categorías de marcadores” y hacer clic en “Añadir categoría”.

Adding marker categories in WordPress

Ahora puede añadir un título, cambiar el fondo y el color del texto y asignar categorías secundarias a categorías principales.

Cuando estés satisfecho con la información que has introducido, haz clic en “Guardar”.

Adding Bing marker categories to a WordPress website

Para crear más categorías, basta con hacer clic en el botón “Añadir categoría”.

Una vez hecho esto, haz clic en la pestaña “Añadir mapa”. Ahora puedes asignar un nombre al mapa, definir su anchura y altura, elegir un modo de barra de navegación, etc.

Add Bing map using a plugin

También puedes configurar opciones para que el mapa de Bing se pueda arrastrar, utilizar el doble clic para ampliar / acercar, etc.

Lo más importante de todo es que, en “Centro de mapas”, escriba la ubicación que desea mostrar. Puede introducir la dirección o los valores de longitud y latitud.

Choosing a location for a Bing map

En esta página hay muchos ajustes, así que vale la pena revisar todas las opciones y hacer los cambios necesarios.

Cuando estés satisfecho con cómo se ha establecido el mapa, sólo tienes que hacer clic en “Guardar mapa”.

Saving a custom Bing map

Después, es posible que desee resaltar una o más ubicaciones en el mapa utilizando marcadores.

Para empezar, haga clic en la pestaña Marcadores y escriba un nombre para el marcador. Normalmente, querrá utilizar el nombre del lugar o de la organización, pero puede escribir el nombre que desee.

Add new Marker for Bing Map in WordPress

A continuación, puede añadir texto e imágenes a la descripción del marcador. También puede elegir un icono para el marcador.

Una vez hecho esto, debe introducir una dirección para el marcador y seleccionar una categoría de marcador.

Adding markers to a Bing map in WordPress

Cuando estés satisfecho con cómo se ha establecido todo, haz clic en “Guardar marcador”.

Para añadir más marcadores, sólo tiene que seguir el mismo proceso descrito anteriormente.

Save Marker for Bing Maps

A medida que añada marcadores, la vista previa del mapa se actualizará automáticamente.

Cuando hayas terminado de personalizar el mapa, copia el shortcode que está al lado de ‘Map shortcode.’

Copy Bing Map Shortcode to embed in WordPress

Si no ves ningún shortcode, asegúrate de haber guardado el mapa.

Ahora puede abrir la página o entrada en la que desea incrustar el mapa de Bing. Simplemente haz clic en el icono ‘Añadir nuevo bloque ‘+’ y escribe ‘Shortcode.’

Adding a shortcode in WordPress

Cuando aparezca el bloque adecuado, haz clic para añadirlo a la página.

Ahora, sólo tienes que pegar el shortcode de Bing Map en el bloque.

Paste BIng Map Embed Shortcode in WordPress Page Editor

Para activar el mapa, haz clic en el botón “Actualizar” o “Publicar”. Ahora, si visitas tu sitio web, verás el mapa de Bing en acción.

Esperamos que este artículo te haya ayudado a aprender cómo incrustar Bing Maps en WordPress fácilmente. Puede que también quieras ver nuestra guía sobre cómo crear una ventana emergente de WooCommerce para aumentar las ofertas o nuestra selección experta del mejor software de chat en vivo para pequeñas empresas.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

7 comentariosDeja una respuesta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Jiří Vaněk says

    Thanks for the practical guide. So far I only had experience with google maps. I will definitely try to integrate BING maps as well, in order to test their functions and possibly also the loading speed.

  3. Jiří Vaněk says

    Thanks for the tip, I actually never thought of using maps other than Google. But I’m all about speed. Google Maps slows down page loading a lot. Are Bing and Microsoft better off?

  4. GODZILLA491 says

    I don’t know why but it doesn’t work.
    I found your tutorial after several minutes spent doing the same things you do but all i had is a blank post.

    With google it works, but i need to use bing maps.

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.