Работа с Google Maps. Разметка в информации о точке из HTML
Не всегда во всплывающее окно информации о точке нужно вносить только текст, но и блочную разметку, которую мы возьмем со страницы
-
104
В прошлой статье работы с Google Maps мы уже рассказывали о том, как можно взять информацию о точке включая ее координаты и описание прямо с разметки страницы. Но, такой вариант пригодится, если текст всплывающей точки будет без разметки, а обычная строка, которую можно взять из data-атрибута.
Теперь же рассмотрим вариант того, как можно взять и разметку для точки. Ниже листинг всего кода html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map Google</title>
<style type="text/css">
.map{
height: 450px;
width: 100%;
}
.removable{
height: 450px;
width: 100%;
}
#data-center{
display: none;
}
.data-makers-map{
display: none;
}
</style>
</head>
<body>
<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">
<div class="map-text">
<div class="map-title">Заголовок</div>
<div class="map-address"> г. Санкт-Петербург, наб. Чёрной речки, 41</div>
</div>
</li>
<li data-lat="58.984943" data-lng="30.308029">
<div class="map-text">
<div class="map-title">Заголовок</div>
<div class="map-address"> г. Санкт-Петербург, наб. Чёрной речки, 41</div>
</div>
</li>
</ul>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCn0gNd0rskaCPZkjP61tS9-eVKIVRgA8"></script>
<script type="text/javascript" src="map.js"></script>
</html>
А теперь код 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, text) {
var infoContentString = '<div class="info-content">' + text + '</div>';
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: text,
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).html();
_lat = Number($(val).attr('data-lat'));
_lng = Number($(val).attr('data-lng'));
console.log(_lat, _lng, text);
setMarker(_lat, _lng, text)
});
};
createMarkers();
В этой версии скрипта текстовые данные уже берутся не из data-атрибута, а из самого элемента списка li.
Поделиться
webcossacks 2019. All rights reserved. 