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

Статус
В этой теме нельзя размещать новые ответы.
N

Nulledik

Создатель
Регистрация
18 Апр 2010
Сообщения
32
Реакции
0
Подскажите пожалуйста, как сделать с помощью Yandex или Google map карту города на которой будет указано флажками расположение магазинов?
 
Под различные ЦМС есть уже готовые модули: находишь (поиск рулит :)), ставишь, ломишься на гугль, регаешься, получаешь API для своего сайта, вводишь в настройки модуля, потом можешь добавлять свои точки на карте. Главное API, если делаешь на тестовом сайте, то при переносе на лив сайт нужно будет регать еще один ключ.
 
если делать с в google maps api версии 3, то ключ уже не нужен будет меньше проблем, документация
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

пример код с флажками, надо только координаты подставить и тексты изменить
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
Nulledik написал(а):
Подскажите пожалуйста, как сделать с помощью Yandex или Google map карту города на которой будет указано флажками расположение магазинов?
Нажмите для раскрытия...

Для просмотра ссылки Войди или Зарегистрируйся Регистрируеся и читаешь мануалы (и примеры), Яндекс карты насколько я понял удобней Гугловских для этого.
 
  • Нравится
Реакции: iwn
Есть специальные скрипты для работы с API сильно упрощающими добавление объектов. Один из таких недавно был куплен вскладчину.
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху