Работа с Google Maps. Разметка в информации о точке из HTML

Не всегда во всплывающее окно информации о точке нужно вносить только текст, но и блочную разметку, которую мы возьмем со страницы

  • eye 81
  • 1

В прошлой статье работы с 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.

comments powered by HyperComments

Поделиться

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

Отправлено!

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