Многие компании хотят использовать карты на своих сайтах, чтобы отметить свои офисы или точки продаж. Я уже несколько раз для этих целей использовал модуль, который написал сам.
Для хорошей организации кода используем пространство имен, выделенное специально для нашего приложения.
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);
}
});
Оставте свой комментарий
