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

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

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