карта сети магазинов

Тема в разделе "Веб-дизайн", создана пользователем Nulledik, 9 июн 2010.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Nulledik

    Nulledik Создатель

    Регистр.:
    18 апр 2010
    Сообщения:
    32
    Симпатии:
    0
    Подскажите пожалуйста, как сделать с помощью Yandex или Google map карту города на которой будет указано флажками расположение магазинов?
     
  2. IgVan

    IgVan

    Регистр.:
    8 май 2008
    Сообщения:
    212
    Симпатии:
    54
    Под различные ЦМС есть уже готовые модули: находишь (поиск рулит :)), ставишь, ломишься на гугль, регаешься, получаешь API для своего сайта, вводишь в настройки модуля, потом можешь добавлять свои точки на карте. Главное API, если делаешь на тестовом сайте, то при переносе на лив сайт нужно будет регать еще один ключ.
     
  3. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    если делать с в google maps api версии 3, то ключ уже не нужен будет меньше проблем, документация
    http://code.google.com/apis/maps/documentation/javascript/basics.html
    пример код с флажками, надо только координаты подставить и тексты изменить
    HTML:
    
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Магазины</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?language=ru&sensor=false"></script>
    <script type="text/javascript">
    function initialize() {
        //настройка карты
      var map_options = {
         //уровень увеличения
        zoom: 10,
        //центрируем в Москве
        center: new google.maps.LatLng(55.755786, 37.617633),
        //тип карты
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      //показываем карту в элементе с id="map"
      var map = new google.maps.Map(document.getElementById("map"), map_options);
    //распределяем маркеры магазинов
      set_markers(map, shops);
    }
    
    //массив магазинов, название, широта, долгота, индекс если маркеры перекрываются полезный, описание для инфоокна
    var shops = [
      ['Магазин 1', 55.7586689, 37.6148887, 1, 'Магазин 1<br>Адрес<br>Телефон'],
      ['Магазин 2', 55.7569374, 37.611967, 2, 'Магазин 2<br>Адрес<br>Телефон'],
      ['Магазин 3', 55.7546258, 37.6114156, 3, 'Магазин 3<br>Адрес<br>Телефон'],
      ['Магазин 4', 55.7531491, 37.6101551, 4, 'Магазин 4<br>Адрес<br>Телефон'],
      ['Магазин 5', 55.7494971, 37.6155432, 5, 'Магазин 5<br>Адрес<br>Телефон']
    ];
    
    //функция для добавления маркеров из массива
    function set_markers(map, locations) {
    
      //картинка маркера
      var image = new google.maps.MarkerImage('http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png',
          //размер маркера
          new google.maps.Size(20, 32),
          //точка на маркера для карты
          new google.maps.Point(0,0),
          //точка на маркере дле инфоокна
          new google.maps.Point(0, 32));
      //картинка тени маркера
      var shadow = new google.maps.MarkerImage('http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag_shadow.png',
          //размер тени
          new google.maps.Size(37, 32),
          new google.maps.Point(0,0),
          new google.maps.Point(0, 32));
      
      //объект для центрирования по всем маркерам
      var point_bound = new google.maps.LatLngBounds();
      
      //цикл по всем магазинам
      for (var i = 0; i < locations.length; i++) {
          
        var shop = locations[i];
        //точка для маркера
        var myLatLng = new google.maps.LatLng(shop[1], shop[2]);
        //добавляем точку в объект центрирования
        point_bound.extend(myLatLng);
        //создаём объект маркера и добавляем на карту
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            shadow: shadow,
            icon: image,
            title: shop[0],
            zIndex: shop[3]
        });
        //данные инфоокна для каждого маркера
        marker.infowindow_content = shop[4];
        //клик на маркере открывает инфоокно
        marker.infowindow = new google.maps.InfoWindow();
        google.maps.event.addListener(marker, 'click', function() {
            this.infowindow.open(map, this);
            this.infowindow.setContent(this.infowindow_content);
        });
        
      }
      //изменяем карту по всем точкам, чтоб на карте были видны все маркеры
      map.fitBounds(point_bound);
    }
    </script>
    </head>
    <body style="margin:0px; padding:0px;" onload="initialize()">
      <div id="map" style="width:100%; height:100%"></div>
    </body>
    </html>
    
    
     
    iwn нравится это.
  4. voooz

    voooz

    Регистр.:
    8 дек 2006
    Сообщения:
    360
    Симпатии:
    41
    Перейти по ссылке Регистрируеся и читаешь мануалы (и примеры), Яндекс карты насколько я понял удобней Гугловских для этого.
     
    iwn нравится это.
  5. alextan

    alextan Постоялец

    Регистр.:
    12 мар 2007
    Сообщения:
    146
    Симпатии:
    15
    Есть специальные скрипты для работы с API сильно упрощающими добавление объектов. Один из таких недавно был куплен вскладчину.
     
  6. voooz

    voooz

    Регистр.:
    8 дек 2006
    Сообщения:
    360
    Симпатии:
    41
    Tarasishe нравится это.
Статус темы:
Закрыта.