Несколько HTML маркеров на Google карте

Вот HTML

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

Вот инициализация карты и вывод маркеров.

function initMap() {

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: new google.maps.LatLng(56.0156444,37.8820703),
        scrollwheel: false
    });

    var iconBase = 'img/'; //папка с картинками

    var icons = { //разные картинки на типы объектов
        school: { icon: iconBase + 'school.svg' },
        childgarden: {icon: iconBase + 'child_garden.svg'},
        shop: {icon: iconBase + 'shop.svg'},
        food: {icon: iconBase + 'food.svg'},
        entertainment: {icon: iconBase + 'star.svg'},
        sport: {icon: iconBase + 'sport.svg'},
        hospital: { icon: iconBase + 'hospital.svg' }
    };

    var features = [
        {
            position: new google.maps.LatLng(56.0156444,37.8820703),
            title: 'Леруа Мерлен',
            type: 'shop',
            html: '<div class="shop">SHOP</div>'
        }, {
            position: new google.maps.LatLng(48.505654, 135.046260),
            title: 'Школа Первая',
            type: 'school',
            html: '<br><i>Дети - это будущее!<i>'
        }, {
            position: new google.maps.LatLng(48.502654, 135.076260),
            title: 'Школа вторая',
            type: 'school',
            html: '<br><i>Кружки самодеятельности!<i>'
        }
    ];

//для всплывайки
    var contentString = '';
    var infowindow = new google.maps.InfoWindow({ content: contentString });

    //инициализируем маркеты
    features.forEach(function(feature) {
        var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            title: feature.title,
            html: feature.html,
            animation: google.maps.Animation.DROP,
            map: map
        });
    //передаем во всплывайку текст маркера
        marker.addListener('click', function() {
            infowindow.setContent(this.title + this.html);
            infowindow.open(map, marker);
        });
    });
}

Но не получается как по макету

По макету нужно так

введите сюда описание изображения

А получается без цветных крожочков

введите сюда описание изображения

Нужно обернуть иконки в цветные кружочки. Я думаю может лучше вывести все маркеры через html как

<div class="shop"></div>

Как это сделать?


Ответы (0 шт):