Заметки с тегом «geo»

Подключение Яндекс.Карт после загрузки страницы

В API Яндекс.Карт есть метод ready, который выполняет указанную функцию после полной загрузки всех требуемых модулей. Однако он стабильно работает только когда карты подключаются на страницу в теге head или по крайней мере до события DOMContentLoaded. Если карту попытаться загрузить гораздо позже, то метод может и не выполниться (обсуждение этого дефекта в клубе и ещё другое обсуждение этого же вопроса). Гарантировано получить уведомление о готовности API для работы можно другим способом.

У загрузчика карт есть недокументированный параметр onload, в котором можно указать имя функции. Эта функция как раз будет вызвана, когда будут загружены все требуемые модули карты.

function loadYandexMaps(callback) {
    var callbackName = "_myapp_map_init",
        loaderUrl = "http://api-maps.yandex.ru/2.0/?" +
            "load=package.standard&" +
            "lang=ru-RU&" +
            "onload=" + encodeURIComponent(callbackName); 
    if (!window['ymaps']) {
        window[callbackName] = function () {
            callback();
            window[callbackName] = null;
        };
        yepnope.injectJs(loaderUrl);
    } else {
        callback();
    }
}

Загрузчик карт добавляется на страницу с помощью yepnope.js только тогда, когда он реально потребуется на странице.

Функции, которая добавляется в параметры загрузчика, должна быть доступна глобально. Т.е. использовать что-то вроде App.Maps.init уже не получится. С другой стороны, название этой функции не должно меняться, чтобы запросы могли быть закешированы браузером. Поэтому к выбору этого названия стоит подойти с особой тщательностью.

Комментарии к заметке: 1

Получаем местоположение пользователя

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

Сопоставляем IP-адрес пользователя его местоположению

У каждого компьютера в сети есть идентификатор — IP-адрес. Он назначается Интернет-провайдером, к которому подключен пользователь. А так как блоки адресов привязаны к конкретному городу, региону или стране, то этого достаточно, чтобы определить местоположение ваших пользователей.

Такую базу адресов можно хранить у себя на сервере, а можно воспользоваться сторонними решениями, например, Maxmind GeoIP database. Maxmind так же предоставляет JavaScript решение, которое можно использовать на своих сайтах:

<script type="text/javascript" src="http://j.maxmind.com/app/geoip.js"></script>
<script type="text/javascript">
$(function () {
    var lat = geoip_latitude();
    var lon = geoip_longitude();
    var city = geoip_city();
    var out = '<h3>Information from your IP</h3>'+
        '<ul>'+
        '<li>Latitude: ' + lat + '</li>'+
        '<li>Longitude: ' + lon + '</li>'+
        '<li>City: ' + city + '</li>'+
        '<li>Region: ' + geoip_region() + '</li>'+
        '<li>Region Name: ' + geoip_region_name() + '</li>'+
        '<li>Postal Code: ' + geoip_postal_code() + '</li>'+
        '<li>Country Code: ' + geoip_country_code() + '</li>'+
        '<li>Country Name: ' + geoip_country_name() + '</li>'+
        '</ul>';
    $("#geo-info").html(out);
});
</script>

Получаем местоположение пользователя через W3C Geo API

Точность определения местоположения через IP-адрес оставляет желать лучшего. Она, как правило, достоверно позволяет определить город. Говорить об определении улицы или даже дома просто не приходится. Другим недостатком этой техники является то, что пользователь может подключаться через прокси- или VPN-серверы, которые располагаются в совершенно других городах.

Комитет W3C предложил рекомендацию для Geo-location API, позволяющее браузеру запросить местоположение у пользователя. Она уже реализована в Firefox 3.5 и в Safari на iPhone.

// if the browser supports the w3c geo api
if (navigator.geolocation) {
    // get the current position
    navigator.geolocation.getCurrentPosition(
    // if this was successful, get the latitude and longitude
    function (position) {
        var lat = position.coords.latitude;
        var lon = position.coords.longitude;
    },
    // if there was an error
    function (error) {
        alert('ouch');
    });
}

По материалам Smashing Magazine

Оставте свой комментарий

Внедряем карты Google Maps на сайт

Многие компании хотят использовать карты на своих сайтах, чтобы отметить свои офисы или точки продаж. Я уже несколько раз для этих целей использовал модуль, который написал сам.

Для хорошей организации кода используем пространство имен, выделенное специально для нашего приложения.

var APP = {};

Собственно, код модуля:

(function () {

    // TODO!!! Нужно будет получить свой уникальный ключ
    var GOOGLE_MAP_KEY = "abcdefg";

    /**
     * Карта Google
     * @param root  корневой DOMElement, в котором будет рисоваться карта
     * @param model массив маркеров
     */
    APP.Map = function (root, model) {

        var map;

        function drawMap (map, data) {

            var i, bounds = new google.maps.LatLngBounds();

            for (i = 0; i < data.length; i++) {
                bounds.extend(new google.maps.LatLng(data[i].lat, data[i].lng));
            }

            map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

            // создаем базовый объект маркета
            var baseIcon = new google.maps.Icon(google.maps.DEFAULT_ICON);

            for (i = 0; i < data.length; i++) {
                (function (s) {
                    var icon, marker;
                    icon = new google.maps.Icon(baseIcon);
                    icon.image = s.icon || icon.image;
                    marker = new google.maps.Marker(new google.maps.LatLng(s.lat, s.lng), icon);
                    map.addOverlay(marker);

                    google.maps.Event.addListener(marker, "click", function() {
                        // обрабатываем клики по маркеру
                    });
                })(data[i]);
            }
        };

        // загружаем карту, если это необходимо, и рисуем маркеры
        try {
            if (typeof google === "undefined") {
                $(document).one("mapLoaded", function () {
                    map = new google.maps.Map2(root);
                    map.addControl(new google.maps.SmallZoomControl());
                    $("body").bind("unload", google.maps.Unload);
                    drawMap(map, model);
                });
                $.getScript("http://www.google.com/jsapi?key=" + GOOGLE_MAP_KEY + "&callback=APP.Map.callback");
            } else {
                drawMap(map, model);
            }
        } catch (exc) {};
    };

    APP.Map.callback = function () {
        google.load("maps", "2", {
            "callback": function () {
                $(document).trigger("mapLoaded");
            },
            // опциональный параметр, задающий язык карты
            "language": "ru"
        });
    };
})();

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

А теперь пример использования модуля.

// инициализируем карту тестовыми данными
$(function () {
    // центр в Челябинске
    var center = {lat: 55.16, lng: 61.4},
        mapHolder = $("#map-object").get(0),
        markers = [], i;

    if (mapHolder) {
        // случайно несколько маркеров около заданного центра
        for (i = 0; i < 10; i++) {
            markers.push({
                lat: center.lat + (Math.random() - 0.5) / 30,
                lng: center.lng + (Math.random() - 0.5) / 15
            });
        }
        markers.push(center);
        APP.Map(mapHolder, markers);
    }
});
Оставте свой комментарий