Map & Location Plugin

A simple, consistent widget for displaying property location and map functionality. Fetches data from the property API and renders location information with map integration.

Features

• Fetches property location data from the property API
• Displays property address and location information
• Map integration (to be developed step by step)
• Responsive and minimal
• Consistent with other plugins
• Configurable title and brand color
• Generator file for easy setup: MapGen.html

Installation

1. Include the Script

<script src="./dist/0.0.1/map.iife.js"
        data-container-id="map-container"
        data-tenant-config='{
          "apiUrl": "https://your-api-endpoint.com",
          "propertyId": "8464",
          "showTitle": true,
          "brand": { "primary": "#1976d2" }
        }'></script>

2. Add the Container

<div id="map-container"
     data-property-id="8464">
</div>

Configuration

Example

<div id="map-container"
     data-property-id="8464"></div>

<script src="./dist/0.0.1/map.iife.js"
        data-container-id="map-container"
        data-tenant-config='{
          "apiUrl": "https://your-api-endpoint.com",
          "showTitle": false,
          "brand": { "primary": "#e91e63" }
        }'></script>

Generator

For a quick and error-free setup, use the MapGen.html generator file. It provides a form to configure your widget, preview the result, and copy-paste the generated code for your site.

Development Status

This plugin is currently in development. The basic structure and API integration are complete. Map functionality will be added step by step.

Current Features

✅ Basic plugin structure

✅ API integration

✅ Property data fetching

✅ Loading and error states

✅ Responsive design

✅ Internationalization support

✅ Interactive Google Maps integration using @vis.gl/react-google-maps

✅ Custom branded location markers

✅ Configurable map height

✅ Consistent with search-result plugin implementation

Planned Features

? Map clustering for multiple properties

? Custom map styles

? Street view integration

? Property search on map

Notes

• The plugin fetches property data from /apis/propertypage?pageid={propertyId}&language={language}.
• Extracts GeoLocation from Property.Details.GeoLocation in the API response.
• GeoLocation format: "latitude,longitude,zoom" (e.g., "37.07582924407646,-8.118081803565927,19").
• Uses @vis.gl/react-google-maps library (same as search-result plugin) for consistent implementation.
• Displays interactive Google Maps with custom branded location markers.
• Brand color affects map markers and UI elements.
• Map height is configurable via the mapHeight parameter.
• Title can be toggled via config.
• Uses the same map styling as the search-result plugin for consistency.