There is a code, but I can’t figure out how to add my own marker for a group. https://jsfiddle.net/Gorotto/rv4nz3tg/10

var gmarkers1 = []; var markers1 = []; // Our markers markers1 = [ ['0', '<span class="city">Москва и Подмосковье</span>', 55.684578602223, 37.299261771164, 'classic'], ['1', 'Title', 55.763945799824, 37.616280192198, 'individual', 52.5, 4], ['2', 'Title', 52.4555687, 5.039231599999994, 'lowcoster', 52.6, 4], ['3', 'Title', 52.4555687, 5.029231599999994, 'one', 52.7, 4] ]; // Info Window Content var infoWindowContent = [ ['<div class="info_content">' + '<h3>Mumbai</h3>' + '<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'], ['<div class="info_content">' + '<h3>Pune</h3>' + '<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'], ['<div class="info_content">' + '<h3>Bhopal</h3>' + '<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'], ['<div class="info_content">' + '<h3>Agra</h3>' + '<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>' +'</div>'], ]; var infoWindow = new google.maps.InfoWindow(), marker1, i; /** * Function to init map */ function initialize() { var center = new google.maps.LatLng(55.731714493237, 37.56797370581); var mapOptions = { zoom: 10, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP, }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); for (i = 0; i < markers1.length; i++) { addMarker(markers1[i]); } } /** * Function to add marker to map */ function addMarker(marker) { var category = marker[4]; var title = marker[1]; var pos = new google.maps.LatLng(marker[2], marker[3]); var content = marker[1]; var centroLat = marker[5]; var centroLon = marker[6]; marker1 = new google.maps.Marker({ title: title, position: pos, category: category, map: map, }); gmarkers1.push(marker1); google.maps.event.addListener(marker1, 'click', (function(marker1, i) { return function() { infoWindow.setContent(infoWindowContent[i][0]); infoWindow.open(map, marker1); map.panTo(this.getPosition()); map.setZoom(15); } })(marker1, i)); // Marker click listener /* google.maps.event.addListener(marker1, 'click', (function (marker1, content) { return function () { console.log('Gmarker 1 gets pushed'); infowindow.setContent(content); infowindow.open(map, marker1); map.panTo(this.getPosition()); map.setZoom(15); } })(marker1, content)); */ } /** * Function to filter markers by category */ filterMarkers = function (category) { for (i = 0; i < markers1.length; i++) { marker = gmarkers1[i]; // If is same category or category not picked if (marker.category == category || category.length === 0) { marker.setVisible(true); console.log(marker.centroLat, marker.centroLon); } // Categories don't match else { marker.setVisible(false); } } } // Init map initialize(); 
 #map-canvas { width: 100%; height: 406px; margin-top: 10px; } .map__buttons { width: 100%; display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//maps.googleapis.com/maps/api/js?key=AIzaSyCzqbJ8_zNhqgtMWJL4M9bXDBcsyS5QXvo&sensor=false&v=3&language=ru"></script> <div class="map__buttons"> <button onclick="filterMarkers('classic')"> <span>Классика</span></button> <button onclick="filterMarkers('individual')"> <span>Премиум</span></button> <button onclick="filterMarkers('lowcoster')"> <span>Эконом</span></button> <button onclick="filterMarkers('one')"><span>Монокресельный формат</span></button> </div> <div id="map-canvas"></div>

    2 answers 2

    I added the picture, and the description is displayed, just click on the marker. With a hover, probably another approach is needed. But I don't know which one

     var gmarkers1 = []; var markers1 = []; var infowindow = new google.maps.InfoWindow({ content: '' }); // Our markers markers1 = [ ['0', '<span class="city">Москва и Подмосковье</span>', 55.684578602223, 37.299261771164, 'classic'], ['1', 'Title', 55.763945799824, 37.616280192198, 'individual', 52.5, 4], ['2', 'Title', 52.4555687, 5.039231599999994, 'lowcoster', 52.6, 4], ['3', 'Title', 52.4555687, 5.029231599999994, 'one', 52.7, 4] ]; /** * Function to init map */ function initialize() { var center = new google.maps.LatLng(55.731714493237, 37.56797370581); var mapOptions = { zoom: 10, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP, }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); for (i = 0; i < markers1.length; i++) { addMarker(markers1[i]); } } /** * Function to add marker to map */ function addMarker(marker) { var category = marker[4]; var title = marker[1]; var pos = new google.maps.LatLng(marker[2], marker[3]); var content = marker[1]; var centroLat = marker[5]; var centroLon = marker[6]; var image = null; if (category === 'classic'){ image = { url: 'http://maps.google.com/mapfiles/kml/paddle/grn-circle.png', size: new google.maps.Size(40, 52), scaledSize: new google.maps.Size(40), } } marker1 = new google.maps.Marker({ title: title, position: pos, category: category, map: map, icon: image, }); gmarkers1.push(marker1); // Marker click listener google.maps.event.addListener(marker1, 'click', (function(marker1, content) { return function() { console.log('Gmarker 1 gets pushed'); infowindow.setContent(content); infowindow.open(map, marker1); map.panTo(this.getPosition()); map.setZoom(15); } })(marker1, content)); } /** * Function to filter markers by category */ filterMarkers = function(category) { for (i = 0; i < markers1.length; i++) { marker = gmarkers1[i]; // If is same category or category not picked if (marker.category == category || category.length === 0) { marker.setVisible(true); console.log(marker.centroLat, marker.centroLon); } // Categories don't match else { marker.setVisible(false); } } } // Init map initialize(); 
     #map-canvas { width: 100%; height: 406px; margin-top: 10px; } .map__buttons { width: 100%; display: -ms-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; } 
     <!DOCTYPE html> <html> <body> <div class="map__buttons"> <button onclick="filterMarkers('classic')"> <span>Классика</span></button> <button onclick="filterMarkers('individual')"> <span>Премиум</span></button> <button onclick="filterMarkers('lowcoster')"> <span>Эконом</span></button> <button onclick="filterMarkers('one')"><span>Монокресельный формат</span></button> </div> <div id="map-canvas"></div> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script> </body> </html>

    • almost not, I need each group to have its own marker, or just for each label its own marker. - Oleg Andreev
    • If interested, updated the code, now when you hover one text, when you click another. - Oleg Andreev
    • I do not understand. Do you have a problem with writing a condition? ... added a condition in the code - Dmytryk
    • Yes, unfortunately for me this is a problem. And I currently have 4 groups, and for each group of markers. - Oleg Andreev

      /* Map short */ var gmarkers1 = []; var markers1 = []; var infowindow = new google.maps.InfoWindow({ content: '' }); // Our markers markers1 = [ ['0', '<span class="city">Москва и Подмосковье</span>', 55.684578602223, 37.299261771164, 'classic', 52.7, 4, 'Plot 160, Mytri Nagar,<br> Madinaguda, Miyapur,<br> Hyderabad.<br><br>Phone:<br> 040 65081334, 040 65081335', 'img/CLASSIC_MARKER.png'], ['1', 'Title', 55.763945799824, 37.616280192198, 'individual', 52.5, 4,'Plot 160, Mytri Nagar,<br> Madinaguda, Miyapur,<br> Hyderabad.<br><br>Phone:<br> 040 65081334, 040 65081335', 'img/INDIVIDUAL_MARKER.png'], ['2', 'Title', 55.802853178794, 37.526128057152, 'lowcoster', 52.6, 4, 'ТЕКСТ', 'img/LOWCOSTER_MARKER.png'], ['3', 'Title', 55.727955197891,37.475995877251, 'one', 52.7, 4, '<span class="city">Москва и Подмосковье</span><span>м. Славянский бульвар </span>', 'img/ONE_MARKER.png'] ]; /** * Function to init map */ if ($('#map-canvas').length > 0) {//проверяет наличие блока на странице function initialize() { var center = new google.maps.LatLng(55.731714493237, 37.56797370581); var mapOptions = { zoom: 11, center: center, mapTypeId: google.maps.MapTypeId.ROADMAP, }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); for (i = 0; i < markers1.length; i++) { addMarker(markers1[i]); } } initialize(); } /** * Function to add marker to map */ function addMarker(marker) { var category = marker[4]; var title = marker[1]; var pos = new google.maps.LatLng(marker[2], marker[3]); var content = marker[7]; var centroLat = marker[5]; var centroLon = marker[6]; var image = { url: marker[8], size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(40, 40), scaledSize: new google.maps.Size(31, 44) }; marker1 = new google.maps.Marker({ title: title, position: pos, category: category, map: map, html: content, icon: image }); gmarkers1.push(marker1); // Marker click listener google.maps.event.addListener(marker1, 'click', (function (marker1, content) { return function () { console.log('Gmarker 1 gets pushed'); infowindow.setContent(content); infowindow.open(map, marker1); map.panTo(this.getPosition()); map.setZoom(15); } })(marker1, content)); } /** * Function to filter markers by category */ filterMarkers = function (category) { for (i = 0; i < markers1.length; i++) { marker = gmarkers1[i]; // If is same category or category not picked if (marker.category == category || category.length === 0) { marker.setVisible(true); console.log(marker.centroLat, marker.centroLon); } // Categories don't match else { marker.setVisible(false); } } }