Несколько 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>
Как это сделать?

