Монсты из клякс
3D интерфейс с любой вебкамерой
Магазин легального видео
С днем рождения — МИТЕК
Crysis 2: Видео нескольких игровых минут
Wolfram – сайт который знает почти все!
Торренты без регистрации и Torrent агрегаторы
Обруч невидимка
Музыка онлайн
Как пилят в Транснефти
Робот трубач
Кинетическая скульптура BMW
Демо Spore Creature Creator
Step Up 2 – Финальный танец
Far cry 2 видео
Виртуальный компьютер на Flash и JS
Аварии и крушения
GemCraft – игрушка
Google Chrome – анонс нового браузера
Обрезание на первом
Одна физиономия на все случаи жизни
Видео стулСхема проезда для сайта при помощи Google Maps
Для тех, кто часто делает сайты, наверное знает, что такое делать схемы проезда. Это очень нудная и не интересная работа, а в итоге скучная схема проезда которая мало кому понятна и интересна. В редких случаях конечно бывают появляются (Нажмите сначала "Как проехать" и "Как пройти", а потом на "Центр каминов"), но на такие схемы люди тратят очень много времени, а его обычно всегда не хватает.
С Google теперь это стало очень просто и удобно. Схемы получаются очень интерактивные и понятные, при помощи их можно посмотреть не только кусочек карты, но и весь мир и точно понять как проехать к месту назначения. Пример выше.
Внутри вы найдете инструкцию, как встроить в свой сайт такую схему.
CSS
#map{
width:100%;
height:400px;
float:left}
Javascript
<!-- *** Замените ключ тот, что идет ниже "key=" на свой полученный по ссылке, бесплатно http://code.google.com/apis/maps/signup.html *** -->
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAARX4-dQHyN23t3qmYVnAiCBTDhDMdhFWJYNda9E9x9p36MDWV5xS4zbZ2Sc-i3saXuzopJuTycTsMcg">
</script>
<script type="text/javascript">
function initialize() {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(55.655298, 37.594872), 15); // Координаты центра карты
map.addMapType(G_SATELLITE_3D_MAP);
map.addControl(new GHierarchicalMapTypeControl());
map.addControl(new GLargeMapControl());
map.enableDoubleClickZoom();
map.enableScrollWheelZoom();
map.enableContinuousZoom();
map.getContainer().style.overflow="hidden";
var marker = new GMarker(new GLatLng(55.655298, 37.592172));
// Координаты маркера
GEvent.addListener(marker, "click", function() {
var html = '<div style="font-size: 11px; width: 210px; padding-right: 10px">Текст маркера<\/div>';
marker.openInfoWindowHtml(html);
});
map.addOverlay(marker);
GEvent.trigger(marker, "click");
var polyline = new GPolyline([
// Координаты пути
new GLatLng(55.655292, 37.592146),
new GLatLng(55.655328, 37.592061),
new GLatLng(55.654844, 37.591760),
new GLatLng(55.653658, 37.595580),
new GLatLng(55.653028, 37.595623),
new GLatLng(55.653125, 37.596374)
], "#ff0000", 5);
GEvent.addListener(polyline, "click", function(latlng) {
var html = '<div style="width: 210px; padding-right: 10px">A polyline.<\/div>';
map.openInfoWindowHtml(latlng, html);
});
map.addOverlay(polyline);
}
HTML
<body onload="initialize()" onunlaod="GUnload"> <div id="map"></div>
Подробную документацию по применению гугловских карт можно найти , а сгенерить нужные координаты для скрипта и пути можно .
Готовый пример можно посмотреть и сохранить отсюда.
Похожие записи:
Loading ...
Loading ...
Зная про Google Maps, давно думал о чём то подобном, и теперь здесь увидел как это сделать – большое спасибо! Вопрос немного не по теме как Вы сделали аннимированный favikon?
— 16 января 2009 @ 09:57
кстати так и не понял как и где сделать надпись на маркере (тут впишите свой текст)?
— 16 января 2009 @ 10:28
по поводу надписи разобрался
— 18 января 2009 @ 23:07
Посмотрел и решил что на сайте Советск тоже должна быть такая карта
— 9 марта 2009 @ 23:52
Почему-то не могу сгенерить путь. Даже в FF не работают скрипты. Правда, версия FF уже повыше.
— 2 декабря 2009 @ 03:14
нифига не работает ни в хроме ни в FF этот пример
— 23 декабря 2009 @ 12:18