MapScale Docs
•••
Platforms & SDKs

Add MapScale property search to WordPress

Install the MapScale plugin, connect your property fields, and publish a bilingual map search for Thailand.

Beginner

Download and install the plugin ZIP

Download /docs/downloads/mapscale-wordpress.zip. In WordPress, open Plugins > Add New Plugin > Upload Plugin, select the ZIP, choose Install Now, and activate MapScale. The archive already contains the mapscale plugin directory, so do not unzip or rename it before uploading.

Create a browser key and allow your WordPress origin

Create a publishable pk_live_… or pk_test_… key with tiles and autocomplete enabled. Add the exact public origin of the WordPress site to its allowed origins, for example https://agency.example (scheme, hostname, and port when one is present; no page path). Add each staging or alternate origin separately. Then open Settings > MapScale and paste the key into Publishable key.

Create a browser key and allow your WordPress origin
Publishable key: pk_live_your_key_here
					Allowed origin: https://agency.example

Enable every MapScale API safely from PHP

The plugin ships a server-side client for all 21 operations in the MapScale OpenAPI contract: health, status, contact capture, contact delivery status, trial-key creation, styles, tiles, fonts, routing, matrix, isochrones, forward and reverse geocoding, autocomplete, place details, place search, nearby places, place lookup by slug, admin-area reverse lookup, and static maps. Browser-safe products use the publishable key. Routing, matrix and geocoding use an sk_ key only inside PHP. Prefer defining MAPSCALE_SECRET_KEY from an environment-backed wp-config.php value; otherwise administrators can save it in Settings > MapScale. The secret is never added to block markup or browser JavaScript. Theme and plugin code can call mapscale_api()->geocode(), route(), route_post(), matrix(), isochrone(), reverse(), admin_area_reverse(), contact(), trial_key(), or the other explicit methods. The authenticated /wp-json/mapscale/v1/api/{operation} bridge is restricted to users with manage_options.

Enable every MapScale API safely from PHP
// wp-config.php — load the value from your host's secret environment.
define("MAPSCALE_SECRET_KEY", getenv("MAPSCALE_SECRET_KEY"));

// Theme/plugin PHP — never browser JavaScript.
$result = mapscale_api()->route([
	"coordinates" => "100.5018,13.7563;100.5685,13.7367",
	"profile" => "driving",
]);

Map your property post type and custom fields

In Settings > MapScale, match the plugin to the data already stored by your real-estate theme or listing plugin. The defaults are property for Property post type (property_post_type), _mapscale_latitude for Latitude meta key (latitude_meta_key), _mapscale_longitude for Longitude meta key (longitude_meta_key), _mapscale_price for Price meta key (price_meta_key), and _mapscale_bedrooms for Bedrooms meta key (bedrooms_meta_key). Replace any default that does not match your site. Coordinates must be decimal latitude and longitude values; only published posts with valid coordinates can appear.

Map your property post type and custom fields
Property post type: property
Latitude meta key: _mapscale_latitude
Longitude meta key: _mapscale_longitude
Price meta key: _mapscale_price
					Bedrooms meta key: _mapscale_bedrooms

Match the integration to your theme

The block and shortcode work with standard block and classic themes, and the component CSS is scoped, container-responsive, high-contrast aware, and selectable as automatic, light or dark. Listing compatibility is separate from visual compatibility: the built-in adapter expects one post type plus scalar latitude, longitude, price and bedroom post-meta values. Use the mapscale_property_settings, mapscale_property_query_args, mapscale_property_latitude, mapscale_property_longitude, mapscale_property_record and mapscale_properties filters when a theme stores coordinates in a combined value, custom table or proprietary schema. Installed desktop/mobile browser coverage includes WordPress 6.4 with Twenty Twenty-Four and a current-stack matrix of 16 freely installable themes: Twenty Twenty-Three, Twenty Twenty-Four, Twenty Twenty-Five, Astra, Hello Elementor with Elementor, Kadence, GeneratePress, OceanWP, Neve, Blocksy, Sydney, Hestia, Real Estate Salient, Real Estate Manager, Real Estate Elementor and its Real Estate Property Elementor child. Divi, Houzez, RealHomes, WP Residence and Homey passed public-demo CSS collision checks, but require their licensed installable ZIPs and bundled plugins before full installation certification.

Match the integration to your theme
add_filter("mapscale_property_latitude", function ($value, $post) {
	// Return a decimal latitude from your theme's storage format.
	return $value;
}, 10, 2);

Add the Gutenberg block or shortcode

Edit a page, insert the MapScale Property Map block (mapscale/property-map), and publish. In the Classic Editor or a page builder, use [mapscale_property_map]. Shortcode attributes can override height in pixels, initial zoom, center latitude and longitude, language, automatic/light/dark appearance, and the property limit for that map. Language defaults to Thai for a th* WordPress locale and English otherwise; limit defaults to 100 and cannot exceed 500.

Add the Gutenberg block or shortcode
[mapscale_property_map]

[mapscale_property_map height="560" zoom="12" lat="13.7563" lng="100.5018" language="th" appearance="dark" limit="150"]

Open the published page in a private browser window. Search for a known place in English, choose a suggestion with the keyboard or pointer, and confirm that the map recenters. Repeat on a Thai-locale page, or set language="th" in the shortcode, and search in Thai. The plugin sends the selected locale to MapScale autocomplete, groups keystrokes into one search session, and updates published property markers and the result list to the current viewport after the map moves.

Keep the integration secure and fast

A publishable pk_ key is expected to be visible in page source; protect it with the exact allowed-origin list and enable only the products this site uses. An sk_ key may be configured only as MAPSCALE_SECRET_KEY in wp-config.php or in the administrator-only settings field; never put it in a block, shortcode, HTML or client-side JavaScript. The bundled WordPress REST bridge for server APIs requires manage_options and is not a public proxy. Serve the site over HTTPS, keep WordPress and the plugin updated, retain the default limit of 100 unless the page needs more properties, and measure browser and server performance before raising it toward the maximum of 500. Normal WordPress page caching can remain enabled.

Troubleshoot the map, markers, and search

For a blank map or 401/403 response, confirm the key begins with pk_live_ or pk_test_, tiles and autocomplete are enabled, and the browser's exact origin is allowed. If markers are missing, check the post type, all four meta-key names, published status, decimal coordinates, and the current viewport. If search has no suggestions, test both the intended language and a broader place name, then inspect the browser console for an API status. Clear WordPress/page caches after changing settings; do not solve authorization errors by putting an sk_ key in the page.

On this page