Как вставить Google Maps в WordPress

Добрый день дорогие друзья, недавно мне пришлось столкнуться с одной проблемой. Создавал туристический сайт для одного клиента и потом ещё занимался вёрсткой и натяжкой на WordPress.

И как полагается туристическому сайту — надо выводить карту местности или локации о которой идёт речь в статье.

Так как заказчик не очень хорошо разбирается в коддинге, решил я уменьшить ему забот и сделать автоматический вывод блока с картой от Google, под средством шорткода. Чтобы ему приходилось делать минимум усилий – зашёл на Google Maps, скопировал ссылку и добавил шорткод в текст статьи и всё, больше ничего делать не надо.

И так, сама функция для вывода карт в WordPress, которую надо прописать в functions.php:
[php]
function symby_googlemap($atts, $content = null) {
extract(shortcode_atts(array(
"width" => ‘650’,
"height" => ‘400’,
"src" => »
), $atts));

return ‘<div class="box_map">

<iframe src="’.$src.’&output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="’.$width.’" height="’.$height.’"></iframe>

</div>’;}

add_shortcode("map", "symby_googlemap");

[/php]

Описание скрипта

Всё довольно просто, создаём функцию symby_googlemap, в которой содержится массив с уже установленными значениями ширины и высоты отображаемой карты и вывод в iframe, так как Google Maps на сайтах выводиться именно через iframe.

Так же весь вывод обвёрнут в div, а это означает что вы можете присвоить ему какой-нибудь класс и задать своё оформление в css.

Далее мы подключаем нашу шорткод к WP, вот этой строчкой:

[php]
add_shortcode("map", "symby_googlemap");
[/php]

Вывод карты на сайте

Вывод карты с помощью вышеописанного шорткода, выполняется путём просто добавления вот такой строчки, в тело поста:

[php][map src="URL_карты"][/php]

Вы можете задавать свои значения высоты и ширины:

[php][map width="500" height="300" src="адрес_карты"][/php]

Чтобы получить ссылку на карту, надо зайти на Google Maps, выбрать требующую для вас локацию и кликнуть по иконке в виде ссылке, после этого откроется окно, где вы сможете скопировать ссылку с координатами на вашу карту.

Вот такой простенький получился урок, надеюсь, данная функция оказалась полезной для вас. Не забывайте подписываться на обновления сайта, так как впереди ещё очень много уроков.