https://www.thehewittfertilitycentre.org.uk/_frontend/js/main/functions/json-google-map.js

1var initJsonGoogleMap = function () {
2    /*Map*/
3
4    if ($('.map_canvas').length) {
5        // general map setings
6
7        var latlng = new google.maps.LatLng(53.386195, -3.037148);
8        var mapOptions = {
9            minZoom: 2,
10            maxZoom: 16,
11            scrollwheel: false,
12            center: latlng,
13            mapTypeId: google.maps.MapTypeId.ROADMAP,
14            mapTypeControl: false,
15            panControlOptions: {
16                position: google.maps.ControlPosition.TOP_LEFT
17            },
18            zoomControlOptions: {
19                position: google.maps.ControlPosition.TOP_LEFT
20            }
21        }
22
23        var maps = [];
24        var imgPath = '/images/main/map-pins/';
25        var image = imgPath + 'pin.png';
26
27        var infoWindow = null;
28
29        function addMarkers(mapItem) {
30            // reset the markers (just incase)
31            mapItem.markers = [];
32
33            var map = mapItem.map;
34            var jsonSrc = mapItem.json;
35            var markers = mapItem.markers;
36
37            var bounds = new google.maps.LatLngBounds(),
38                isThereMarkers = false,
39                infoWindow = new google.maps.InfoWindow({});
40
41            for (var i = 0; i < jsonSrc.length; i++) {
42                var location = jsonSrc[i];
43                var contentString = location.Name;
44
45                if (location.Pin != "") {
46                    image = imgPath + location.Pin;
47                }
48
49                var marker = new google.maps.Marker({
50                    map: map,
51                    icon: image,
52                    position: new google.maps.LatLng(location.Latitude, location.Longitude),
53                    title: contentString,
54                    bubbleContent: location.BubbleContent,
55                    link: location.Link,
56                    markerId: location.Id,
57                    bookingLink: location.BookingLink,
58                    availabilityLink: location.AvailabilityLink
59                });
60
61                bounds.extend(marker.position);
62
63                google.maps.event.addListener(marker, 'click', function () {
64                    var markerContent = '<div class="info_box"><h3>' + this.title + '</h3>' + this.bubbleContent;
65                    markerContent += '</div>';
66                    infoWindow.setContent(markerContent);
67                    map.panTo(this.getPosition());
68                    infoWindow.open(map, this);
69                });
70
71                marker.setMap(map);
72                markers.push(marker);
73            }
74
75            if (markers.length > 0) {
76                map.initialZoom = true;
77                map.fitBounds(bounds);
78
79                if (markers.length === 1) {
80                    // center on the single marker
81                    map.setCenter(markers[0].position);
82                } else {
83                    var center = map.getCenter();
84                    map.setCenter(center);
85                }
86            }
87        }
88
89        function initialize(mapItem, callbackFunction) {
90            addMarkers(mapItem);
91
92            google.maps.event.addDomListener(window, "resize", function () {
93                var center = mapItem.map.getCenter();
94                google.maps.event.trigger(mapItem.map, "resize");
95                mapItem.map.setCenter(center);
96            });
97
98            google.maps.event.addListener(mapItem.map, 'zoom_changed', function () {
99                zoomChangeBoundsListener =
100                    google.maps.event.addListener(mapItem.map, 'bounds_changed', function (event) {
101                        if (this.getZoom() > 15 && this.initialZoom == true) {
102                            // Change max/min zoom here
103                            this.setZoom(15);
104                            this.initialZoom = false;
105                        }
106                        google.maps.event.removeListener(zoomChangeBoundsListener);
107                    });
108            });
109
110            if (typeof (callbackFunction) === 'function') {
111                callbackFunction();
112            }

113            mapItem.initialised = true;
114        }
115
116        // lets get mapping!!!
117
118        var initializeAllMaps = function () {
119            // get all the maps
120
121            var allMaps = $('.map_canvas');
122
123            allMaps.each(function (index, mapCanvasElement) {
124                maps.push({ "map": new google.maps.Map(mapCanvasElement, mapOptions), "json": $(mapCanvasElement).data('json'), "markers": [], "initialised": false });
125            });
126
127            // initialize them all
128
129            $.each(maps, function (index, mapItem) {
130                initialize(mapItem);
131            });
132        };
133
134        google.maps.event.addDomListener(window, 'load', initializeAllMaps);
135    }
136};