Выделяем границы на карте онлайн

Применим фильтры svg для выделения контуров на карте в реальном времени. Карту можно масштабировать, перемещать центр карты и так далее. Результат применения фильтра - ниже.

А теперь приведем коды, с помощью которых это все сделано. Начнем с файла стилей:

iframe.fx{
 filter: url("#edge");
 -webkit-filter: url("#edge");
}

Дальше подключаем карту:
<iframe class="fx" src="https://www.google.com/maps/embed? pb=!1m14!1m12!1m3!1d1540838.5017348204! 2d30.598723998221782!3d50.633880595748046! 2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0! 3m2!1sru!2sua!4v1436637741810" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> И последний шаг - накладываем фильтр:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0"> <filter id="edge"> <feConvolveMatrix order="3 3" preserveAlpha="true" kernelMatrix="-1 -1 -1 -1 8 -1 -1 -1 -1"/> </filter> </svg>