https://prenatalgenomicsgroup.org.uk/scripts/plugins/jquery.mapsection.js

1$.fn.MapSection = function () {
2    var mapItemContainer = $(this);
3    var markersArray = [];
4    var richMarkersArray = [];
5    var newMap;
6    var latlngbounds;
7
8    initMapSection(mapItemContainer);
9
10    function initMapSection(mapSection) {
11
12        var mapPlaceHolder = mapSection.find('.map-section-placeholder');
13        var mapCenterLat = 54.787326;
14        var mapCenterLong = -1.538905;
15
16
17        if (mapSection.attr("data-map-center-lat") != undefined) {
18            mapCenterLat = mapSection.attr("data-map-center-lat");
19        }
20
21        if (mapSection.attr("data-map-center-long") != undefined) {
22            mapCenterLong = mapSection.attr("data-map-center-long");
23        }
24
25
26        mapCenter = new google.maps.LatLng(mapCenterLat, mapCenterLong);
27
28        var myOptions = {
29            zoom: 15,
30            center: mapCenter,
31            mapTypeId: google.maps.MapTypeId.ROADMAP,
32            disableDefaultUI: false,
33            scrollwheel: false,
34            //styles: [{ "featureType": "administrative", "elementType": "geometry.fill", "stylers": [{ "visibility": "off" }] }, { "featureType": "administrative", "elementType": "labels.text", "stylers": [{ "visibility": "on" }, { "color": "#8e8e8e" }] }, { "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [{ "color": "#7f7f7f" }] }, { "featureType": "administrative", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "off" }] }, { "featureType": "administrative.country", "elementType": "geometry.stroke", "stylers": [{ "color": "#bebebe" }] }, { "featureType": "administrative.province", "elementType": "geometry.stroke", "stylers": [{ "visibility": "on" }, { "color": "#cbcbcb" }, { "weight": "0.69" }] }, { "featureType": "administrative.locality", "elementType": "geometry", "stylers": [{ "visibility": "simplified" }] }, { "featureType": "landscape", "elementType": "all", "stylers": [{ "color": "#e4e4e4" }] }, { "featureType": "poi", "elementType": "all", "stylers": [{ "visibility": "off" }] }, { "featureType": "road", "elementType": "all", "stylers": [{ "saturation": -100 }, { "lightness": 45 }, { "visibility": "simplified" }] }, { "featureType": "road", "elementType": "geometry.stroke", "stylers": [{ "visibility": "off" }] }, { "featureType": "road", "elementType": "labels", "stylers": [{ "visibility": "off" }] }, { "featureType": "road.highway", "elementType": "all", "stylers": [{ "visibility": "simplified" }, { "color": "#dadada" }] }, { "featureType": "road.highway", "elementType": "labels", "stylers": [{ "visibility": "off" }] }, { "featureType": "road.highway", "elementType": "labels.text", "stylers": [{ "visibility": "simplified" }] }, { "featureType": "road.arterial", "elementType": "all", "stylers": [{ "visibility": "on" }] }, { "featureType": "road.arterial", "elementType": "labels.text", "stylers": [{ "visibility": "simplified" }] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "featureType": "road.local", "elementType": "all", "stylers": [{ "visibility": "simplified" }] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [{ "color": "#eeeeee" }] }, { "featureType": "road.local", "elementType": "labels.text", "stylers": [{ "visibility": "simplified" }] }, { "featureType": "transit", "elementType": "all", "stylers": [{ "visibility": "off" }] }, { "featureType": "water", "elementType": "all", "stylers": [{ "color": "#cbcbcb" }, { "visibility": "on" }] }, { "featureType": "water", "elementType": "geometry.fill", "stylers": [{ "color": "#d9d9d9" }] }, { "featureType": "water", "elementType": "geometry.stroke", "stylers": [{ "visibility": "off" }] }, { "featureType": "water", "elementType": "labels.text", "stylers": [{ "visibility": "simplified" }] }]
35        }
36
37
38        newMap = new google.maps.Map(document.getElementById(mapSection.find('.map-section-placeholder').attr('id')), myOptions);
39        DrawMapItems(mapSection);
40    }
41
42    function DrawMapItems(mapSection) {
43        clearMarkers();
44        var mapItems = mapSection.find(".map-item");
45
46        //add all projects
47        $(mapItems).each(function () {
48            var lat = $(this).attr("data-lat");
49            var long = $(this).attr("data-long");
50            var icon = $(this).attr("data-pin-icon");
51
52            var mapContent = $(this).find('.map-item-content');
53
54            if (lat && long) {
55                latlngbounds.extend(new google.maps.LatLng(lat, long));
56
57                var marker = new google.maps.Marker({
58                    position: new google.maps.LatLng(lat, long),
59                    icon: icon,
60                    map: newMap
61                });
62                markersArray.push(marker);
63
64                if (mapContent.length > 0) {
65                    var contentString = '<div class="map-popup"><div class="map-popup-inner"><i class="fa fa-times"></i>' + mapContent.html() + '</div></div>'
66
67                    var richMarker = new RichMarker({
68                        position: new google.maps.LatLng(lat, long),
69                        map: newMap,
70                        draggable: false,
71                        visible: false,
72                        content: contentString
73                    });
74

75                    richMarkersArray.push(richMarker);
76                    richMarker.setShadow("shadow", "none");
77
78                    google.maps.event.addDomListener(marker, 'click', function () {
79                        var panVerticalBy = (mapSection.height() / 2) - 50;
80                        var openPosition = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
81
82                        //console.log(panVerticalBy);
83                        newMap.setZoom(12);
84                        newMap.panTo(openPosition);
85                        newMap.panBy(0, -panVerticalBy);
86
87                        for (var i = 0; i < richMarkersArray.length; i++) {
88                            richMarkersArray[i].setVisible(false);
89                        }
90
91                        richMarker.setVisible(!richMarker.getVisible());
92                        richMarker.setZIndex(1000);
93
94                        google.maps.event.addDomListener(richMarker, 'click', function (e) {
95                            if (mapItems.length > 1) {
96                                newMap.fitBounds(latlngbounds);
97                            }
98                            else {
99                                if (mapItems.length == 1) {
100                                    newMap.setCenter(new google.maps.LatLng($(mapItems[0]).attr('data-lat'), $(mapItems[0]).attr('data-long')));
101                                }
102                                else {
103                                    newMap.setCenter(mapCenter);
104                                }
105                            }
106
107                            richMarker.setVisible(false);
108                        });
109                    });
110
111                }
112            }
113        });
114
115        if (mapItems.length > 1) {
116            newMap.fitBounds(latlngbounds);
117            newMap.setZoom(newMap.getZoom() + 1);
118        }
119        else {
120            if (mapItems.length == 1) {
121                newMap.setCenter(new google.maps.LatLng($(mapItems[0]).attr('data-lat'), $(mapItems[0]).attr('data-long')));
122            }
123            else {
124                newMap.setCenter(mapCenter);
125            }
126        }
127    }
128
129    function clearMarkers() {
130        latlngbounds = new google.maps.LatLngBounds();
131        for (var i = 0; i < markersArray.length; i++) {
132            markersArray[i].setMap(null);
133        }
134        markersArray.length = 0;
135
136        for (var i = 0; i < richMarkersArray.length; i++) {
137            richMarkersArray[i].setMap(null);
138        }
139        richMarkersArray.length = 0;
140    }
141}