https://www.hellobarnala.com/wp-content/themes/listingpro/assets/js/home-map.js

1jQuery(window).load(function($){
2        if(jQuery(".lp_home").is("#homeMap")) {
3        jQuery('#homeMap').empty();
4        $defLat = jQuery('body').data('defaultmaplat');
5        $defLong = jQuery('body').data('defaultmaplot');
6            L.Google = L.Class.extend({
7                includes: L.Mixin.Events,
8                options: {
9                    minZoom: 0,
10                    maxZoom: 18,
11                    tileSize: 256,
12                    subdomains: 'abc',
13                    errorTileUrl: '',
14                    attribution: '',
15                    opacity: 1,
16                    continuousWorld: false,
17                    noWrap: false,
18                },
19                // Possible types: SATELLITE, ROADMAP, HYBRID
20                initialize: function(type, options) {
21                    L.Util.setOptions(this, options);
22                    this._type = google.maps.MapTypeId[type || 'SATELLITE'];
23                },
24                onAdd: function(map, insertAtTheBottom) {
25                    this._map = map;
26                    this._insertAtTheBottom = insertAtTheBottom;
27                    // create a container div for tiles
28                    this._initContainer();
29                    this._initMapObject();
30                    // set up events
31                    map.on('viewreset', this._resetCallback, this);
32                    this._limitedUpdate = L.Util.limitExecByInterval(this._update, 150, this);
33                    map.on('move', this._update, this);
34                    //map.on('moveend', this._update, this);
35                    this._reset();
36                    this._update();
37                },
38                onRemove: function(map) {
39                    this._map._container.removeChild(this._container);
40                    //this._container = null;
41                    this._map.off('viewreset', this._resetCallback, this);
42                    this._map.off('move', this._update, this);
43                    //this._map.off('moveend', this._update, this);
44                },
45                getAttribution: function() {
46                    return this.options.attribution;
47                },
48                setOpacity: function(opacity) {
49                    this.options.opacity = opacity;
50                    if (opacity < 1) {
51                        L.DomUtil.setOpacity(this._container, opacity);
52                    }
53                },
54                _initContainer: function() {
55                    var tilePane = this._map._container
56                        first = tilePane.firstChild;
57                    if (!this._container) {
58                        this._container = L.DomUtil.create('div', 'leaflet-google-layer leaflet-top leaflet-left');
59                        this._container.id = "_GMapContainer";
60                    }
61                    if (true) {
62                        tilePane.insertBefore(this._container, first);
63                        this.setOpacity(this.options.opacity);
64                        var size = this._map.getSize();
65                        this._container.style.width = size.x + 'px';
66                        this._container.style.height = size.y + 'px';
67                    }
68                },
69                _initMapObject: function() {
70                    this._google_center = new google.maps.LatLng(0, 0);
71                    var map = new google.maps.Map(this._container, {
72                        center: this._google_center,
73                        zoom: 0,
74                        mapTypeId: this._type,
75                        disableDefaultUI: true,
76                        keyboardShortcuts: false,
77                        draggable: false,
78                        disableDoubleClickZoom: true,
79                        scrollwheel: false,
80                        streetViewControl: false
81                    });
82                    var _this = this;
83                    this._reposition = google.maps.event.addListenerOnce(map, "center_changed", 
84                        function() { _this.onReposition(); });
85                    map.backgroundColor = '#ff0000';
86                    this._google = map;
87                },
88                _resetCallback: function(e) {
89                    this._reset(e.hard);
90                },
91                _reset: function(clearOldContainer) {
92                    this._initContainer();
93                },
94                _update: function() {
95                    this._resize();
96                    var bounds = this._map.getBounds();
97                    var ne = bounds.getNorthEast();

98                    var sw = bounds.getSouthWest();
99                    var google_bounds = new google.maps.LatLngBounds(
100                        new google.maps.LatLng(sw.lat, sw.lng),
101                        new google.maps.LatLng(ne.lat, ne.lng)
102                    );
103                    var center = this._map.getCenter();
104                    var _center = new google.maps.LatLng(center.lat, center.lng);
105                    this._google.setCenter(_center);
106                    this._google.setZoom(this._map.getZoom());
107                    this._google.fitBounds(google_bounds);
108                },
109                _resize: function() {
110                    var size = this._map.getSize();
111                    if (this._container.style.width == size.x &&
112                        this._container.style.height == size.y)
113                        return;
114                    this._container.style.width = size.x + 'px';
115                    this._container.style.height = size.y + 'px';
116                    google.maps.event.trigger(this._google, "resize");
117                },
118                onReposition: function() {
119                    //google.maps.event.trigger(this._google, "resize");
120                }
121            });
122            L.HtmlIcon = L.Icon.extend({
123                options: {
124                    /*
125                    html: (String) (required)
126                    iconAnchor: (Point)
127                    popupAnchor: (Point)
128                    */
129                },
130                initialize: function(options) {
131                    L.Util.setOptions(this, options);
132                },
133                createIcon: function() {
134                    var div = document.createElement('div');
135                    div.innerHTML = this.options.html;
136                    if (div.classList)
137                        div.classList.add('leaflet-marker-icon');
138                    else
139                        div.className += ' ' + 'leaflet-marker-icon';
140                    return div;
141                },
142                createShadow: function() {
143                    return null;
144                }
145            });
146            var maplistingby = jQuery('body').data('maplistingby');
147            if(maplistingby==null || maplistingby=="" || maplistingby=="geolocaion"){
148                lpGetGpsLocName(function (lpgetcurrentcityvalue) {
149                    lpgpsclocation = lpgetcurrentcityvalue;
150                    console.log(lpgpsclocation);
151                    callhomemapajax(lpgpsclocation, maplistingby);
152                    //console.log(lpgpsclocation);
153                });
154            }else{
155                callhomemapajax('', maplistingby);
156            }
157            function callhomemapajax(lpcity, maplistingby){
158                jQuery('#homeMap').addClass('loading');
159            jQuery.ajax({
160                type: 'POST',
161                dataType: 'json',
162                url: listingpro_home_map_object.ajaxurl,
163                data: { 
164                    'action': 'listingpro_home_map_content', 
165                        'listingby': maplistingby,
166                        'lpcity': lpcity,
167                    'trig': 'home_map',
168                    },
169                success: function(data){
170                    if(data){
171                        jQuery('#homeMap').removeClass('loading');
172                        var map = null;
173                        $mtoken = jQuery('#page').data("mtoken");	
174                        $mtype = jQuery('#page').data("mtype");
175                        $mapboxDesign = jQuery('#page').data("mstyle");
176                        if($mtoken != '' && $mtype == 'mapbox'){
177                            L.mapbox.accessToken = $mtoken;
178                            map = L.mapbox.map('homeMap');
179                            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
180                                id: jQuery('#page').data("mstyle"),
181                                accessToken: jQuery('#page').data("mtoken")
182                            }).addTo(map);
183                            var markers = new L.MarkerClusterGroup();
184                            hasgetbouts = false;

185                            jQuery.each(data, function(i,v) {
186                                $vlatitude = v.latitude;
187                                $vlongitude = v.longitude;
188                                if($vlatitude != null && $vlongitude != null){
189                                    hasgetbouts = true;
190                                    //alert(v.latitude);
191                                    var markerLocation = new L.LatLng($vlatitude, $vlongitude); // London
192                                    var CustomHtmlIcon = L.HtmlIcon.extend({
193                                        options : {
194                                            html : "<div class='lpmap-icon-shape pin card"+i+"'><div class='lpmap-icon-contianer'><img src='"+v.icon+"' /></div></div>",
195                                        }
196                                    });
197                                    var customHtmlIcon = new CustomHtmlIcon(); 
198                                    var marker = new L.Marker(markerLocation, {icon: customHtmlIcon}).bindPopup('<div class="map-post"><div class="map-post-thumb"><a target="_blank" href="'+v.url+'">'+v.image+'</a></div><div class="map-post-des"><div class="map-post-title"><h5><a target="_blank" href="'+v.url+'">'+v.title+'</a></h5></div><div class="map-post-address"><p><i class="fa fa-map-marker"></i> '+v.address+'</p></div></div></div>').addTo(map);
199                                    markers.addLayer(marker);
200                                    map.addLayer(markers);
201                                }
202                            });
203                            if(hasgetbouts){
204                                map.fitBounds(markers.getBounds());
205                            }else{
206                                map.fitBounds([[$defLat, $defLong],[$defLat, $defLong]]);
207                            }
208                            map.scrollWheelZoom.disable();
209                        }else{
210                            var map = new L.Map('homeMap', {
211                               dragging: true,
212                               tap: false
213                            });
214                            if($mtype == 'google'){
215                                var googleLayer = new L.Google('ROADMAP');						
216                                map.addLayer(googleLayer);
217                            }else{
218                                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
219                            }
220                            var markers = new L.MarkerClusterGroup();
221                            hasgetbouts = false;
222                            jQuery.each(data, function(i,v) {
223                                $vlatitude = v.latitude;
224                                $vlongitude = v.longitude;
225                                if( ($vlatitude != '' || $vlatitude != 0) && ($vlongitude != '' || $vlongitude != 0) ){								
226                                    hasgetbouts = true;
227                                    var markerLocation = new L.LatLng($vlatitude, $vlongitude); // London
228                                    var CustomHtmlIcon = L.HtmlIcon.extend({
229                                        options : {
230                                            html : "<div class='lpmap-icon-shape pin card"+i+"'><div class='lpmap-icon-contianer'><img src='"+v.icon+"' /></div></div>",
231                                        }
232                                    });
233                                    var customHtmlIcon = new CustomHtmlIcon(); 
234                                    var marker = new L.Marker(markerLocation, {icon: customHtmlIcon}).bindPopup('<div class="map-post"><div class="map-post-thumb"><a target="_blank" href="'+v.url+'">'+v.image+'</a></div><div class="map-post-des"><div class="map-post-title"><h5><a target="_blank" href="'+v.url+'">'+v.title+'</a></h5></div><div class="map-post-address"><p><i class="fa fa-map-marker"></i> '+v.address+'</p></div></div></div>').addTo(map);
235                                    markers.addLayer(marker);
236                                    map.addLayer(markers);								
237                                }							
238                            });						
239                            if(hasgetbouts){
240                                map.fitBounds(markers.getBounds());
241                            }else{							
242                                map.fitBounds([[$defLat, $defLong],[$defLat, $defLong]]);
243                            }
244                            map.scrollWheelZoom.disable();
245                            map.invalidateSize();
246                        }
247                    }								
248                    },
249                    error: function (request, status, error) {
250                        jQuery('#homeMap').removeClass('loading');
251                        console.log(request.responseText);
252                }
253            });
254            };		
255        }
256    });