MapSpot

MapSpot - Interactive Map for Framer

MapSpot is a polished, interactive world map component for Framer that lets you showcase multiple locations with customizable markers and information cards.

Add locations using latitude and longitude, customize marker colors and styles, and display additional information such as headings, subtitles, descriptions, images, and status badges. Clicking a marker switches the active location card, making it easy for visitors to explore multiple locations directly on the map.

Features

- Interactive world map with multiple location markers

- Add unlimited custom map markers

- Latitude and longitude positioning

- Click markers to switch between location cards

- Custom location headings and subtitles

- Rich location descriptions

- Customizable country colors and borders

- Optional map grid / graticule

- Custom ocean and land colors

- Location cards automatically reposition to stay visible

Setup

- Open the Framer Remix and copy the component into your Framer project.

- Add MapSpot to your page.

- Add your locations from the Markers property.

- Enter a heading, subtitle, description, image, latitude, and longitude for each location.

- Customize the marker color and marker style.

- Configure the map appearance from Map Style.

- Customize the location information card from Card Style.

- Optionally configure the countries, grid, header, and layout.

Perfect For

- Office location sections

- Global company websites

- Logistics and transportation websites

- SaaS companies with global offices

- Store and branch locators

- Global presence sections

- Distribution and service networks

- Travel websites

- Real estate websites

- Event locations

- Company headquarters

- International business websites

For support, please include your project link, a short description of the issue, and a screenshot or screen recording when possible.

injamulhaquesomrat@gmail.com