Блог

Статичная яндекс карта по адресу

Решение для сайта где необходимо вывести статичную яндекс карту в виде изображения. Преимущество такой карты, она будет загружаться быстрее. Особенность данного решения, в том что можно ввести только адрес. Адрес декодируется/преобразуется в широту и долготу с помощью api яндекс geocode. Ссылка на карту и на изображение сформируется автоматически. 

Такая карта подходит для использования небольшого размера например в сайдбаре ( в боковом блоке ). Конечно есть возможность воспользоваться конструктором карт яндекс. Но если вы используете плагин seo-регионы и у вас множество витрин - это отличное решение. Или вам необходимо менять адрес динамически. Достаточно добавить в скрипт адрес офиса или пункта выдачи товара. Нужно понимать, что такая карта не будет индексироваться, да и в этом нет особой необходимости. Для изображения можете поставить "заглушку".

Пример использования такой карты electrica-opt.ru

HTML
<a class="yandex_a" href="#" target="_blank">
    <img class="yandex_img" src="#" alt="">
</a>
JS
$.getJSON('https://geocode-maps.yandex.ru/1.x/?', {
    geocode: 'Ваш адрес',
    format: 'json'
    }).done(
    function (data) {
        pos_str = data.response.GeoObjectCollection.featureMember[0].GeoObject.Point.pos;
        pos_arr = pos_str.split(' ');
        map_str = 'https://static-maps.yandex.ru/1.x/?ll=' + pos_arr[0] + ',' + pos_arr[1] + '&z=17&l=map&size=260,400&pt=' + pos_arr[0] + ',' + pos_arr[1] + ',org';
        $('.yandex_img').attr('src', map_str);
        url_str = 'https://yandex.ru/maps/?ll=' + pos_arr[0] + '%2C' + pos_arr[1] + '&z=18&mode=whatshere&whatshere%5Bpoint%5D=' + pos_arr[0] + '%2C' + pos_arr[1] + '&whatshere%5Bzoom%5D=3';
        $('.yandex_a').attr('href', url_str);
        console.log(url_str);
    }
);

Просмотры: 133