Работа с Google Maps. Берем значения с html

Рассматриваем вариант сбора данных для обработки со страницы для установки меток на карте Google Maps

  • eye 79
  • 1

Почти на каждом сайте сейчас встречается блок с картой, где установлена метка с адресом офиса организации или что-то подобное.

В официальных мануалах от Google Maps функция принимает параметры в виде координат. Давайте рассмотрим готовое решение того, как можно установить несколько точек сразу не меняя скрипт, после его подключения.

Для начала разметка:

<div class="map">
<div id="map" class="removable"></div>
</div>

<span id="data-center" data-lat-center="59.984943" data-lng-center="30.308029" data-zoom-center="18">

<ul class="data-makers-map">

<li data-lat="59.984943" data-lng="30.308029" data-descr="г. Санкт-Петербург, наб. Чёрной речки, 41"></li>

<li data-lat="58.984943" data-lng="30.308029" data-descr="г. Санкт-Петербург, наб. Чёрной речки, 41"></li>

</ul>

Разберем, что здесь написано. Для начала:

  1. Первые 3 строчки кода — разметка блока для самой карты.
  2. Дальше span с несколькими дата атрибутами:
    1. data-lat-center — широта начальной точки фокусировки;
    2. data-lng-center — долгота начальной точки фокусировки;
    3. data-zoom-center — начальный зум.
  3. Список с дата-атрибутами:
    1. data-lat — широта точки;
    2. data-lng — долгота точки;
    3. data-descr — текст попапа на точке.

Теперь скрипт на jquery:


var map;

var _lat_center = Number($('#data-center').attr('data-lat-center'));
var _lng_center = Number($('#data-center').attr('data-lng-center'));
var _zoom_center = Number($('#data-center').attr('data-zoom-center'));

function setMarker(lat, lng, adress) {
var infoContentString = '&lt;div class="info-content"&gt;' + adress + '&lt;/div&gt;';
var infoWindow = new google.maps.InfoWindow({
content: infoContentString
});

var icon = {
url: 'marker.svg',
scaledSize: new google.maps.Size(43, 60),
origin: new google.maps.Point(0, 0),
optimized: false
},
marker = new google.maps.Marker({
position: {lat: lat, lng: lng},
map: map,
icon: icon,
title: adress,
optimized: false
});

google.maps.event.addListener(marker, "click", function(evt) {
infoWindow.open(map, marker);
});

google.maps.event.addListener(map, 'zoom_changed', function () {
marker.setIcon(icon);
});

}
function initMap(id_map) {
var uluru = {lat: _lat_center, lng: _lng_center};
map = new google.maps.Map(document.getElementById(id_map), {
zoom: _zoom_center,
scrollwheel: false,
center: uluru
});
}

initMap("map");
function createMarkers() {
var liList = $('.data-makers-map').children('li');
$(liList).each(function(i, val) {
text = $(val).attr('data-descr');
_lat = Number($(val).attr('data-lat'));
_lng = Number($(val).attr('data-lng'));
setMarker(_lat, _lng, text)
});
};
createMarkers();

Из этого всего интересует функция  initMap(id_map) и createMarkers() . Функция initMap принимает параметр id блока, где будет инициализирована сама карта. Также в этой функции присутствуют такие переменные как: _lat_center, _lng_center, _zoom_center, которые были созданы в самом начале. Эти переменные содержат данные для начальной фокусировки карты, и были взяты из:

 <span id="data-center" data-lat-center="59.984943" data-lng-center="30.308029" data-zoom-center="18">

.

В функции createMarkers() перебирается весь список наших точек в цикле и устанавливаются при помощи функции setMarker(_lat, _lng, text).

 

comments powered by HyperComments

Поделиться

На вашу почту будет отправлена одноразовая ссылка на портфолио

Отправлено!

Что-то пошло не так... Попробуйте отправить позже