• Монсты из клякс
  • 3D интерфейс с любой вебкамерой
  • Магазин легального видео
  • С днем рождения — МИТЕК
  • Crysis 2: Видео нескольких игровых минут
  • Wolfram – сайт который знает почти все!
  • Торренты без регистрации и Torrent агрегаторы
  • Обруч невидимка
  • Музыка онлайн
  • Как пилят в Транснефти
  • Робот трубач
  • Кинетическая скульптура BMW
  • Демо Spore Creature Creator
  • Step Up 2 – Финальный танец
  • Far cry 2 видео
  • Виртуальный компьютер на Flash и JS
  • Аварии и крушения
  • GemCraft – игрушка
  • Google Chrome – анонс нового браузера
  • Обрезание на первом
  • Одна физиономия на все случаи жизни
  • Видео стул
  • 1 июня

    Схема проезда для сайта при помощи 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>
    

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

    Готовый пример можно посмотреть и сохранить отсюда.

    Все права на записи принадлежат порталу PION.RU. При использовании любой информации с данного сайта, обратная ссылка «открытая» для поисковых машин на эту страницу обязательна! В противном случае вы нарушатете закон Российской Федерации об авторском праве и смежных правах. Статья 7.3

    Похожие записи:

    1. Оригинальная схема проезда
    2. Легкий способ сделать сайт
    3. Правильные иконки к ссылкам при помощи CSS
    4. Кнопка с закругленными уголками в 1px при помощи стилей
    5. Логотипы Google
    Распечатать запись Распечатать запись



    Комментарии (6) »

    1. Зная про Google Maps, давно думал о чём то подобном, и теперь здесь увидел как это сделать – большое спасибо! Вопрос немного не по теме как Вы сделали аннимированный favikon?

      www.sovetsk39.ru оценил запись: www.sovetsk39.ru gives a rating of 5www.sovetsk39.ru gives a rating of 5www.sovetsk39.ru gives a rating of 5www.sovetsk39.ru gives a rating of 5www.sovetsk39.ru gives a rating of 5

      комментарий by www.sovetsk39.ru
      — 16 января 2009 @ 09:57

    2. кстати так и не понял как и где сделать надпись на маркере (тут впишите свой текст)?

      www.sovetsk39.ru оценил запись: www.sovetsk39.ru gives a rating of 5www.sovetsk39.ru gives a rating of 5www.sovetsk39.ru gives a rating of 5www.sovetsk39.ru gives a rating of 5www.sovetsk39.ru gives a rating of 5

      комментарий by www.sovetsk39.ru
      — 16 января 2009 @ 10:28

    3. по поводу надписи разобрался

      www.sovetsk39.ru оценил запись: www.sovetsk39.ru gives a rating of 5www.sovetsk39.ru gives a rating of 5www.sovetsk39.ru gives a rating of 5www.sovetsk39.ru gives a rating of 5www.sovetsk39.ru gives a rating of 5

      комментарий by www.sovetsk39.ru
      — 18 января 2009 @ 23:07

    4. Посмотрел и решил что на сайте Советск тоже должна быть такая карта :-)

      name еще не оценил запись.

      комментарий by name
      — 9 марта 2009 @ 23:52

    5. Почему-то не могу сгенерить путь. Даже в FF не работают скрипты. Правда, версия FF уже повыше.

      Артём еще не оценил запись.

      комментарий by Артём
      — 2 декабря 2009 @ 03:14

    6. нифига не работает ни в хроме ни в FF этот http://koti.mbnet.fi/ojalesa/exam/editor_v2.html пример :(

      Adward еще не оценил запись.

      комментарий by Adward
      — 23 декабря 2009 @ 12:18

    Оставить комментарий

    RSS лента комментариев на эту запись. TrackBack URL

    1. Подпишись на
      RSS ленту
    2. Pion.ru
      на Twitter
    3. Делись с
      друзьями
    • Зарабатываем

    • 218.99 руб. заработано за сутки в бирже ссылок SAPE:
      Место в рейтинге: 118-4

    Как вы относитесь к церкви?

    Результаты

    Loading ... Loading ...