Используя Panzoom и tippy на изображении карты, но советы увеличиваются, как этого избежать?

Question

Мой клиент проводит семинар по всему миру.Теперь он хотел страницу с картой и маркером, который будет всплывать при щелчке, рассказывая о событии, времени, месте проведения, дресс-коде и т. Д.

Подвох был в том, что они сказали, что не хотят идти сТипичные карты Google, им нужно что-то уникальное, любую фотографию из стоковых фотографий, что-то вроде изображения карты, сложенной оригами, или карту с кофейными зернами.Типичное изображение карты в стиле обоев.

Я обошел это требование и дал им первый черновик
Demo-Link

Но большинство событий происходит в европейских странах, и точки будут собираться там, поэтому они предложили мне добавить один или два масштаба прокрутки.Используя Panzoom, я добавил увеличение, уменьшение.

Fiddle

(function() {
        var $section = $('div').first();
        $section.find('.panzoom').panzoom({
            $zoomIn: $section.find(".zoom-in"),
            $zoomOut: $section.find(".zoom-out"),
            $zoomRange: $section.find(".zoom-range"),
            $reset: $section.find(".reset")
        });

        $('#myCarousel').carousel({
            pause: true,
            interval: false
        }); 

    })();

Но это тоже масштабирование контактов, Это абсолютно бесполезно.Есть ли какой-нибудь способ, которым булавки останутся прежними, и карта увеличится?Таким образом, когда в близлежащих странах наблюдается тесная группа событий, контакты будут разделены на уровне увеличения.

Если нет, можно ли это сделать каким-либо другим способом?