Как реализовать такую карту?

Question

[Илья Пирожок]

Посоветуйте инструменты для реализации такой карты. Основные функции это :
1) Можем добавлять маркеры с адресами магазинов на карту.
2) При клике на маркер получать информацию о магазине.

Comments

[OVK2015]

OSM + leaflet, YandexMap, GoogleMap,- выбирайте

Answer 1

[Макс]

https://www.amcharts.com/javascript-maps/

Answer 2

[Магомед Магомедов]

Яндекс Карты:
Выделение регионов: https://tech.yandex.ru/maps/doc/jsapi/2.0/dg/conce...
Пример как ставить метки с балунами: https://tech.yandex.ru/maps/jsbox/2.0/balloon_and_hint
Подробнее про метки (примеру, как сменить значок): https://tech.yandex.ru/maps/doc/jsapi/1.x/dg/tasks...

Answer 3

[Андрей Косач]

Я реализовывал данный ф-ционал с помощью svg и js, изначально необходимо взять картинку карты в svg формате, в каждую область установить установить необходимое количество маркеров, с помощью js задать по умолчанию display: none либо opacity если есть желание появление сделать плавным, инфо при наведении подтягивать из бд или json файла.
Пример можно посмотреть по ссылке, там правда сделали уже по одной точке информация появляется при клике по области, изначально алгоритм был как у вас, js и карту можете скачать от туда же, и посмотреть как работает.
https://texsa.com.ua/najti-podryadchika/

Answer 4

[Alex Titakoff]

SVG, попозже возможно так же подкину аналог реализиации

-----
непрошло и года ;)
чет руки только дошли
https://github.com/alexiTakov/svg-map-Russia