Тайлы резал вот этим

function MyControl(map) {
	this.map = map;	
	
	this.button = document.createElement('DIV');
	this.button.style.margin = "50px";
	this.button.style.padding = "20px";
	this.button.style.backgroundColor = "#fff";
	this.button.style.fontSize = "25px";
	this.button.style.cursor = "pointer";
	this.button.appendChild(document.createTextNode("THIS IS SPARTAAA!!!"));
	
	this.div = document.createElement('DIV');
	this.div.appendChild(this.button);

	var marker = new google.maps.Marker({
		position : new google.maps.LatLng(37.074301,22.432584)
	});
	
	google.maps.event.addDomListener(this.button, "click", function(e){
		if (marker.getMap()){
			marker.setMap(null); 
		} else {
			marker.setMap(map);
		}
	}); 
}

MyControl.prototype.getDiv = function() {
	return this.div;
};

MyControl.prototype.remove = function() {
	this.div.removeChild(this.button);
	this.div.parentNode.removeChild(this.div);
};

google.maps.event.addDomListener(window, 'load', function(){

    var map = new google.maps.Map(document.getElementById("map"), {
		zoom: 1,
		center: new google.maps.LatLng(0,0),
		mapTypeId: google.maps.MapTypeId.HYBRID,
    });
	
	var myControl = new MyControl(map);
	map.controls[google.maps.ControlPosition.TOP].push(myControl.getDiv());

});

Не буду дразнить, вот ссылка на проект. Кстати не успел его найти как уже поправил в нем баг, такой же как в rocon'e. Походу у всех проблемы с IE9

На самом деле показывать пока практически нечего. Надо еще сильно подумать над синхронизацией и выставлением интервалов. А пока пример:

Итак пролетая версию 0.8 в которой был добавлен логер прилетаем сразу к 0.9 а в ней возможность расовать графики при помощи gRaphaël

Пирожки

Столбики вертикально

Столбики горизонтаьно

Линии

Точки, правда они еще не очень хорошо работают

К сожалению заменить картинки на карте Земли не получилось бы по двум причинам:

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

Вторая причина загадочная

Security error" code: "1000

Прямиком из фаербага. По идеи она возникает тогда когда я хочу получить getImageData картинки со стороннего домена. В общем я это еще узнаю.

Но не смотря на все трудности я все же сделал черно-белую карту с этой гнусной рожей которая мне уже порядком надоела.

Куда бы его на этот раз сунуть свои шаловливые рученьки?!

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

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

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

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 который будет рисовать не просто круг а сразу всю десяточку. Успехов!