Ссылка для скачивания в самом низу страницы.

Начал с примитивов - прямоугольников (картинок) и кругов (эллипсов). Дело совершенно не хитрое перевел координату в точки по карте и умножил сторону (радиус) на два в степени приближение.

// рисуем круг из центра координат с радиусом


Overlay.prototype.onAdd = function() {


	var center = this.getProjection().fromLatLngToDivPixel(new google.maps.LatLng(0,0)), // центр мира
		worldWidth = this.getProjection().getWorldWidth(); // длина мира


	this.div = document.createElement('div'); // наш слой
	this.div.style.border = 'none';
	this.div.style.position = 'absolute';
	this.div.style.overflow = 'visible';
	this.div.style.left = center.x - worldWidth / 2 + 'px'; // от левого края карты
	this.div.style.top = center.y - worldWidth / 2 + 'px'; // от верха карты
	this.div.style.width = worldWidth+'px'; // шириной в карту
	this.div.style.height = worldWidth+'px'; // высотой в карту


	// таким образом див полностью перекрывает одну (центральную) секцию карты
	// заметте, карта повторяеться горизонтально 
	// но этот слой лежит только поверх одной секции не перекрывая соседние


	this.getPanes().overlayImage.appendChild(this.div); // добавляем слой на карту
	this.canvas = Raphael(this.div); // делаем из слоя холст для рисования


};


Overlay.prototype.draw = function() {
	var center = this.getProjection().fromLatLngToDivPixel(new google.maps.LatLng(0,0)), // центр круга
		worldWidth = this.getProjection().getWorldWidth(), // длина карты
		left = center.x - worldWidth / 2, // край карты
		top = center.y - worldWidth / 2, // край карты
		scale = 1 << this.getMap().getZoom(), // увеличение ( Math.pow(2, zoom))
		r = scale * radius, // реальный радиус
		x = center.x - left, // координата по слою
		y = center.y - top; // координата по слою


		this.canvas.clear(); // чистим холст от старых картинок
		this.canvas.circle(x, y, r); // рисуем круг


}

Вот собственно простейший пример и готов. Но мне же этого мало! А что если круг нарисовать с радиусом больше чем worldWidth/2? Тогда он будет вылазить за рамки слоя и будет обрезан по краям. Но это же не кошерно (или не по фен-шую :) ). Что же делать? Надо расширить слой. Слой расширяется в четырех направлениях так как он выпирает за границы слоя со всех четырех сторон. просто расширить слой не достаточно потому как див перестанет выпирать только справа и снизу, надо еще сместить див влево и вверх, но если сместили див надо поправить координаты круга. Для тех кто не дружит с математикой как я все страшно запутано поэтому показываю на примере.

// r > worldWidth / 2 по условию


Overlay.prototype.draw = function() {
	var center = this.getProjection().fromLatLngToDivPixel(new google.maps.LatLng(0,0)), // центр круга
		worldWidth = this.getProjection().getWorldWidth(), // длина карты
		left = center.x - worldWidth / 2, // край карты
		top = center.y - worldWidth / 2, // край карты
		scale = 1 << this.getMap().getZoom(), // увеличение ( Math.pow(2, zoom))
		r = scale * radius, // реальный радиус
		x = center.x - left, // координата по слою
		y = center.y - top, // координата по слою


		// отступы
		offsetLeft = r - x,
		offsetTop = r - y,
		offsetRight = r + x - worldWidth,
		offsetBottom = r + y - worldWidth,


		// длина и высота учитывая отступы
		fullWorkdWidth = offsetLeft + worldWidth + offsetRight,
		fullWorkdHeight = offsetTop + worldWidth + offsetBottom;


		// изменяем положение слоя и размеры холста
		this.div.style.left = left - offsetLeft + 'px';
		this.div.style.top = top - offsetTop + 'px';
		this.div.style.width = fullWorkdWidth + 'px';
		this.div.style.height = fullWorkdHeight + 'px';
		this.canvas.setSize(fullWorkdWidth, fullWorkdHeight);


		this.canvas.clear();
		this.canvas.circle(x, y, r); // рисуем круг


}

В результате получаеться где-то такая фигура

Примерно так же рассчитываться прямоугольники, но показывать их просто так не интересно, интересно станет когда фигур на карте будет больше одной и выпирать они будут за края карты с разных сторон и на разную длину. В этом случаи надо сначала просчитать все фигуры, найти максимальные отступы, подвинуть слой, сместить фигуры и только потом что-то рисовать. Пробуем:

Походу с примитивами разобрались, Но кому нужны эти примитивы? Все хотят отмечать на карте разного рода кривые и полигоны (многогранники), что же, нужно и это реализовать. Возьмем пример которым пользуется Dmitry Baranovskiy, автор RaphaelJS - это петля Мёбиуса, знак бесконечности или просто перевернутая восьмерка для людей без воображения. Задаётся она вот такими координатами M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z. Координаты как вы ведите относительные (это видно из маленьких "с"), но даже если бы они были абсолютными это было бы не страшно. Первое что делаем переводим абсолютные в относительные, потом смещаем первую точку куда нам надо и умножаем все остальные точки по известной формуле.

Overlay.prototype.draw = function() {
	var center = this.getProjection().fromLatLngToDivPixel(new google.maps.LatLng(0,0)), // точка смещения
		worldWidth = this.getProjection().getWorldWidth(), // длина карты
		left = center.x - worldWidth / 2, // край карты
		top = center.y - worldWidth / 2, // край карты
		scale = 1 << this.getMap().getZoom(), // увеличение ( Math.pow(2, zoom))
		path = Raphael.pathToRelative(Raphael.parsePathString("M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z"));
		line = [];


		for (var i in path) {
			for (var j in path[i]) {
				if (j == 0) {
					line[i] = [path[i][j]]; // буква
				} else if (i==0 && j==1) {
					line[i].push(center.x - left + path[i][j]); // начальная точка по X
				} else if (i==0 && j==2) {
					line[i].push(center.y - top + path[i][j]); // начальная точка по Y
				} else {
					line[i].push(path[i][j] * scale);  // все остальные точки
				}
			}
		}


		this.canvas.clear();
		this.canvas.path(line);


}

Единственный минус рисования кривой (как и текста), это то что пока не нарисуешь не узнаешь размеров, конечно можно долго высчитывать их по координатам но по моему это того не стоит, особенно если координаты относительные. С другой стороны узнать размер можно после рисования, вытереть и сместить все что нужно и нарисовать по новой, но по моему это требует еще больше усилий, хотя формулой для этого я не поделиться не могу.

	// для кривой (рисуеться с левого верхнего края)
	var path = this.canvas.path(line),
		width = path.getBBox().width,
		height = path.getBBox().height,
		x = point.x - left,
		y = point.y - top;


	// для текста (рисуеться из центра)
	var text = this.canvas.text(point.x, point.y, text),
		width = text.getBBox().width,
		height = text.getBBox().height,
		x = point.x - width / 2 - left,
		y = point.y - height / 2 - top;

С основными возможностями и трудностями рисования разобрались переходим к конкретным примерам

Прямоугольники

Есть пять разный вариантов нарисовать прямоугольник

• Ограничить область на карте с помощью границ (LatLngBounds)
• Нарисовать как во всех графических редакторах из верхнего левого угла с привязкой к координате
• Нарисовать как круг указав координату центра
• Нарисовать от левого верхнего угла в определенной точке на карте, при этом надо знать размер дива с картой и сам прямоугольник не будет менять позиции про движении карты, а уедет за край видимой области
• То же что и предыдущий, только из центра

	var map = new google.maps.Map(document.getElementById("map"), {
		zoom: 0,
		center: new google.maps.LatLng(0,0),
		mapTypeId: google.maps.MapTypeId.SATELLITE
	});


	new RaphaelOverlay({
		map:map,
		shapes : [{
			// прямоугольник ограниченный парой координат
			// может пропадать при движении карты
			// из-за отрицательной длинны
			position : new google.maps.LatLngBounds(
				// верхний првым угол (north-east)
				new google.maps.LatLng(50, -100), 
				// нижний левый угол (south-west)
				new google.maps.LatLng(-50, 100)
			),
			type: "rect",
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#00f', 
				"fill-opacity": 0.3
			}
		},{
			// обычный прямоугольник нарисованный 
			// из верхнего левого угла
			// от координат 
			position : new google.maps.LatLng(85, -175),
			// и имеющий размеры 100x100
			size : new google.maps.Size(100, 100),
			type: "rect",
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#0f0', 
				"fill-opacity": 0.3
			}
		},{
			// прямоугольник нарисованный 
			// из центра
			// от координат
			center : new google.maps.LatLng(-85, 175),
			// и имеющий размеры 100x100
			size : new google.maps.Size(100, 100),
			type: "rect",
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#f00', 
				"fill-opacity": 0.3
			}
		},{
			// прямоугольник нарисованный 
			// из верхнего левого угла
			// от верхнего левого угла карты
			// такой прямоугольник не меняет позиции 
			// при движении карты
			position : new google.maps.Point(300, 100),
			size : new google.maps.Size(100, 100),
			type: "rect",
			// скругление углов
			radius: 10,
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#ff0', 
				"fill-opacity": 0.3
			}
		},{
			// такой же как предыдущий, только 
			// из центра 
			center : new google.maps.Point(300, 100),
			size : new google.maps.Size(100, 100),
			type: "rect",
			// скругление углов
			radius: 10,
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#f0f', 
				"fill-opacity": 0.3
			}
		}]
	});

Картинки

По большому счету ничем не отличаются от прямоугольников, кроме того что имеют ссылку на картинку и не имеют скругления углов

	new RaphaelOverlay({
		map:map,
		shapes : [{
			// ссылка на картинку
			src : "http://upload.wikimedia.org/wikipedia/commons/d/d6/Wikipedia-logo-v2-en.png",
			position : new google.maps.LatLng(85, -175),
			size : new google.maps.Size(135, 155),
			type: "image"
		}]
	});

Круги и овалы

	new RaphaelOverlay({
		map:map,
		shapes : [{
			// у круга центр совпадает с позицией
			// но центр приоритетнее
			center: new google.maps.LatLng(85, 175),
			type: "circle",
			radius: 100,
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#0f0', 
				"fill-opacity": 0.3
			}
		},{
			// как и квадрат круг и овал можно рисовать
			// из фиксированной точки
			position: new google.maps.Point(300, 100),
			type: "circle",
			radius: 100,
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#f00', 
				"fill-opacity": 0.3
			}
		},{
			// овал отличается от круга двумя радиусами
			position: new google.maps.LatLng(-85, -175),
			type: "ellipse",
			rx: 100,
			ry: 50,
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#00f', 
				"fill-opacity": 0.3
			}
		}]
	});

Кривые и полигоны

	new RaphaelOverlay({
		map:map,
		shapes : [{
			// Фигура нарисованная по координатам
			// может менять ширину при движении карты
			position : [
				new google.maps.LatLng(84, -175),
				new google.maps.LatLng(84, 175),
				new google.maps.LatLng(0, 0)
			],
			type: "polygon",
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#f00', 
				"fill-opacity": 0.3
			}
		},{
			// Фигура нарисованная по кривой 
			// с абсолютными координатами
			position: new google.maps.LatLng(85, -175),
			path: "M 0 0 L 200 0 L 100 200 z",
			type: "path",
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#f00', 
				"fill-opacity": 0.3
			}
		},{
			// Фигура нарисованная по кривой 
			// с относительными координатами
			position: new google.maps.LatLng(85, -175),
			path: "M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z",
			type: "path",
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#f00', 
				"fill-opacity": 0.3
			}
		}]
	});

Текст

	new RaphaelOverlay({
		map:map,
		shapes : [{
			position: new google.maps.LatLng(0, 0),
			text : "CTAPbIu_MABP",
			type: "text",
			attr : {
				fill: '#fff', 
				"font-size" : 20
			}
		}]
	});

Похоже это все, забыл только сказать что есть еще настройка приближения. Поскольку во всех примерах приближение поставлено минимальное, то при приближении хотя бы 10 все фигуры распадутся и будет очень некрасиво. Это происходит по разным причинам - кривизна SVG или VML или переполнение int32 в параметре ширины или высоты. Поэтому я сделал поправку на приближение. Первых два пункта интуитивно понятны это минимальное и максимальное приближение на котором видно фигуру, а третий пункт это приближение на котором заданы координаты кривых. То есть фигуру видно с 3 по 5 приближение, но координаты были рассчитаны при нулевом то можно это указать, иначе считается что они были заданы по меньшему из видимых. Смотрите пример с 3 по 5 приближение возле маркера.

	new RaphaelOverlay({
		map:map,
		shapes : [{
			position: new google.maps.LatLng(0, 0),
			path: "M0,0c0,50 100-50 100,0c0,50 -100-50 -100,0z",
			type: "path",
			zoom : {
				min : 3,
				max : 5,
			},
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#f00', 
				"fill-opacity": 0.3
			}
		},{
			position: new google.maps.LatLng(0, 0),
			path: "M0,0c0,50 100-50 100,0c0,50 -100-50 -100,0z",
			type: "path",
			zoom : {
				min : 3,
				max : 5,
				adjusted : 0
			},
			attr : {
				stroke: '#fff', 
				"stroke-width":2, 
				fill: '#f00', 
				"fill-opacity": 0.3
			}
		}]
	});

Скачать скрипт можно тут DOWNLOAD LINK. Вот и все, надеюсь будет хоть кому-то полезно!

На этот раз я довел Эвклидову проекцию до ума, и теперь с ней действительно можно что-то рисовать. А так же накодил более менее сносную прокладку между Raphaël и Google Maps, теперь ею можно рисовать. Пожалуй вот сейчас этим и займемся.

Код прокладки еще сырой и выкладывать его пока не буду, чтобы потом по 10 раз не править. Но если кто хочет посмотреть то он может посмотреть его тут. А я пока прокомментирую. Для того чтобы нарисовать что-либо поверх карты рисуется див во всю ширину и высоту. Да-да вы правильно поняли если взять гуглокарту и приблизить уровень так на десятый, чтобы стало видно города, то ширина дива будет несколько тысяч пикселей. Потом в этом диве Raphaël уже рисует свои фигуры. Передаваемые параметры считаются за первый уровень приближения, дальше масштабируются по простой формуле [width = width * (1 << zoom)]. У меня на практике такой образ отрисовки совсем не тормозил, не смотря на космические цифры (Core2 2.33, RAM 4, FF 3.6.8), расскажите в каментах как быстро рисуеться у вас.

Из видимых недостатков только один - если подвигать карту чуть-чуть вправо-влево то видно что четвертушка круга рисуется то в правом, то в левом верхнем углу. И там и там она рисуется правильно, но еще правильнее было бы ели бы рисовался полный круг выходя за края карты, но поскольку див (соответственно и область рисования svg или vml) имеет ширину и высоту карты, то вылезти за его рамки не представляется возможным и фигура остается усеченной. Надо будет попробовать задавать размеры диву при отрисовке каждой новой фигуры.

А теперь я пожалуй покажу как этим добром пользоваться, думаю что при добавлении новых возможностей вид передаваемых данных не измениться

function initialize() {


	// для всяких недобраузеров или отключенного фаербага
	if (!("console" in window)){
		window.console = {log:alert};
	}


	// я использую Эвклидову проекцию но можно брать и обычные карты
	var map = new google.maps.Map(document.getElementById("map"), {
		zoom : 0,
		center : new google.maps.LatLng(0,0),
		mapTypeControlOptions : {
			mapTypeIds: ['myCustomMap']
		}
	});


	map.mapTypes.set('myCustomMap', new CoordMapType());
	map.setMapTypeId('myCustomMap');


	// маркер для того чтобы проверить координату
	var marker = new google.maps.Marker({
		position : new google.maps.LatLng(0, 0),
		map : map,
		draggable : true
	});


	google.maps.event.addListener(marker, 'dragend', function() {
		console.log(this.getPosition());
	});


	// а вот и новый слой
	new RaphaelOverlay({
		map : map,
		figures : [{
			position : new google.maps.LatLng(85, 175),
			type : "circle",
			radius : 100,
			attr : {
				"stroke" : "#fff", 
				"stroke-width" : 2, 
				"fill" : '#000', 
				"fill-opacity" : 0.3
			}
		},{
			position: new google.maps.LatLng(85, -175),
			type: "rect",
			width: 100,
			height: 100,
			attr : {
				"stroke" : "#fff", 
				"stroke-width" : 2, 
				"fill" : '#000', 
				"fill-opacity" : 0.3
			}
		},{
			position : new google.maps.LatLng(0, 0),
			type : "ellipse",
			rx : 100,
			ry : 50,
			attr : {
				"stroke" : "#fff", 
				"stroke-width" : 2, 
				"fill" : "#000", 
				"fill-opacity" : 0.3
			}
		},{
			position : new google.maps.LatLng(0, 0),
			src : "http://upload.wikimedia.org/wikipedia/commons/d/d6/Wikipedia-logo-v2-en.png",
			type : "image",
			width : 135,
			height : 155
		},{
			position : new google.maps.LatLng(0, 0),
			text : "CTAPbIu_MABP",
			type : "text",
			attr : {
				"fill" : "#fff", 
				"font-size" : 20
			}
		}]
	});


}


google.maps.event.addDomListener(window, 'load', initialize);

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

Я упомянул в прошлом посте, что я хотел нарисовать десяточку на улыбке Моны Лизы, но из-за стечения обстоятельств так этого и не сделал. И не сделаю сегодня ;) Но покажу куда копать.

В третьей (3.1 если быть точнее) версии API появились встроенные объекты, попробуем их использовать для рисования.

	for (var i=0,j=11;i&ly;j;i++){
		new google.maps.Circle({
			strokeWeight: 2,
			strokeColor : "#ffffff",
			map : map,
			center : new google.maps.LatLng(0, 0),
			radius : i*1000000
		});
	}

Updated 04.09.10 после небольшой коррекции реализации Эвклидовой проекции, круги перестали правильно рисоваться, так что в этом примере проекция немного подхачена, чтобы вернуть кругу былую квадратность.

В рот мне ноги! Да это же квадратичный круг! Не-не-не Дэвид Блэйн ты нас не проведешь!

Вобщем вы поняли что это лажа и при больших радиусах круг становиться не очень круглым. Хотя идея хороша.

Ну думаю самое время перейти к рисованию кругов при помощи Raphaël

function RaphaelCircle(options) {
	this.options = options;
	this.setMap(options.map);
}


RaphaelCircle.prototype = new google.maps.OverlayView();


RaphaelCircle.prototype.onAdd = function() {
	this.div = document.createElement('DIV');
	this.div.style.border = '0px solid';
	this.div.style.position = 'absolute';
	this.div.style.overflow = 'visible';


	this.getPanes().overlayImage.appendChild(this.div);
	this.canvas = Raphael(this.div, 100, 100);
};


RaphaelCircle.prototype.draw = function() {


	var radius = (1 << this.getMap().getZoom()) * this.options.radius,
		center = this.getProjection().fromLatLngToDivPixel(this.options.position);
	this.div.style.left = center.x - radius / 2 + 'px';
	this.div.style.top = center.y - radius / 2 + 'px';
	this.div.style.width = radius + 'px';
	this.div.style.height = radius + 'px';
	this.canvas.setSize(radius, radius);
	if (this.circle) {
		this.circle.remove();
	}
	this.circle = this.canvas.circle(radius / 2, radius / 2, radius / 2)
	this.circle.attr({stroke: '#fff', "stroke-width":2, fill: '#000', "fill-opacity": 0.3});


};


RaphaelCircle.prototype.onRemove = function() {
	this.circle.remove();
	this.div.parentNode.removeChild(this.div);
};

Если забить на то как я обошёлся с опциями при создании объекта, то в принципе все нормально. Можно запускать!

С таким подходом можно создать новый overlay который будет рисовать не просто круг а сразу всю десяточку. Успехов!

На самом деле я искал репродукцию Моны Лизы для того чтобы нарисовать мишень (десяточку) на ее улыбке, но в галереи этой репродукции не было. Да и вообще к тому времени как я при помощи своего гуглоридера (сколько раз мама говорила - ставь звездочки) нашел эту галерею, я уже об этом не думал. Кстати о галерее - The Kremer Collection! Очень уж она хороша, в плане того, что ребята не заебались и отсканили какие-то каляки-маляки. Но видимо в силу своей неграмотности, убогости и непросвещенности я ни одной знакомой фамилии художника так и не заметил.

Upadte 17.08.10 ShadowX уже уличил меня в том, что я незаметил Рембранта.

Так, хватит болтать не по теме. С десяточкой не вышло, а вот галерея как мне показалось работает не по феншую. Мало того что работает на выходных и без обеденного перерыва так еще и на Google Map API v2. Простите за ключевики но такова природа блога что его должны находить через поисковик. И задумал я коварное, а точнее перевести ее на Google Map API v3. И вооружился для этого мануалом, но тот не помог мне, потому что глуп я и в системах координат, да и вообще в математике не шарю. И стал я читать умную литературу... вру! Кароче, нагуглил я реализацию трех систем координат (про две из них я уже писал) Меркатора, Гэлла и Питерса и та что мне была нужна - Эвклидова

Вот с ней то я дальше и игрался, переписав код как мне больше нравилось и применив функцию создания имени картинки, честно стыренную из галереи, я сообразил вот это:

// Эвклидова Проекция
var EuclideanProjection = function (){
	// Ширина, она же высота одного кусочка картинки
	var EUCLIDEAN_RANGE = 256; 
	// Центр этой самой картинки
	this.pixelOrigin = new google.maps.Point(EUCLIDEAN_RANGE / 2, EUCLIDEAN_RANGE / 2);
	// Количество градусов в одном пикселе картинки
	this.pixelsPerLonDegree = EUCLIDEAN_RANGE / 360;
	// Количество радиан в одном пикселе картинки
	this.pixelsPerLonRadian = EUCLIDEAN_RANGE / (2 * Math.PI);
};


// Эти два метода надо реализовать в классе проекции
// http://code.google.com/apis/maps/documentation/javascript/maptypes.html#Projections
EuclideanProjection.prototype = {
	pixelOrigin : new google.maps.Point(0,0),
	pixelsPerLonDegree : 0,
	pixelsPerLonRadian : 0,


	// код взят из 
	// http://library.ucf.edu/Web/JS/Maps.js
	// в работе можно глянуть тут
	// http://library.ucf.edu/Administration/Maps/
	// страна должна знать героев в лицо
	fromLatLngToPoint : function(latLng, opt_point) {
		var point = opt_point || new google.maps.Point(0, 0);
		point.x = this.pixelOrigin.x + latLng.lng() * this.pixelsPerLonDegree;
		point.y = this.pixelOrigin.y + (-1 * latLng.lat()) * this.pixelsPerLonDegree;
		//console.log("fromLatLngToPoint", latLng, point);
		return point;
	},


	fromPointToLatLng : function(point) {
		var lng = (point.x - this.pixelOrigin.x) / this.pixelsPerLonDegree,
			lat = -1 * (point.y - this.pixelOrigin.y) / this.pixelsPerLonDegree;
		//console.log("fromPointToLatLng", point, new google.maps.LatLng(lat , lng, true));
		return new google.maps.LatLng(lat , lng, true);
	}
};


// Новый тип карты CoordMapType
// http://code.google.com/apis/maps/documentation/javascript/maptypes.html#MapTypeInterface
var CoordMapType = function (){};
CoordMapType.prototype = {
	name : "Custom Map Type",
	alt : "Tile Coordinate Map Type",
	minZoom : 0,
	maxZoom : 5,
	tileSize : new google.maps.Size(256,256),
	projection : new EuclideanProjection(),
	// Эта функция взята из галереи The Kremer Collection
	// http://www.thekremercollection.com/art/artists/Adriaen-Thomasz-Key-%28formerly-attributed-to%29/Portrait-of-a-Spanish-grande/detail/
	// и испотльзуеться только для составления имен картинок эток конкретной галереи
	getTile : function(coord, zoom, ownerDocument) {
		var div = ownerDocument.createElement('DIV'),
		c = 1 << zoom,
		x = coord.x,
		y = coord.y;


		if (y < 0 || y >= c || x < 0 || x >= c || zoom > 4) {
			div.style.height = '256px';
			div.style.width = '256px';
			div.style.backgroundColor = '#fcf8ed';
			div.style.fontSize = '9';
			div.style.textAlign = 'center';
			div.innerHTML = zoom > 4 ? 'Sorry, we have no map <br /> images for this zoom level.' : '';
			return div;
		}


		for (var g = 0, f = "t"; g < zoom; g++) {
			c = c / 2;
			if (y < c) {
				if (x < c) {
					f += "q"
				} else {
					f += "r";
					x -= c
				}
			} else {
				if (x < c) {
					f += "t";
					y -= c
				} else {
					f += "s";
					x -= c;
					y -= c
				}
			}
		}


		div.innerHTML = "<img src=\"http://www.thekremercollection.com/art/img/paintings/zoom/portrait_of_a_spanish_grande_tiles_14/" + f + ".jpg\" alt=\"\" width=\"256\" height=\"256\" />";


		return div;
	}
};


function initialize() {


    var map = new google.maps.Map(document.getElementById("map"), {
		zoom: 0,
		center: new google.maps.LatLng(0,0),
		mapTypeControlOptions: {
			mapTypeIds: ['myCustomMap']
		}
    });


    map.mapTypes.set('myCustomMap', new CoordMapType());
    map.setMapTypeId('myCustomMap');	
}
google.maps.event.addDomListener(window, 'load', initialize);

Ну и конечно можете пощупать в живую

PS Совсем забыл сказать что последний уровень увеличения не работает умышленно, хотел показать как сделать обработку несуществующих данных.

Но поговорить я хотел не о картах, и не о маркерах а о InfoWindow. Забавно то что на всех картах и во всех примерах InfoWindow всегда один, при нажатии на маркер он просто меняет якорь (маркер) и текст. Никто и никогда не подозревал, что люди хотят сравнить два или больше маркера (я говорю маркера потому что без дополнительного кода google.maps.InfoWindow цепляется только к google.maps.Marker) по параметрам открыв их InfoWindow.

Итак задача: открывать для каждого маркера свой InfoWindow. На самом деле может показаться что все очень просто:

var map = new google.maps.Map(document.getElementById("map1"), {
	zoom: 5,
	center: new google.maps.LatLng(50.440951, 30.527181),
	mapTypeId: google.maps.MapTypeId.HYBRID
});
var marker = new google.maps.Marker({
	map: map,
	position : new google.maps.LatLng(50.440951, 30.527181),
	draggable : false
});
google.maps.event.addListener(marker, "click", function(e){
	map.setCenter(this.getPosition());
	new google.maps.InfoWindow({
		content: this.getPosition().toString()
	}).open(map, this);
});

Но нет, таким способом при каждом клике на маркер будет открываться новое InfoWindow и они будут наслаиваться. Значит надо иметь ссылки на все объекты InfoWindow.

В этом примере я уже использую MarkerManager, с ним как-то удобнее ;)

var myMarkerManager = new MarkerManager(
	new google.maps.Map(document.getElementById("map2"), {
		zoom: 5,
		center: new google.maps.LatLng(50, 27),
		mapTypeId: google.maps.MapTypeId.HYBRID
	})
);
myMarkerManager.createMarker(new google.maps.LatLng(50.440951, 30.527181));
myMarkerManager.createMarker(new google.maps.LatLng(49.836944, 24.005000));


var windows = [];
function createInfoWindow(marker){
	var window = new google.maps.InfoWindow({
		content: marker.getPosition().toString()
	})
	google.maps.event.addListener(window, "closeclick", function(e){
		windows.splice(MarkerManager.prototype.inArray(marker, windows), 1);
	});
	window.open(myMarkerManager.map, marker);
	windows.push(window);
}


for (var i in myMarkerManager.markers){
	google.maps.event.addListener(myMarkerManager.markers[i], "click", function(e){
		myMarkerManager.map.setCenter(this.getPosition());


		for (var i=0, length=windows.length; i<length; i++){
			if (windows[i].getContent()==this.getPosition().toString()) {
				return;
			}
		}
		createInfoWindow(this);
	})
}

Но и этот способ не айс. Смотрите что происходит: нужно иметь список всех InfoWindow, но никакого метода для их получения не существует. Я очень надеялся найти что-то вроде

// fake code!
var overlays = google.maps.Map.getOverlays();
for (var i in overlays ){
	if (overlays[i] instanceof google.maps.InfoWindow){
		// do staff
	}
}

Но ничего подобного не существует. Более того если InfoWindow был прицеплен к маркеру то у него нет позиции

google.maps.event.addListener(marker, "click", function(e){
	var window = new google.maps.InfoWindow({
		content: this.getPosition().toString()
	}).open(map, this);
	console.log(window.getPosition()) // undefined
});


google.maps.event.addListener(marker, "click", function(e){
	var window = new google.maps.InfoWindow({
		content: this.getPosition().toString(),
		position : this.getPosition()
	}).open(map, this);
	console.log(window.getPosition()) // position
});

Но во втором варианте проблема в том что InfoWindow будет относиться не к маркеру (стрелочка указывает на центр верха маркера), а к точке к которой относиться маркер.

Поскольку InfoWindow не имеет позиции, то сравнивать приходиться не позиции а содержимое, это мало того что не удобно так еще и черевато всякими косяками. в общем этот вариант тоже не вариант.

Если все методы перепробованы а результата нет - прочтите инструкцию. Вооружившись этой самой инструкцией мы начинаем хачить класс google.maps.Marker

google.maps.Marker.prototype.openInfoWindow = function(content){
	if (!(this.InfoWindow && this.InfoWindow.getContent() == content)){ 
		this.InfoWindow = new google.maps.InfoWindow({
			content: content
		});
	}
	this.InfoWindow.open(this.map, this);
}


var myMarkerManager = new MarkerManager(
	new google.maps.Map(document.getElementById("map3"), {
		zoom: 5,
		center: new google.maps.LatLng(50, 27),
		mapTypeId: google.maps.MapTypeId.HYBRID
	})
);


myMarkerManager.createMarker(new google.maps.LatLng(50.440951, 30.527181));
myMarkerManager.createMarker(new google.maps.LatLng(49.836944, 24.005000));


for (var i in myMarkerManager.markers){
	google.maps.event.addListener(myMarkerManager.markers[i], "click", function(e){
		myMarkerManager.map.setCenter(this.getPosition());
		this.openInfoWindow(this.getPosition().toString());
	});
}

Вот так все легко и просто :)

var MarkerManager = function(map){
	/*
	 * @author CTAPbIu_MABP
	 * @email CTAPbIuMABP@gmail.com
	 * @link http://mabp.kiev.ua/2010/03/01/google-map-api-v3-marker-manager/
	 * @license GPL
	 */
	this.setMap(map);
}
MarkerManager.prototype = {


	markers : [],
	map : null,


	/**
	 * Set the map
	 * @access private
	 * @param {HTMLElement} map Div with map
	 */
	setMap : function(map){
		this.map = map;
	},


	/**
	 * Add new marker to the map
	 * @access public
	 * @param {google.maps.Marker} marker Marker to add
	 */
	addMarker : function(marker){
		this.markers.push(marker);
	},


	/**
	 * Add new markers to the map
	 * @access public
	 * @param {Array of google.maps.Marker} markers Array of markers to add
	 */
	addMarkers : function(markers){
		this.markers.concat(markers);
	},


	/**
	 * Get markers with latitude & longitude
	 * @access public
	 * @param {google.maps.LatLng} latlng Coordinates
	 * @return {Array of google.maps.Marker} Array of markers
	 */
	getMarkers : function(latlng){
		var array = [];
		for (var i in this.markers)
			if (this.markers[i].getPosition().equals(latlng))
				array.push(this.markers[i]);
		return array;
	},


	/**
	 * Remove marker
	 * @access public
	 * @param {google.maps.Marker} marker Marker to remove
	 * @return {google.maps.Marker} Removed marker
	 */
	removeMarker : function(marker){
		var index = this.inArray(marker, this.markers), current;
		if (index > -1){
			current = this.markers.splice(index,1);
			current[0].setMap(null);
		}
		return marker;
	},


	/**
	 * Remove all marker
	 * @access public
	 */
	clearMarkers : function(){
		// this.map.clearOverlays();
		for (var i in this.markers)
			this.markers[i].setMap(null);
		this.markers = [];
	},


	/**
	 * @access public
	 * @return {int} Count of markers on the map
	 */
	getMarkerCount : function(){
		return this.markers.length;
	},


	/**
	 * @access public
	 * @return {Array of google.maps.Marker} Return Array of visible markers
	 */
	getVisibleMarkers : function(){
		var array = [];
		for (var i in this.markers){
			if (this.isVisible(this.markers[i].getPosition()))
				array.push(this.markers[i]);
		}
		return array;
	},


	/**
	 * For more information about getBounds look at google groups discussion
	 * http://code.google.com/apis/maps/documentation/javascript/events.html#EventListeners
	 * @access public
	 * @param {google.maps.LatLng} latlng Coordinates of point
	 * @return {boolean} is point visible
	 */
	isVisible : function(latlng){
		try {
			return this.map.getBounds().contains(latlng);
		} catch (e){
			this.thowExcwprion('Map is not loaded yet'); 
		}
	},


	/**
	 * Create a new marker and add it to map
	 * Not the best implementation
	 * It seems you should write your own
	 * @access public
	 * @param {google.maps.LatLng} position Coordinates
	 * @param {string} color Marker color [red,black,grey,orange,white,yellow,purple,green]
	 * @param {boolean} draggable Is marker draggable
	 * @return {google.maps.Marker} created marker
	 */
	createMarker : function(position, color, draggable){
		var marker = new google.maps.Marker({
			map: this.map,
			position : position,
			draggable : !!draggable,
			icon : new google.maps.MarkerImage('http://maps.google.com/mapfiles/marker'+(color=="red"||!color?"":"_"+color)+'.png',
				new google.maps.Size(20, 34),
				new google.maps.Point(0,0),
				new google.maps.Point(8, 32)),
			shadow : new google.maps.MarkerImage('http://maps.google.com/mapfiles/shadow50.png',
				new google.maps.Size(37, 34),
				new google.maps.Point(0,0),
				new google.maps.Point(10, 32)),
			shape : {
				coord: [9,0,6,1,4,2,2,4,0,8,0,12,1,14,2,16,5,19,7,23,8,26,9,30,9,34,11,34,11,30,12,26,13,24,14,21,16,18,18,16,20,12,20,8,18,4,16,2,15,1,13,0],
				type: 'poly'
			}
		});
		this.addMarker(marker);
		return marker;
	},


	/**
	 * Fires when bounds are ready
	 * @access public
	 * @param {Function} callback function
	 */
	onBoundsReady : function(fn){
		google.maps.event.addListenerOnce(this.map, 'bounds_changed', fn);
	},


	/**
	 * Search for item in array
	 * @access public
	 * @param {mixed} elem needle
	 * @param {array} array haystack
	 * @return {int} Index of item
	 */
	inArray : function(elem, array) {
		if (array.indexOf) {
			return array.indexOf(elem);
		}


		for (var i=0, length=array.length; i<length; i++){
			if (array[i]===elem) {
				return i;
			}
		}


		return -1;
	},


	/**
	 * Throw an exception
	 * @access private
	 * @param {String} message
	 */
	thowExcwprion : function(e){
		throw e; 
	}
}

Я думаю что он очень прост в использовании, поэтому покажу только один пример

var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 1,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.HYBRID
});
var myMarkerManager = new MarkerManager(map);
var kiev = myMarkerManager.createMarker(new google.maps.LatLng(50.440951, 30.527181)); // добавлю маркер Киева
myMarkerManager.addMarkers([kiev,kiev]); // всего уже три маркера в одной точке
var markers = myMarkerManager.getMarkers(new google.maps.LatLng(50.440951, 30.527181)); // нашел все три
myMarkerManager.removeMarker(markers[0]); // удяляю первый
myMarkerManager.clearMarkers(); // удаляю все

Скачать можно тут DOWNLOAD LINK

Спойлер : ждите сегодня большую статью ;)

А накопал я много чего интересного. Оказывается, сам по себе плагин составляет три с половиной строки кода вокруг объекта Mapifies

(function($){
	$.fn.jmap = function(method, options, callback) {
		return this.each(function(){
			if (method == 'init' && typeof options == 'undefined') {
				new Mapifies.Initialise(this, {}, null);
			} else if (method == 'init' && typeof options == 'object') {
				new Mapifies.Initialise(this, options, callback);
			} else if (method == 'init' && typeof options == 'function') {
				new Mapifies.Initialise(this, {}, options);
			} else if (typeof method == 'object' || method == null) {
				new Mapifies.Initialise(this, method, options);
			} else {
				try {
					new Mapifies[method](this, options, callback);
				} catch(err) {
					throw Error('Mapifies Function Does Not Exist');
				}
			}
		});
	}
})(jQuery);

Что сказать, хорошо сделанная обертка, кроме одной меленькой детали. Все методы объекта Mapifies за редким исключением получают три параметра element (карта), options (опции), callback (функция), а возвращает результат работы callback(map). И вот как вы думаете как вы получите результат работы хоть какой-нибудь функции если обертка не предполагает возврата данных?!

Уже только по этому я решил отказаться от использования обертки и дальше работал с Mapifies напрямую. Документация по плагину крайне бедная, но код очень хорошо документирован, поэтому не составляет труда в нем разобраться. Продемонстрирую несколько простейших функций:

Создание резиновой карты, растягивается за нижний правый угол. Осторожно если сильно потянуть вправо то потом ее обратно уже не сжать, зато в любой момент можно растянуть вниз на практически любую длину.

jQuery(document).ready(function($){
    var $map = $("#map1"),
    GMap = Mapifies.Initialise(
         $map.get(0),  {
            // описание всех параметров смотрите в коде плагина
            // http://github.com/digitalspaghetti/jmaps/blob/master/dist/jquery.jmap.js#L100
            language: 'en',
            mapType: G_HYBRID_MAP,
            mapCenter: [50.440951,30.527181],
            mapZoom: 10,
            mapControl: 'large',
            mapEnableDragging: true,
            mapEnableScrollZoom: true,
            mapShowjMapsIcon: false
        }, function(thisMap){
            return thisMap;
    });


    $map.resizable({
        stop: function(event, ui) {
            Mapifies.CheckResize($map);
        }
    });
});

Теперь покажу как добавить маркер

jQuery(document).ready(function($){
    var $map = $("#map2");
    Mapifies.Initialise(
         $map.get(0),  {
            // описание всех параметров смотрите в коде плагина
            // http://github.com/digitalspaghetti/jmaps/blob/master/dist/jquery.jmap.js#L100
            language: 'en',
            mapType: G_HYBRID_MAP,
            mapCenter: [50.440951,30.527181],
            mapZoom: 10,
            mapControl: 'large',
            mapEnableDragging: true,
            mapEnableScrollZoom: true,
            mapShowjMapsIcon: false
    });
    Mapifies.CreateMarkerManager($map,{markerManager: 'MarkerManager'});
    Mapifies.AddMarker($map,{
        // описание всех параметров смотрите в коде плагина
        // http://github.com/digitalspaghetti/jmaps/blob/master/dist/jquery.jmap.js#L704
        pointTitle : 'Tooltip',
        pointLatLng: [50.440951,30.527181],
        pointHTML: '<strong>description</strong>',
        pointOpenHTMLEvent: 'click',
        pointIsDraggable: true,
        pointMinZoom: 0,
        pointMaxZoom: 17,
        pointIcon:Mapifies.createIcon({
            // описание картинок смотрите в моей прошлой статье
            // http://mabp.kiev.ua/2010/01/12/google-map-markers/
            iconImage: 'http://maps.google.com/mapfiles/arrow.png',
            iconShadow: 'http://maps.google.com/mapfiles/arrowshadow.png',
            iconSize: new GSize(39,34),
            iconShadowSize: new GSize(39,34),
            iconPrintImage: 'http://maps.google.com/mapfiles/arrowie.png',
            iconMozPrintImage: 'http://maps.google.com/mapfiles/arrowff.png',
            iconTransparent: 'http://maps.google.com/mapfiles/arrowtransparent.png'
        })
    });
});

С этим примером тоже почти все хорошо кроме двух вещей.

Первая это нельзя заменить крест под маркером (во время перетаскивания). Он немного не по размеру этому маркеру (чуть чуть левее чем надо), но чтобы заменить его нужно отказаться от метода createIcon и создать маркер вручную.

Вторая... Если посмотреть код страницы видно что я подключил скрипт markermanager.js, он помогает при работе с маркерами, довольно неплохая вещь. Плагин умеет его использовать и если он подключен создает маркеры с его помощью. Но создавать создает а удалять забыват ;( Тоесть чтобы удалить маркер нужно вместо

    $("#remove1").click(function(){
        var manager = Mapifies.MapObjects.Get($map).MarkerManager;
        Mapifies.RemoveMarker($map,manager.getMarker(50.440951,30.527181,1))
    });

Написать

    $("#remove2").click(function(){
        var manager =  Mapifies.MapObjects.Get($map).MarkerManager;
        manager.removeMarker(manager.getMarker(50.440951,30.527181,1));
    });

Ага, вот сейчас вы нажали первую кнопку и подумали что я вас обманываю, нет попробуйте позумить, маркер никуда не пропал. Зато если нажать на вторую кнопку маркер пропадает начисто.

Я думаю на сегодня все. кто знает что-то об авторе, свежих версиях, документации и тд и тп пишите в каменты.

Контролы

Слайдер (обычный размер)

Слайдер (маленький размер)

Вспомогательные картинки для калибровки

Честно говоря я не представляю себе случая, когда надо будет полностью переделать управления картами включая контролы, хотя вполне допускаю использование этих картинок в каком-нибудь другом пректе.

Markers

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

Обычные маркеры для всех локалей (20x34)

Маркеры для печати

Еще обычные маркеры для каждой локали свои (например ru_RU), некоторых цветов нехватает (32x32)

Маленькие маркеры (12x20)

Маркеры со стрелочками

Маркеры со стрелочками версия для печати

Маркеры с буквами (от A до Z), можно подставлять цвета [а голубого нету :(]

Маркер стрелочка

Маркер стрелочка версия для печати

Всякие значки

Мнформационное окно

Пузырь

Тень

Разное

Блоки для текста

Иконки

Индикаторы направления, градуся от 0 до 117, если надо больше то формула ~~(X%120/3) , где X это нужное количество градусов

Другое

Иконки из Google Earth

Только мне кажеться что они повторяються?!

Для тех кто еще не понял почему я кипишую, площаль Австралии - 7 692 024 км², площадь Гренландии - 2 166 086 км². Тоесть по площади Австралия в три раза больше, а по карте - Гренландия во столько же. Более того мне уже подсказывают что она больше Южной Америки и где-то такая же как Африка.

Для тех кому интересно почему так в картинках смотрим у гугла и немного текстовочки на вики

Updated 16.08.10

А вот новое интересное дополнение к сабжу. Недавно нарыл гуглокарту (всеголишь демку) в проекции Гэлла и Питерса, выглядит она немного необычно.