Как сделать вот такую интерактивную карту?

как по мне так проще найти готовое решение и допилить под свои нужды

Открывает AdobeIllustrator и или отрисовываете или переводите из PNG в нём каким-либо способом карту так, что бы каждая область бал на отдельном слое (это важно).
У каждой области будет свой id, вам останется только прикрепить события к каждому id что бы область подсвечивалась при наведении и нажатии, т.е. как с обычным DIV'ом.
Как сохранить Как сохранить svg в Adobe Illustrator без выезда за монтажную область?

1. Сгенерировать SVG с нужными контурами. Я бы не заморачивался с иллюстратором и обвел нужные участки при помощи этого сервиса: www.cssplant.com/clip-path-generator. На каждую polygon-область повесить общий класс и уникальный data-атрибут для идентификации (например, указываем id соответствующей надписи).
2. Сделать надписи и спозиционировать их абсолютно относительно карты. По умолчанию скрываем их.
3. На класс polygon-областей повесить обработчик события hover: считываем идентификатор области, показываем соответствующуую надпись и меняем цвет заливки и контура.

вот тут посмотри как я делал.
думаю не сложно разобраться.