Для карт используйте leafletjs.com. Внутри можете использовать кастомные карты + добавлять объекты на них. Есть богатый выбор плагинов, может найдете что под себя: leafletjs.com/plugins.html
По опыту знаю, что учишь-учишь, но без опыта экспертом не станешь. Придумай себе какой-нибудь проект, в ходе работы будут появляться вопросы, придётся ползти в справочники или искать решение на форумах, только так сможешь выучить язык в совершенстве.
Если делать всё это с нуля потребуется много времени и сил. Посмотрите вот на это готовое решение Mapplic, возможно как раз то, что нужно, правда плагин платный
Полностью создавать с нуля такое, мне кажется, слишком уж трудоёмко.
Можно создавать/редактировать планы в svg редакторе типа Inkscape или draw.io, и написать простенький визуальный редактор для добавления элементам нужных классов/атрибутов.