# mapbox-google-maps-migration

Скилл для перевода проекта с Google Maps Platform на Mapbox GL JS: таблицы соответствий методов, событий и маркеров, порядок миграции.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1400 установок · ★ 83
- Автор: mapbox
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/mapbox/mapbox-agent-skills/tree/HEAD/skills/mapbox-google-maps-migration/SKILL.md
- Обновлён: 2026-10-23
- HTML: https://affpapa.org/nevibecode/skills/mapbox-google-maps-migration

## Что делает

Скилл держит перед агентом справочник соответствий между Google Maps Platform и Mapbox GL JS. Методы карты, события, маркеры, попапы — всё сведено в таблицы, где рядом стоят старый и новый вызов. Агент берёт оттуда готовый вариант и переписывает ваш код, а не изобретает API по памяти.

Главная ловушка миграции — порядок координат. В Google это `{lat, lng}`, в Mapbox `[lng, lat]`. Скилл отмечает это отдельным пунктом, поэтому есть шанс не перепутать широту с долготой в `setCenter` и `fitBounds`. Ещё одно расхождение: Google рисует маркеры как DOM-элементы, Mapbox — слоями WebGL, и для больших наборов точек скилл советует перейти на GeoJSON-источник со слоем `circle` или `symbol`.

Внутри есть чек-лист аудита: пройтись по функциям, которые вы используете сейчас, и понять, что переносится, а что нет. Street View прямого аналога в Mapbox не имеет — это повод проверить, нужен ли он вашему продукту вообще. Для работы понадобится access token Mapbox, его подставляют в `mapboxgl.accessToken` вместо ключа Google в теге script.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mapbox/mapbox-agent-skills --skill mapbox-google-maps-migration -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/mapbox-google-maps-migration/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/mapbox-google-maps-migration/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mapbox/mapbox-agent-skills --skill mapbox-google-maps-migration -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/mapbox-google-maps-migration/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mapbox/mapbox-agent-skills --skill mapbox-google-maps-migration -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/mapbox-google-maps-migration/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install mapbox/mapbox-agent-skills mapbox-google-maps-migration
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/mapbox-google-maps-migration/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add mapbox/mapbox-agent-skills --skill mapbox-google-maps-migration -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/mapbox/mapbox-agent-skills --path skills/mapbox-google-maps-migration
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/mapbox-google-maps-migration/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add mapbox/mapbox-agent-skills --skill mapbox-google-maps-migration -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/mapbox/mapbox-agent-skills/tree/HEAD/skills/mapbox-google-maps-migration/SKILL.md

## Когда брать
- перевести инициализацию карты с google.maps.Map на mapboxgl.Map
- найти аналог метода или события Google Maps в Mapbox GL JS
- заменить DOM-маркеры на GeoJSON-источник со слоем для тысяч точек
- переписать InfoWindow на mapboxgl.Popup
- составить список функций Google Maps, которые предстоит перенести

## Примеры запросов агенту
- Переведи инициализацию карты в этом файле с Google Maps на Mapbox GL JS, токен возьми из переменной окружения
- Замени google.maps.Marker на слой circle с GeoJSON-источником, точек около двух тысяч
- Покажи, чем заменить google.maps.event.addListener для события click

## Похожие
- [maplibre-mapbox-migration](https://affpapa.org/nevibecode/skills/maplibre-mapbox-migration.md) — скилл · 464 установки
- [syncfusion-react-maps](https://affpapa.org/nevibecode/skills/syncfusion-react-maps.md) — скилл · 702 установки
- [google-maps-platform](https://affpapa.org/nevibecode/skills/google-maps-platform.md) — скилл · 944 установки
- [google-maps-scraper](https://affpapa.org/nevibecode/skills/google-maps-scraper.md) — скилл · 2900 установок
- [seo-maps](https://affpapa.org/nevibecode/skills/seo-maps.md) — скилл · 6300 установок
- [angular-migration](https://affpapa.org/nevibecode/skills/angular-migration.md) — скилл · 10900 установок

Из того же набора: [mapbox/mapbox-agent-skills](https://affpapa.org/nevibecode/by/mapbox/mapbox-agent-skills.md) — 19 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md