Главная » Google » Онлайн-сервисы » Разное » Скрипты » Google API как создать схему проезда при помощи Google Maps

Google API как создать схему проезда при помощи Google Maps

Опубликовано: 09-10-2009 | Автор : Vch54ti

5

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

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

Google Maps

Google Maps позволяет создать интерактивные и понятные схемы проезда, при помощи такой схемы просмотреть можно не только кусочек карты но и перемещаться в окошке по карте. Думаю пример подобных схем проезда(карт) уже видели практически все.

Ниже простой пример как можно сделать схему проезда при помощи сервиса Google Maps


CSS

#map{
width:100%;
height:400px;
float:left}

JavaScript

<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2.x&key=тут ввести ключ">
</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);
    }
</script>
HTML
<body onload="initialize()" onunlaod="GUnload">
<div id="map"></div>

Google API получаем тут: http://code.google.com/apis/maps/signup.html
И бонус - пример Google Maps посложнее...

84cb807f7f21

Скачиваем тут: http://rapidshare.com/files/289184235/map.rar.html

Спасибо Вам за добавление статьи "Google API как создать схему проезда при помощи Google Maps" в:

Добавить в Twitter
Если данная публикация вам понравилась, предлагаю вам подписаться на получение материалов centavrus-opti.ru через RSS ленту, и при желании присоединиться ко мне в Twitter
Рассылка новых публикаций на E-mail

Оставлено комментариев (5)

К сожалению ссылка http://rapidshare.com/files/289184235/map.rar.html
не рабочая(((
поправте пожалуйста, статья очень полезная

Поищу у себя скриптик этот как доберусь до стационарного компьютера — если остался архив — перезалью

буду чрезвычайно благодарен! :)

Не сохранилось у меня к сожалению такого скрипта создания карты сайта :(

Чуть позже сделаю новую статью о том, как создать схему проезда Google с помощью Google api.

Как сделаете, советую в старую положить ссылку, т.к. я не нашел :) А надо

Предлагаю оставить комментарий к записи Google API как создать схему проезда при помощи Google Maps

Более ранние статьи из раздела