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

В этой заметке я расскажу Вам, как можно добавить маркеры на карту, используя 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, в свойствах для маркера дописать путь к изображению для метки. <code> var marker = new google.maps.Marker({ position: point, map: MYMAP.map, icon: http://labs.google.com/ridefinder/images/mm_20_red.png' }); </code>
  • Гость: а можно сделать не одну, а две кнопки "показать маркеры", чтобы при нажатии на каждую из них отображались разные маркеры?
  • Гость: Привет. А я вот на локальном серваке делал и всё получилось... как только перенес на хотинг - сразу перестала работать конопочка ... т.е. не отображаются отметки Что может быть не так? http://arenaservice.ru/objects
  • Гость: Есть ошибка: Ошибка: $("#usual1 ul").idTabs is not a function Источник: http://arenaservice.ru/objects Строка: 278
  • Гость: Ага, это я видел. вот сейчас я снёс эту строку... всё равно не пашет. Есть еще предположения? Вот такая еще ошибка выскакивает... Ошибка: несоответствующий тег. Ожидается: . Источник: http://s.sputnik.mail.ru/sid.818?xml=2 Строка 11, символ 3 Исходный код: даже не знаю откуда она
  • Гость: Скажите пожалуйста, как сюда добавить простой поиск по адресу?
  • Гость: <a href="http://code.google.com/intl/ru-RU/apis/maps/documentation/javascript/examples/geocoding-simple.html" rel="nofollow">Пример поиска по адресу</a>
  • Гость: Можно ли сделать что бы определенные маркеры были сразу открыты (балуны были развернуты) сразу после загрузки карты? В Яндекс.карты такого точно нельзя сделать. :(
  • Гость: Можно, если удалить две строчки обработчика клика по маркеру google.maps.event.addListener(marker, 'click', function() { и закрывающие скобки }); перед строчкой MYMAP.map.fitBounds(MYMAP.bounds); Тогда при загрузке меток сразу будут открываться все балуны. Только зачем это, загрузка маркеров замедляется и получается результат наложения балунов друг на друга
  • Гость: А как сделать, чтобы вместо var myLatLng = new google.maps.LatLng(56.324461, 44.00189); указывались координаты пользователя (по ip)?
  • Гость: Вот пример использования API Google Maps v3 и геолокации <a href="http://ianluckraft.co.uk/demonstrations/google-maps-v3-and-geolocation.php" rel="nofollow">http://ianluckraft.co.uk/demonstrations/google-maps-v3-and-geolocation.php</a>
  • Гость: заметил, если нажать на кнопку несколько раз, маркеры будут добавляться поверх друг друга (видно по тени), как сделать так чтобы перед созданием удалялись маркеры и открытые инфо-окна?
  • Гость: infoWindow.close(); for (var i = 0; i &lt; gmarkers.length; i++) { gmarkers[i].setMap(null); } gmarkers.length = 0; gmarkers - массив с маркерами
  • Гость: Такая проблема. Добавил карту, вылазит ошибка $("#map") is null во второй строке $("#map").css({ Что делать?
  • Гость: div с картой какой id имеет. Для того, чтобы работало <pre lang="html"><div id="map"></div></pre>
  • Гость: Не хочет показывать маркеры при нажатии. http://www.web-produkts.ru/index.php?option=com_content&amp;view=article&amp;id=13&amp;Itemid=35 Помогите пожалуйста
  • Гость: Всё получилось. Спасибо! У меня маленький вопрос. Не могу понять, как сделать так, что бы отображались маркеры на карте созданой так http://webmap-blog.ru/google-maps/ispolzuem-programmu-maptiler-dlya-podgotovki-tajlov-dlya-google-maps
  • Гость: Маркеры добавляются обычным образом по координатам, если координаты не известны, то можно определить их по карте используя пример по адресу <a href="http://code.google.com/intl/ru/apis/maps/documentation/javascript/v2/examples/tile-detector.html" rel="nofollow">здесь</a>
  • Гость: Хорошо работает. Спасибо. Тут 3 вопроса возникло. 1. Что нужно подправить, чтобы при загрузке карты маркеры появлялись сразу на карте, без нажатия кнопки? 2. При нажатии на маркеры балуны накладываются друг на друга. Как сделать так, чтобы при нажатии на маркеры был открытым балун только последнего нажатого маркера, а предыдущий автоматически закрывался? 3. Как присвоить маркеру свою картинку? Не всем одинаковую, а каждому маркеру свою? Я так понимаю надо добавить в markers.xml для каждого маркера новый параметр адрес картинки для маркера А что отредактировать в markers.js, чтобы оно работало?
  • Гость: Здравстуйте, большое спасибо. Работает отлично. Вопрос по поводу накладывающихся маркеров (несколько нажатий на "показать маркеры") уже решен? Было бы очень интересно узнать как. Спасибо огромное. Мега Tool. Alexander
  • Гость: А можно позиционировать и зуммаровать карту автоматом по всем маркерам, не прописывая жестко zoom и center?
  • Гость: а как удалить конкретный маркер?
  • Гость: Накладывание маркеров. 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 = '<strong>'+name+'</strong>'+city+', '+address; google.maps.event.addListener(marker, "click", function() { infoWindow.setContent(html); infoWindow.open(MYMAP.map, marker); }); MYMAP.map.fitBounds(MYMAP.bounds); }); }); }
  • Гость: А можно ли в балунах ставить активные ссылки?
  • Гость: Не сталкивались - что получиться если два маркера на одном объекте с одинаковыми координатами но с разными данными (например в одном доме кафе и клуб) - у меня они накладываются друг на друга и можно увидеть информацию только по одному объекту. Не могу придумать как их развести..
  • Гость: очень буду благодарен. как сделать чтоб отдельная группа маркеров имела свой цвет... у меня несколько кнопок и в соответствии несколько файлов xml. никак не получается. очень нужно
  • Гость: Для вордпресса не встречали подобных плагинов? Чтобы несколько маркеров на карту...
  • Гость: Нет
  • Гость: Админ спасай! как сделать чтоб отдельная группа маркеров имела свой цвет… у меня несколько кнопок и в соответствии несколько файлов xml. никак не получается. очень нужно благодарю
  • Гость: а еще как сделать чтоб вставить в маркер ссылку и картинку?
  • Гость: да в балунах можно вставить ссылки! у меня получилось
  • Гость: как сделать чтоб на клик в инфо маркер открывалось моладльное окно? вот как тут http://www.barcelonagomobile.com/en/sites
  • Илья Вержбицкий: А что делать если нет координат и только адрес? Спасибо!
  • Юлия Адамова: Получить координаты с помощью адреса.