WP Map Block – Gutenberg Map Block for Google Map and OpenStreet Map


Most Convenient Way to utilize Gutenberg Map block for Google Maps & OpenStreet Maps.

WP Map Block offers a simple user interface that allows you to add Google Maps to your WordPress site. This amazing plugin is built with LeafletJS, an open-source JavaScript library for mobile-friendly interactive maps. There are no fluff and redundant settings and a straightforward Map option for your Gutenberg block.

WP Map Block is the ideal solution for you if you’re using the Gutenberg editor and require a map on your site. Using this plugin, you can easily customize Google Maps or OpenStreetMap for Gutenberg-supported posts, pages, or custom post types for your WordPress site.

Live Demo

Características del plugin ✅

  • Google Maps
  • OpenStreet Maps
  • Marcadores múltiples
  • Control del zoom
  • Control de mapa de pantalla completa
  • Icono de marcador personalizado y ventana emergente
  • Ancho y alto del mapa
  • Generador de latitud y longitud a partir de la dirección
  • Establecer cualquier marcador como posición central
  • Marker Builder
  • Draggable Marker
  • No necesita ninguna clave API

🗺️Google Map: Set the default Google Map on any page or post of your WordPress site. With a single click, you can select this map anywhere on your site using WP Map Block.

🛣️OpenStreet Maps: We’ve included this option for you so you can enable OpenStreet Maps and tweak it within your site. OpenStreet Map is an open-source map where you can contribute to improving the quality of data on the map. Every update you make to Open Street Map is owned by both you and the community as a whole.

📌Multiple Marker: By default, a marker will appear on the map based on your location. But you can add additional markers on your map by customizing the settings. Also, set the title and content for the marker as well as set the default position of the marker.

🔎 Zoom Control: Zoom in and out of the map with ease using the zoom option. The map works quickly since it is built using LeafletJS, and it does not take long to load the map after zooming in or out.

📲Full-Screen Map Control: Get a full-screen map view while using the map presented by this plugin. You can control the map very comfortably within the full screen and navigate the whole map freely.

🛠️ Custom Marker Icon & Popup: Explore the settings and customize the marker on your map. You can place custom markers on the map and also place your preferred popups on the map.

🎚️Map Width & Height: You can set your preferred width and height on the map by customizing it from the settings. This option allows you to set the displayed map at a certain height and width and then place it on the front end of your site. You can set it according to your viewing preference.

☸️ Latitude and Longitude Generator: You can generate addresses from the latitude and longitude of your location. With the help of latitude and longitude, you will get a precise location and address on the map.

📍Set any marker as the center position: You can set the marker in the central position on the map. If you have placed a custom marker on the map, you can set it as your default marker and set its position in the middle. This will show the marker as the main marker; it will be displayed at the center of the map.

☄️Marker Builder: You may be bored to see the same old marker icon on the map. WP Map Block allows you to customize the map beyond the traditional elements of the map. You can customize as well as build a new marker and place it on the map.

👋 Draggable Marker: Drag the marker in any position on the map and reveal the location swiftly. The dragging option is really smooth, and after dragging the marker, the location gets revealed instantly.

🔑 API key not required: To place the map on your site. Simply select the map block and place it on any page of your site. The vast majority of Google Map plugins now available on the market need the use of API keys in order to activate the map; however, our plugin does not.

¿Quieres contribuir al plugin?

Ahora puedes contribuir al plugin en Github: WP Map Block en Github


If you like WP-Map-Block, then consider checking out our other WordPress Plugins for FREE:

🔝 Academy LMS – WordPress Learning Management System, eLearning Platform, Online Education System & Online Course Builder

💙 Loved WP-Map-Block?


  • Mapa de Google
  • Mapa de OpenStreet
  • Marcador de mapa personalizado con ventana emergente


Este plugin proporciona 1 bloque.

  • WP Map Block - Gutenberg Map Block for Google Map and OpenStreet Map


Instala WP Map Block para Gutenberg a través del directorio de plugins de WordPress o subiendo los archivos en tu servidor en wp-content/plugins.


¿Se requiere una clave API para que funcione WP Map Block?

No, no necesitas una clave de la API para lanzar Google Maps y OpenStreet Maps.

¿Puedo añadir un bloque de WP Map en varias páginas o entradas?

Sí, puedes añadir un bloque de WP Map en varias páginas o entradas. Simplemente necesitas seleccionar el plugin de la barra lateral izquierda y el mapa aparecerá instantáneamente. Luego puedes personalizar el mapa según sus preferencias.

¿Cómo obtendré el mapa en mi editor de bloques de Gutenberg?

Después de instalar y activar el plugin, simplemente ingresa a tu editor, y desde la sección de bloques en el lado izquierdo, puedes buscar el bloque WP Map y seleccionarlo. El mapa aparecerá justo después de hacer clic en él en el panel izquierdo.

¿Puedo colocar el marcador en cualquier lugar del mapa?

Por supuesto. Puedes colocar el marcador en cualquier lugar del mapa y también personalizarlo. La parte divertida es que puedes colocar múltiples marcadores en tu mapa. Además, puedes seleccionar el mapa elegido y colocarlo en el centro del marco.

¿Hay algún criterio específico para usar el WP Map block?

No, no hay ningún requisito previo para usar este plugin. Simplemente puedes usar este plugin después de instalarlo en cualquier sitio de WordPress.

¿Qué pasa si el mapa muestra la ubicación incorrecta?

Cambia la forma en que escribes la dirección o hazla más específica. Asegúrate de introducir el nombre de la calle, así como el nombre de la ciudad y el país. Para una ubicación más precisa, proporciona las coordenadas de latitud y longitud en el lugar de dirección.


28 de febrero de 2023 1 respuesta
ok installation done …after?.. settings?.. what? somewhere; how do you place it… what? ..nothing;
14 de enero de 2023
Very simple to use map plugin that offers quite a lot of customisation options.
23 de noviembre de 2022
Needs some GUI improvements down the road, but I love it simplicity. Nice Work!
13 de julio de 2022 1 respuesta
There are no features and it forces you to keep a marker in Bangladesh. You cannot mark it as you want to. You cannot mark a route, you cannot do anything with this map.
25 de marzo de 2022 1 respuesta
...with markers easily customizable that improve your work. WP Map Block is simple and effective.
Leer todas las 16 reseñas

Colaboradores y desarrolladores

«WP Map Block – Gutenberg Map Block for Google Map and OpenStreet Map» es un software de código abierto. Las siguientes personas han colaborado con este plugin.


«WP Map Block – Gutenberg Map Block for Google Map and OpenStreet Map» ha sido traducido a 3 idiomas locales. Gracias a los traductores por sus contribuciones.

Traduce «WP Map Block – Gutenberg Map Block for Google Map and OpenStreet Map» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios

1.4.6 – 2023-01-01

  • Some minor Improvement

1.4.5 – 2022-12-04

  • Fixed: Mobile scrolling issue
  • Fixed: Marker center position not keep saved if delete any marker

1.4.4 – 2022-11-07

  • Fixed: Block Assets Loading Issue

1.4.3 – 2022-11-05

  • Added: 6.1 Compatibility
  • Added: Conditonality load assets
  • Fixed: Editor Settings UI Improved
  • Fixed: if delete all marker then break editor

1.4.2 – 2022-06-13

  • Added: 6.0 Compatibility

1.4.1 – 2022-03-22

  • Fixed: Translation Issue

1.4.0 – 2022-03-21

  • Added: Draggable Marker Editor
  • Updated: React Leaflet NPM Package Update
  • Fixed: Real Time Map Center Position Not Working Issue

1.3.1 – 2022-02-16

  • Added: 5.9 Compatibility

1.3.0 – 2021-10-29

  • Added: Set any marker as center position
  • Fixed: Popup content HTML Support issue
  • Update: Update map height maximum value

1.2.5 – 2021-09-29

Added: Latitude and Longitude Generator from address

1.2.4 – 2021-09-29

  • Added: Latitude and Longitude Generator from address

1.2.4 – 2021-08-24

  • Some minor Improvement

1.2.3 – 2021-08-24

  • Fixed: Data escaping issue fixing

1.2.2 – 2021-08-20

  • Fixed: frontend scripts jquery dependancy related issue fixing

1.2.1 – 2021-08-08

  • Fixed: Hotfix for unexpected semicolon from block.php

1.2 – 2021-08-07

  • Added: Mouse Wheel Scroll Zoom ON/OFF Option
  • Some minor Improvement

1.1.6 – 2021-07-23

  • Update: WP 5.8 Compatibility

1.1.5 – 2021-03-21

  • Update: WP 5.7 Compatibility
  • Some minor Improvement

1.1.4 – 2021-01-30

  • Fixed: Editor settings page arrow down icon issue
  • Update: Editor settings map marker label click
  • Some minor Improvement

1.1.3 – 2021-01-16

  • Fixed: Map Server Side Render low resolution
  • Fixed: Translation Issue
  • Some minor Improvement

1.1.2 – 2021-01-14

  • Some minor fix

1.1.1 – 2020-09-03

  • Fixed: Translation Issue
  • Some minor fix

1.1 – 2020-09-02

  • Added: Custom marker icon
  • Added: Full Screen Map Control
  • Fixed: Remove some unncecessary code
  • Some minor fix

1.0.1 – 2020-08-24

  • Fixed: Popup content undefined issue
  • Update: Map Default Settings Update

1.0 – 2020-08-23

  • initial release