Добавляем маркеры на карту, используя API Google Maps v3 и jQuery

Автор: | 13.02.2011
33 комментария

В этой заметке я расскажу Вам, как можно добавить маркеры на карту, используя API Google Maps v3 и jQuery.

Описание для маркеров мы будем хранить в файле markers.xml.

Он имеет следующий вид:

<?xml version="1.0"?>
<markers>
 
<marker>
<name>Оазис, ООО &quot;Лига&quot;</name>
<address> г. Нижний Новгород,  Печеры сл., 177, Гребной канал</address>
<lat>56.329918</lat>
<lng>44.009193</lng>
</marker>
 
<marker>
<name>Крона, кафе, ООО</name>
 
<address> г. Нижний Новгород,  Гагарина пр., 25 б</address>
<lat>56.294853</lat>
<lng>43.975372</lng>
</marker>
...
</markers>

Наш html-файл для вывода карты будет иметь следующий код:

<html>
<head>
<title>Добавление маркеров на карту - API Google Maps v3 и jQuery</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/markers.js">
</script>
</head>
<body><div id="map"></div>
<div ><input type="button" id="showmarkers" value="Показать маркеры" /></div>
</body>
</html>

В начале мы подключаем API Google Maps Google Maps строкой

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

В следующей строке мы подключаем библиотеку jQuery

<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>

После этого мы подключаем javascript-файл markers.js, в котором производиться определение параметров карты и обрабатываются данные из файла markers.xml.

В разделе body мы определяем контейнер для вывода карты и кнопку «Показать маркеры», по нажатию по которой маркеры будут добавляться на карту.

Посмотрим как работает наш пример, а затем разберем структуру файла markers.js

После загрузки нашего примера в браузере, мы увидим карту с элементами управления и кнопкой под ней «Показать маркеры».

После нажатия на кнопку «Показать маркеры» происходит добавление маркеров на карту из файла markers.xml и происходит изменение масштаба карты, чтобы были видны все маркеры.

Посмотреть пример в действии

Код файла markers.js

$(document).ready(function() {
  $("#map").css({
		height: 600,
		width: 800
	});
  var myLatLng = new google.maps.LatLng(56.324461, 44.00189);
  MYMAP.init('#map', myLatLng, 13);
 
  $("#showmarkers").click(function(e){
		MYMAP.placeMarkers('markers.xml');
  });
});
 
var MYMAP = {
  map: null,
	bounds: null
}
 
MYMAP.init = function(selector, latLng, zoom) {
  var myOptions = {
    zoom:zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  this.map = new google.maps.Map($(selector)[0], myOptions);
	this.bounds = new google.maps.LatLngBounds();
}
 
MYMAP.placeMarkers = function(filename) {
	$.get(filename, function(xml){
		$(xml).find("marker").each(function(){
			var name = $(this).find('name').text();
			var address = $(this).find('address').text();
 
			// create a new LatLng point for the marker
			var lat = $(this).find('lat').text();
			var lng = $(this).find('lng').text();
			var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));
 
			// extend the bounds to include the new point
			MYMAP.bounds.extend(point);
 
			var marker = new google.maps.Marker({
				position: point,
				map: MYMAP.map
			});
 
			var infoWindow = new google.maps.InfoWindow();
			var html='<strong>'+name+'</strong.><br />'+address;
			google.maps.event.addListener(marker, 'click', function() {
				infoWindow.setContent(html);
				infoWindow.open(MYMAP.map, marker);
			});
			MYMAP.map.fitBounds(MYMAP.bounds);
		});
	});
}

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

После этого мы обрабатываем событие нажатие кнопки «Показать маркеры».

Если событие произошло, то вызывается функция MYMAP.placeMarkers, а в качестве параметра для нее передается название нашего файла с маркерами markers.xml

В этой функции мы выполняем AJAX GET запрос данных из файла markers.xml и в ответ получаем данные в формате XML, которые и обрабатываем в функции обратного вызова.

В цикле мы извлекаем данные для каждого маркера: наименование name, адрес address, координаты точки на карте.

Затем мы создаем маркер на карте.

Чтобы при щелчке на карте появлялся балун с информацией, мы добавляем событие для каждого маркера event.addListener и перед этим задаем html-содержимое для балуна.

При помощи метода fitBounds, мы изменяем область отображения так, чтобы были видны все маркеры.

Этот пример при небольшой доработке, Вы с успехом можете использовать для реализации сложных проектов, с использованием API Google Maps v3.

Для написания заметки использовалась статья «Adding Markers to a Map Using the Google Maps API and jQuery».

Добавляем маркеры на карту, используя API Google Maps v3 и jQuery: 33 комментария

  1. Николай

    А как тут можно задавать внешний вид маркера например используя стандартные маркеры с гугла ?

    Ответить ↓
    1. admin Автор записи

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

      var marker = new google.maps.Marker({
      position: point,
      map: MYMAP.map,
      icon: http://labs.google.com/ridefinder/images/mm_20_red.png'
      });

      Ответить ↓
  2. sima

    а можно сделать не одну, а две кнопки «показать маркеры», чтобы при нажатии на каждую из них отображались разные маркеры?

    Ответить ↓
  3. Сергей

    Привет. А я вот на локальном серваке делал и всё получилось… как только перенес на хотинг — сразу перестала работать конопочка … т.е. не отображаются отметки

    Что может быть не так?

    http://arenaservice.ru/objects

    Ответить ↓
  4. Сергей

    Ага, это я видел. вот сейчас я снёс эту строку… всё равно не пашет. Есть еще предположения?

    Вот такая еще ошибка выскакивает…

    Ошибка: несоответствующий тег. Ожидается: .
    Источник: http://s.sputnik.mail.ru/sid.818?xml=2
    Строка 11, символ 3
    Исходный код:

    даже не знаю откуда она

    Ответить ↓
  5. Евгений

    Скажите пожалуйста, как сюда добавить простой поиск по адресу?

    Ответить ↓
  6. maxirk

    Можно ли сделать что бы определенные маркеры были сразу открыты (балуны были развернуты) сразу после загрузки карты?

    В Яндекс.карты такого точно нельзя сделать. 🙁

    Ответить ↓
    1. admin Автор записи

      Можно, если удалить две строчки обработчика клика по маркеру

      google.maps.event.addListener(marker, ‘click’, function() {

      и закрывающие скобки }); перед строчкой MYMAP.map.fitBounds(MYMAP.bounds);

      Тогда при загрузке меток сразу будут открываться все балуны.

      Только зачем это, загрузка маркеров замедляется и получается результат наложения балунов друг на друга

      Ответить ↓
  7. mad4sys

    А как сделать, чтобы вместо
    var myLatLng = new google.maps.LatLng(56.324461, 44.00189);
    указывались координаты пользователя (по ip)?

    Ответить ↓
  8. mad4sys

    заметил, если нажать на кнопку несколько раз, маркеры будут добавляться поверх друг друга (видно по тени), как сделать так чтобы перед созданием удалялись маркеры и открытые инфо-окна?

    Ответить ↓
    1. admin Автор записи

      infoWindow.close();
      for (var i = 0; i < gmarkers.length; i++) {
      gmarkers[i].setMap(null);
      }
      gmarkers.length = 0;

      gmarkers — массив с маркерами

      Ответить ↓
  9. grop

    Такая проблема. Добавил карту, вылазит ошибка $(«#map») is null во второй строке $(«#map»).css({

    Что делать?

    Ответить ↓
    1. admin Автор записи

      div с картой какой id имеет. Для того, чтобы работало

      <div id="map"></div>
      Ответить ↓
    1. admin Автор записи

      Маркеры добавляются обычным образом по координатам, если координаты не известны, то можно определить их по карте используя пример по адресу здесь

      Ответить ↓
  12. Михаил

    Хорошо работает. Спасибо.
    Тут 3 вопроса возникло.
    1. Что нужно подправить, чтобы при загрузке карты маркеры появлялись сразу на карте, без нажатия кнопки?
    2. При нажатии на маркеры балуны накладываются друг на друга. Как сделать так, чтобы при нажатии на маркеры был открытым балун только последнего нажатого маркера, а предыдущий автоматически закрывался?
    3. Как присвоить маркеру свою картинку? Не всем одинаковую, а каждому маркеру свою? Я так понимаю надо добавить в markers.xml для каждого маркера новый параметр адрес картинки для маркера А что отредактировать в markers.js, чтобы оно работало?

    Ответить ↓
  13. Alexander

    Здравстуйте,

    большое спасибо. Работает отлично.

    Вопрос по поводу накладывающихся маркеров (несколько нажатий на «показать маркеры») уже решен?
    Было бы очень интересно узнать как.

    Спасибо огромное. Мега Tool.

    Alexander

    Ответить ↓
  16. carsar

    Накладывание маркеров.

    var clearList = [];

    $(document).ready(function() {
    $(«#map»).css({height: 600, width: 800});
    var myLatLng = new google.maps.LatLng(50.444114, 30.52070);
    MYMAP.init(«#map», myLatLng, 14);

    $(«#showmarkers_1»).click(function(e) {
    clearMarkers();
    MYMAP.placeMarkers(«example1.xml»);
    });

    $(«#showmarkers_2»).click(function(e) {
    clearMarkers();
    MYMAP.placeMarkers(«example2.xml»);
    });
    });

    function clearMarkers() {
    $(clearList).each(function () {
    this.setMap(null);
    });
    clearList = [];
    }

    var MYMAP = {
    map: null,
    bounds: null
    }

    MYMAP.init = function(selector, latLng, zoom) {
    var myOptions = {
    zoom: zoom,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    this.map = new google.maps.Map($(selector)[0], myOptions);
    this.bounds = new google.maps.LatLngBounds();
    }

    MYMAP.placeMarkers = function(filename) {
    $.get(filename, function(xml) {
    $(xml).find(«marker»).each(function() {
    var city = $(this).find(‘city’).text();
    var name = $(this).find(‘name’).text();
    var address = $(this).find(‘address’).text();

    // create a new LatLng point for the marker
    var lat = $(this).find(‘lat’).text();
    var lng = $(this).find(‘lng’).text();
    var point = new google.maps.LatLng(parseFloat(lat),parseFloat(lng));

    // extend the bounds to include the new point
    MYMAP.bounds.extend(point);

    var marker = new google.maps.Marker({
    position: point,
    map: MYMAP.map,
    icon: («img/other/map_mark_big.png»),
    });
    clearList.push(marker);

    var infoWindow = new google.maps.InfoWindow();
    var html = ‘‘+name+’‘+city+’, ‘+address;

    google.maps.event.addListener(marker, «click», function() {
    infoWindow.setContent(html);
    infoWindow.open(MYMAP.map, marker);
    });
    MYMAP.map.fitBounds(MYMAP.bounds);
    });
    });
    }

    Ответить ↓
  17. Евгений

    А можно ли в балунах ставить активные ссылки?

    Ответить ↓
  18. Шамиль

    Не сталкивались — что получиться если два маркера на одном объекте с одинаковыми координатами но с разными данными (например в одном доме кафе и клуб) — у меня они накладываются друг на друга и можно увидеть информацию только по одному объекту. Не могу придумать как их развести..

    Ответить ↓
  19. Дима

    очень буду благодарен. как сделать чтоб отдельная группа маркеров имела свой цвет… у меня несколько кнопок и в соответствии несколько файлов xml. никак не получается. очень нужно

    Ответить ↓
  20. ADv

    Для вордпресса не встречали подобных плагинов? Чтобы несколько маркеров на карту…

    Ответить ↓
  21. Дима

    Админ спасай! как сделать чтоб отдельная группа маркеров имела свой цвет… у меня несколько кнопок и в соответствии несколько файлов xml. никак не получается. очень нужно
    благодарю

    Ответить ↓
  22. Дима

    а еще как сделать чтоб вставить в маркер ссылку и картинку?

    Ответить ↓
  23. Дима

    да в балунах можно вставить ссылки! у меня получилось

    Ответить ↓

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *