Title: Bawbab Interactive Maps Author: bawbabtechnologies Published: 2026 年 8 月 22 日 Last modified: 2026 年 8 月 22 日 --- 搜尋外掛 ![](https://ps.w.org/bawbab-interactive-maps/assets/banner-772x250.png?rev=3665523) ![](https://ps.w.org/bawbab-interactive-maps/assets/icon-256x256.png?rev=3665666) # Bawbab Interactive Maps 由 [bawbabtechnologies](https://profiles.wordpress.org/bawbabgroup/) 開發 [下載](https://downloads.wordpress.org/plugin/bawbab-interactive-maps.0.1.0.zip) * [詳細資料](https://tw.wordpress.org/plugins/bawbab-interactive-maps/#description) * [使用者評論](https://tw.wordpress.org/plugins/bawbab-interactive-maps/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/bawbab-interactive-maps/#installation) * [開發資訊](https://tw.wordpress.org/plugins/bawbab-interactive-maps/#developers) [技術支援](https://wordpress.org/support/plugin/bawbab-interactive-maps/) ## 外掛說明 Bawbab Interactive Maps lets you build intuitive, explorable digital maps for campuses, residential communities, commercial facilities, and business parks. Move beyond static images and let visitors search locations, explore layouts, and view detailed building or amenity information instantly. The plugin integrates seamlessly with WordPress, allowing administrators to manage map content using familiar dashboard tools. Eliminate duplicate work by linking existing WordPress pages directly to map features to reuse your content automatically. ### Features * **Explorable Interface:** Search locations and view detailed building or amenity data. * **WordPress Integration:** Manage all map content within your own website using standard WordPress tools. You own the data 100% in Bawbab Interactive Maps. * **Zero Duplication:** Link existing pages directly to map markers to sync content. * **Highly Customizable:** Complete control over installation, styling, and administration. * **External Links:** A direct link at the bottom of the information panel routes users to the corresponding full WordPress page for deeper exploration. * **Fully Responsive:** The interface fluidly adapts layout, menus, and controls across desktops, laptops, tablets, and phones. * **Future Roadmap:** Planned updates include advanced campus routing, multi-floor indoor navigation, and native Google Maps directions integration. ### External Services This plugin relies on the third-party Google Maps JavaScript API to function. Below is the required disclosure regarding the data transmitted, its purpose, and the applicable legal agreements. * **Service Name:** Google Maps JavaScript API * **Provider:** Google LLC * **Purpose:** This service is used to render interactive maps, geocode addresses, and handle map configurations within both the WordPress admin dashboard (block editor / admin screens) and on the public-facing frontend of your website. * **Data Transmitted:** When a map is loaded, the user’s browser connects directly to Google’s servers. This transmits the user’s IP address, browser user-agent string, the URL of the page where the map is embedded, and any API keys configuration details. * **When Data is Sent:** Data is sent automatically whenever a user interacts with the map block editor in the WordPress dashboard, or visits a webpage on the frontend that displays an interactive map generated by this plugin. * **Terms of Service:** [Read](https://maps.google.com/help/terms_maps/) * **Privacy Policy:** [Read](https://policies.google.com/privacy) ### User Guide #### 1. Data Importing & Maintenance * **How to Import:** Select your target layer (Parcels, Buildings, Roads, or Land Use), choose your local GeoJSON file, and click import. * **Safe Updates:** Re-importing updated GeoJSON files is non-destructive. It refreshes geometries and identifiers while preserving your custom descriptions, images, and linked pages. * **Clearing Layers:** Warning! The “Clear Layer” button permanently wipes all geographic features and custom metadata linked to that specific layer. #### 2. Advanced Map Configuration * **Visual Styling:** Toggle the global background map style (Road Map, Satellite, or Hybrid) and select an interface highlight accent color (Green, Blue, or Yellow). * **Google API Credentials:** The plugin requires a Google Maps API Key and a Map ID. Generating your own via the Google Cloud Console offers independent quota management, usage tracking, and domain restriction security. #### 3. The Feature Editor (Edit Tools) Manage individual feature metadata using a split-screen dashboard featuring a searchable directory on the left and an editing form on the right. * **Smart Organization:** Map features are dynamically categorized into custom layout groups (e.g., specific apartment floor plans, studio models, or cottage styles). * **Advanced Filtering:** Narrow down your assets using search bars or attribute filters to isolate specific unit types instantly. * **WordPress Page Syncing:** Link any map feature directly to an existing WordPress page. The plugin automatically syncs the page title, text, image galleries, and embedded videos to eliminate duplicate content updates. * ** Content Filtering:** The plugin automatically sanitizes synchronized WordPress content. It strips layout-heavy elements like tables, buttons, forms, scripts, and iframes to keep the interactive map side drawer clean and focused. * **Display Overrides:** Customize titles independently for the map interface without modifying the linked parent WordPress page name. * **Property Metadata:** Input custom unit data including square footage, fireplace options, sunroom availability, and precise bathroom counts to display across map popups. * **Advanced Media Overrides:** While Advanced Custom Fields (ACF) parameters pull media automatically, administrators can manually force custom video paths, swap specific floor plans from the Media Library, or toggle media visibility off entirely for individual markers. * **Dynamic Descriptions:** Choose whether a marker’s custom summary completely overwrites the synchronized WordPress page text, or appends cleanly to the top of it for temporary promotions and renovation notes. * **Batch Processing:** Edit multiple locations, adjust individual unit fields, and preview live location pins on a miniature embedded map simultaneously before pushing your changes live via a single batch save. #### 4. Shortcode & Block Integration * **Classic Editor Integration:** Adds a dedicated “Map” utility icon directly into the tinyMCE editor toolbar to auto-inject your map shortcode configuration instantly. * **Layout Scaling:** Maps display out-of-the-box at 100% available container width with an adjustable default viewport canvas profile height of 640px. * **Gutenberg Compatibility:** Fully supports modern Block Editor placements alongside the legacy shortcode engine for seamless multi-theme integration. #### 5. Visitor Front-End Experience The interactive map provides a modern, responsive layout that adapts to desktops, tablets, and mobile devices. Instead of navigating multiple webpages, visitors can visually browse your facility and view real-time building or amenity data. * ** Multi-Method Search:** Visitors can search directly by name via the top search bar to auto-center the map, or browse features grouped by custom categories (e.g., residential units, amenities, services). * **Familiar Map Controls:** Supports standard panning, zooming, and selection. * **Geofencing Safeguards:** Includes built-in geographic boundaries to prevent users from panning or zooming away from the designated campus extent. * **Multi-Level Buildings:** Built-in floor selector allows users to switch between levels using buttons or mouse-wheel scrolling to filter floor-specific features.*** Layer Management:** Visitors can toggle layers (buildings, roads, land use, markers) and adjust transparency to focus on specific data. * **Collapsible Legend:** Explains map symbols and color-coding without cluttering the screen. * **Map Styles:** Users can toggle freely between standard road maps and satellite views. * **Google Integration:** Built-in support for native zoom, compass, and Street View. #### 6. The Information Panel Side-Drawer Selecting any map feature opens a rich information panel compiled from custom map data and synced WordPress pages: * **Media Gallery:** Supports full-screen photographs, floor plans, and promotional videos. * **Quick Specifications:** Displays key property metadata like square footage, room counts, or specific amenities. * **Dynamic Descriptions:** Merges map-specific notes with imported WordPress content seamlessly. ### Technical Details This plugin is built using modern WordPress block development standards and advanced GIS rendering engines. It utilizes the following core libraries and technologies: *** WordPress Block Editor (@wordpress/block-editor):** Powers the user interface, block configurations, and side-panel inspector controls inside Gutenberg. * **WordPress Element (@wordpress/element):** Provides the React abstraction layer used to mount map configurations and live preview engines seamlessly. * **WordPress Scripts (@ wordpress/scripts):** Drives the asset packaging, CSS/JS bundling, linting, and build system automation. * **Google Maps JavaScript API:** Powers the dynamic front- end canvas layout, vector polygon renderings, layer overlays, and street views. * [View on GitHub](https://github.com/BawBabDev/bawbab-interactive-maps) * [Report Issues](https://github.com/BawBabDev/bawbab-interactive-maps-issues)* [Follow Co-developer – Marcel Oketch](https://github.com/oketchmarcellus) * [Follow Co-developer – Corentin Sanchez](https://github.com/Sanchez-C) For deep technical setups, see the developer guide at the end of this documentation. ### Developer Guide Follow these steps to set up, modify, and run this plugin environment locally. #### Prerequisites Ensure you have the following installed on your machine: * Node.js (LTS version recommended) * NPM (comes packaged with Node.js) * A local WordPress development environment (e.g., LocalWP, DevKinsta, or wp-env) * A valid Google Maps JavaScript API Key and Map ID configured for domain-level testing #### Dev Installation & Setup 1. Clone or move this plugin folder into your local WordPress installation directory: / wp-content/plugins/bawbab-interactive-maps 2. Open your terminal and navigate to the plugin root directory: cd /path/to/wp-content/ plugins/bawbab-interactive-maps 3. Install the required development dependencies and packaging tools: npm install #### Development Workflow * **Start Local Development Server:** Run the watch script to automatically track and compile your code changes in real-time as you edit block sources. npm start * **Build for Production:** Minify build distributions, optimize stylesheets, and prepare your plugin production package for deployment. npm run build * **Format Code:** Automatically fix script formatting layout structures to align strictly with WordPress core styling standards. npm run format * **Lint JavaScript & CSS:** Audit your code modules for warnings, logical bugs, and style violations before shipping updates. npm run lint:js npm run lint:css #### Testing Changes 1. Activate the plugin via your local WordPress Admin Dashboard. 2. Add your Google Maps credentials under **Map Settings Settings**. 3. Head to the **Importer** tab and run a test upload using a standard sample facility GeoJSON block file. 4. Open a post or page in the Gutenberg Editor, open the block inserter, and search for “Bawbab Interactive Map” to check the canvas preview rendering. ## 適用於區塊編輯器 這個外掛提供 1 個可供區塊編輯器使用的區塊。 * BawBab Interactive Map Widget BawBab Interactive Maps Widget to add your interactive map on your sitefront. ## 安裝方式 1. Navigate to **Plugins Add New Plugin** in your WordPress dashboard. 2. Click **Upload Plugin** at the top of the page. 3. Choose the plugin ZIP file provided by our team. 4. Click **Install Now** and activate the plugin. #### Plugin Management Safety * **Deactivation:** Disabling the plugin stops the map from rendering publicly but safely preserves all map data, settings, and custom layouts. * **Uninstallation:** Warning! Deleting the plugin via the WordPress dashboard permanently wipes all imported map data and configurations. This cannot be undone. ## 常見問題集 ### My changes are not visible on the website This is usually caused by caching. If updates do not show instantly, try these steps: 1. Force a browser reload using **Ctrl + F5** (Windows) or **Cmd + Shift + R** ( Mac). 2. Clear your local browser cache entirely. 3. Purge your WordPress caching plugin or server-side cache. 4. Clear any persistent hosting provider server-level caches. If issues persist, contact our support team. ### Can I update metadata by importing a new GeoJSON? No. The importer updates spatial geometries (outlines, paths, boundaries) without affecting custom WordPress database entries. Changes to metadata inside a new GeoJSON will not overwrite existing site content. To completely replace metadata, you must use the “Clear Layer” option first, which permanently deletes all existing customizations for that layer. ### What happens when new buildings are added to the GeoJSON? The plugin automatically detects and creates any new features found in the dataset. Meanwhile, existing features are updated with the new structural geometries while completely preserving their custom descriptions, links, and media. ### How do I prepare GeoJSON data for import? Files must follow standard GeoJSON specifications. Each feature requires a unique Feature ID (FID) along with layer attributes like Name, Category, Code, and Coordinates. Content management fields like galleries, videos, and descriptions are managed directly within WordPress and should be omitted from the GIS file. You can export compatible GeoJSON files directly from software like QGIS or ArcGIS. ### I already have Shapefiles. Can I use them? Yes. You can use standard GIS software to export your ESRI Shapefiles into GeoJSON format. You may need to tweak attribute column names to align with the plugin’s expected properties before running the importer. ### I don’t have any GIS data. Can you create it for me? Yes. Our team provides complete digitization services. We can map your buildings, campus boundaries, pathways, and points of interest from scratch, and deliver import- ready GeoJSON files. ### I Still Need Help For technical troubleshooting, manual setup, GIS digitization, or feature requests, contact our core support team directly via email: * **Corentin Sanchez Trenado:** corentins@bawbab.com * **Marcellus Oketch:** oketchmarcellus@bawbab.com ## 使用者評論 這個外掛目前沒有任何使用者評論。 ## 參與者及開發者 以下人員參與了開源軟體〈Bawbab Interactive Maps〉的開發相關工作。 參與者 * [ bawbabtechnologies ](https://profiles.wordpress.org/bawbabgroup/) * [ Marcel Oketch ](https://profiles.wordpress.org/marcellus89/) * [ corentinsanchez ](https://profiles.wordpress.org/corentinsanchez/) [將〈Bawbab Interactive Maps〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/bawbab-interactive-maps) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/bawbab-interactive-maps/)、 查看 [SVN 存放庫](https://plugins.svn.wordpress.org/bawbab-interactive-maps/)，或 透過 [RSS](https://plugins.trac.wordpress.org/log/bawbab-interactive-maps/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/bawbab-interactive-maps/)。 ## 變更記錄 #### 0.1.0 * Initial release. * Added support for custom vector layer maps (Parcels, Buildings, Roads, Land Use). * Implemented live-sync mechanics linking core WordPress pages to interactive map sidebar frames. * Integrated `@wordpress/block-editor` and `@wordpress/element` modules for administration setup modules. ## 中繼資料 * 版本 **0.1.0** * 最後更新 **6 天前** * 啟用安裝數 **少於 10 次** * WordPress 版本需求 ** 6.8 或更新版本 ** * 已測試相容的 WordPress 版本 **7.1** * PHP 版本需求 ** 7.4 或更新版本 ** * 語言 * [English (US)](https://wordpress.org/plugins/bawbab-interactive-maps/) * 標籤: * [gis](https://tw.wordpress.org/plugins/tags/gis/)[interactive map](https://tw.wordpress.org/plugins/tags/interactive-map/) * [進階檢視](https://tw.wordpress.org/plugins/bawbab-interactive-maps/advanced/) ## 評分 這個項目尚無任何評論記錄。 [撰寫評分](https://wordpress.org/support/plugin/bawbab-interactive-maps/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/bawbab-interactive-maps/reviews/) ## 參與者 * [ bawbabtechnologies ](https://profiles.wordpress.org/bawbabgroup/) * [ Marcel Oketch ](https://profiles.wordpress.org/marcellus89/) * [ corentinsanchez ](https://profiles.wordpress.org/corentinsanchez/) ## 技術支援 使用者可在技術支援論壇提出意見反應或使用問題。 [檢視技術支援論壇](https://wordpress.org/support/plugin/bawbab-interactive-maps/)