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 посложнее...

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

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



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