https://www.panda.org.cn/skin/assets/js/map-script.js

1(function($) {
2    
3    "use strict";
4
5/* --------------------------------------------
6Google Map
7-------------------------------------------- */ 
8window.onload = MapLoadScript;
9function GmapInit() {
10      var Gmap = $('.map-canvas');
11      Gmap.each(function() {
12        var $this           = $(this),
13            lat             = '',
14            lng             = '',
15            zoom            = 12,
16            scrollwheel     = false,
17            zoomcontrol     = true,
18            draggable       = true,
19            mapType         = google.maps.MapTypeId.ROADMAP,
20            title           = '',
21            contentString   = '',
22            theme_icon_path         = $this.data('icon-path'),
23            dataLat         = $this.data('lat'),
24            dataLng         = $this.data('lng'),
25            dataZoom        = $this.data('zoom'),
26            dataType        = $this.data('type'),
27            dataScrollwheel = $this.data('scrollwheel'),
28            dataZoomcontrol = $this.data('zoomcontrol'),
29            dataHue         = $this.data('hue'),
30            dataTitle       = $this.data('title'),
31            dataContent     = $this.data('content');
32            
33        if( dataZoom !== undefined && dataZoom !== false ) {
34            zoom = parseFloat(dataZoom);
35        }
36        if( dataLat !== undefined && dataLat !== false ) {
37            lat = parseFloat(dataLat);
38        }
39        if( dataLng !== undefined && dataLng !== false ) {
40            lng = parseFloat(dataLng);
41        }
42        if( dataScrollwheel !== undefined && dataScrollwheel !== null ) {
43            scrollwheel = dataScrollwheel;
44        }
45        if( dataZoomcontrol !== undefined && dataZoomcontrol !== null ) {
46            zoomcontrol = dataZoomcontrol;
47        }
48        if( dataType !== undefined && dataType !== false ) {
49            if( dataType == 'satellite' ) {
50                mapType = google.maps.MapTypeId.SATELLITE;
51            } else if( dataType == 'hybrid' ) {
52                mapType = google.maps.MapTypeId.HYBRID;
53            } else if( dataType == 'terrain' ) {
54                mapType = google.maps.MapTypeId.TERRAIN;
55            }           
56        }
57        if( dataTitle !== undefined && dataTitle !== false ) {
58            title = dataTitle;
59        }
60        if( navigator.userAgent.match(/iPad|iPhone|Android/i) ) {
61            draggable = false;
62        }
63        
64        var mapOptions = {
65          zoom        : zoom,
66          scrollwheel : scrollwheel,
67          zoomControl : zoomcontrol,
68          draggable   : draggable,
69          center      : new google.maps.LatLng(lat, lng),
70          mapTypeId   : mapType
71        };      
72        var map = new google.maps.Map($this[0], mapOptions);
73        
74        //var image = 'images/icons/map-marker.png';
75        var image = theme_icon_path;
76        
77        if( dataContent !== undefined && dataContent !== false ) {
78            contentString = '<div class="map-data">' + '<h6>' + title + '</h6>' + '<div class="map-content">' + dataContent + '</div>' + '</div>';
79        }
80        var infowindow = new google.maps.InfoWindow({
81            content: contentString
82        });
83        
84        var marker = new google.maps.Marker({
85          position : new google.maps.LatLng(lat, lng),
86          map      : map,
87          icon     : image,
88          title    : title
89        });
90        if( dataContent !== undefined && dataContent !== false ) {
91            google.maps.event.addListener(marker, 'click', function() {
92                infowindow.open(map,marker);
93            });
94        }
95        
96        if( dataHue !== undefined && dataHue !== false ) {
97          var styles = [
98    {
99        "featureType": "administrative",
100        "elementType": "labels.text.fill",
101        "stylers": [
102            {
103                "color": "#444444"
104            }
105        ]
106    },
107    {
108        "featureType": "landscape",
109        "elementType": "all",
110        "stylers": [
111            {
112                "color": "#fafafa"
113            }
114        ]
115    },
116    {
117        "featureType": "poi",
118        "elementType": "all",
119        "stylers": [
120            {
121                "visibility": "off"
122            }
123        ]
124    },
125    {
126        "featureType": "road",
127        "elementType": "all",
128        "stylers": [
129            {
130                "saturation": -100
131            },
132            {
133                "lightness": 45
134            }
135        ]
136    },
137    {
138        "featureType": "road.highway",
139        "elementType": "all",
140        "stylers": [
141            {
142                "visibility": "simplified"
143            }
144        ]
145    },
146    {
147        "featureType": "road.arterial",
148        "elementType": "labels.icon",
149        "stylers": [
150            {
151                "visibility": "off"
152            }
153        ]
154    },
155    {
156        "featureType": "transit",
157        "elementType": "all",
158        "stylers": [
159            {
160                "visibility": "off"
161            }
162        ]
163    },
164    {
165        "featureType": "water",
166        "elementType": "all",
167        "stylers": [
168            {
169                "color": "#ededed"
170            },
171            {
172                "visibility": "on"
173            }
174        ]
175    }
176];
177          map.setOptions({styles: styles});
178        }
179     });
180}
181    
182function MapLoadScript() {
183    var script = document.createElement('script');
184    script.type = 'text/javascript';
185    GmapInit();
186    document.body.appendChild(script);
187}
188
189})(window.jQuery);