https://donimirski.com/Scripts/groupmap.js

1var map;
2
3document.addEventListener('DOMContentLoaded', function () {
4    var script = document.createElement('script');
5    script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyB4F381xQST3TtNZM7I8Z7PGLuwG0vo2Xw&callback=initMap';
6    script.async = true;
7
8    window.initMap = function () {
9        map = new google.maps.Map(document.getElementById('map'), {
10            center: { lat: 50.0615426, lng: 19.9351627 },
11            zoom: 11,
12            styles: [
13                {
14                    "featureType": "poi.attraction",
15                    "stylers": [
16                        {
17                            "visibility": "off"
18                        }
19                    ]
20                },
21                {
22                    "featureType": "poi.business",
23                    "stylers": [
24                        {
25                            "visibility": "off"
26                        }
27                    ]
28                },
29                {
30                    "featureType": "poi.government",
31                    "stylers": [
32                        {
33                            "visibility": "off"
34                        }
35                    ]
36                },
37                {
38                    "featureType": "poi.medical",
39                    "stylers": [
40                        {
41                            "visibility": "off"
42                        }
43                    ]
44                },
45                {
46                    "featureType": "poi.school",
47                    "stylers": [
48                        {
49                            "visibility": "off"
50                        }
51                    ]
52                },
53                {
54                    "featureType": "poi.sports_complex",
55                    "stylers": [
56                        {
57                            "saturation": 5
58                        },
59                        {
60                            "visibility": "off"
61                        }
62                    ]
63                }
64            ]
65        });
66
67        var markers = [];
68
69        $(".coordinates").each(function () {
70            var lng = $(this).attr("lng") - 0;
71            var lat = $(this).attr("lat") - 0;
72            var title = $(this).siblings(".hotelName").text();
73
74            createMarker(lng, lat, title);
75        });
76
77        function createMarker(lng, lat, title) {
78            var infowindow = new google.maps.InfoWindow({
79                content: "<p>" + title + "</p>"
80            });
81
82            google.maps.event.addListener(map, "click", function (event) {
83                infowindow.close();
84            });
85
86            var marker = new google.maps.Marker({
87                icon: '../Content/Images/default-pin.png',
88                map: map,
89                position: { lat, lng },
90                title: title,
91                infowindow: infowindow
92            });
93
94            markers.push(marker);
95
96            google.maps.event.addListener(marker, 'click', function () {
97                hideAllInfoWindows(map);
98                this.infowindow.open(map, this);
99            });
100
101            marker.setMap(map);
102        }
103
104        function hideAllInfoWindows(map) {
105            markers.forEach(function (marker) {
106                marker.infowindow.close(map, marker);
107            });
108        }
109    }
110
111    document.head.appendChild(script);
112});