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

Сопоставляем 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

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

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

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);
    }
});