https://www.goraymi.com/lib/map.js?t=26.04.20.1

1/* MAP */
2
3$(document).ready(function () {
4
5});
6
7function setMapHeader(item_type, place_id, lat, lon) {
8    /*
9        var userLat = $("#LocIP_lat").val();
10        var userLon = $("#LocIP_lon").val();
11
12    */
13
14    /*
15    //FUNCION OK - DINAMICA
16        mapHeader = new google.maps.Map(document.getElementById('mapHeader'), {
17            center: {lat: parseFloat($("#mapHeader").attr("lat")), lng: parseFloat($("#mapHeader").attr("lon"))},
18            zoom: 10,
19            disableDefaultUI: true
20        });
21
22        var marker = new google.maps.Marker({
23            position: {lat: parseFloat($("#mapHeader").attr("lat")), lng: parseFloat($("#mapHeader").attr("lon"))},
24            maps: mapHeader,
25            title: ''
26        });
27    */
28
29    $("#fullMap > .fa-times").off('click touch');
30    $("#fullMap > .fa-times").on('click', function () {
31        //$("#fullMap").modal('hide');
32        $('#fullMap').removeClass("in");
33        $('.modal-backdrop').hide();
34        $('body').removeClass('modal-open');
35        $('body').css('padding-right', '');
36        $('#fullMap').hide();
37    });
38
39
40    $(".item-maps, #mapHeaderUI").off('click touch');
41    $(".item-maps, #mapHeaderUI").on('click touch', function (e) {
42        e.preventDefault();
43
44        $("#fullMap").modal('show');
45
46        /*
47        var setMap_type = $('body.item');
48
49        if (setMap_type.length) {
50            setMap_Full(place_id, lat, lon);
51        } else {
52            raymiSetMap(lat, lon);
53        }
54         */
55
56        var setMap_type = $('body.raymi');
57
58        if (setMap_type.length) {
59            raymiSetMap(lat, lon);
60        } else {
61            setMap_Full(place_id, lat, lon);
62        }
63
64        /*
65        //ACTIVAR
66        //		alert('TIPO: '+item_type);
67                if (item_type == 'raymi') {
68                    raymiSetMap(lat, lon);
69                } else {
70                    setMap_Full(place_id, lat, lon, key);
71                }
72        */
73    });
74}
75
76function setMap_Full(place_id, lat, lon) {
77    let zoom = 16;
78    let html;
79//				var markers='color:blue%7Clabel:S%7C'+center;
80
81    if (place_id != '') {
82        html = '<iframe width="800" height="600" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:' + place_id + '&key=' + GR_GM_KEY + '" class="embedMap" allowfullscreen></iframe>';
83        $('#fullMap .content').html(html);
84    } else {
85
86        $('#fullMap').css('display', 'block');
87
88        mapFull = new google.maps.Map(document.getElementById('fullMapContent'), {
89//						center: {lat: parseFloat($("#mapHeader").attr("lat")), lng: parseFloat($("#mapHeader").attr("lon"))},
90            center: {lat: parseFloat(lat), lng: parseFloat(lon)},
91            zoom: zoom,
92        });
93
94        var marker = new google.maps.Marker({
95            position: {lat: parseFloat(lat), lng: parseFloat(lon)},
96            map: mapFull,
97            title: ''
98        });
99    }
100}
101
102function raymiSetMap(lat, lon) {
103//				alert('ingresa en setMAP RAYMI');
104    windows = [];
105    objects = [];
106    markers = [];
107
108//				alert('RAYMI MAP');
109//				$('#fullMap .content').html('RAYMI');
110    $('#fullMap .content').html('');
111    $('#fullMap').css('display', 'block');
112
113    mapFull = new google.maps.Map(document.getElementById('fullMapContent'), {
114//						center: {lat: parseFloat($("#mapHeader").attr("lat")), lng: parseFloat($("#mapHeader").attr("lon"))},
115        center: {lat: parseFloat(lat), lng: parseFloat(lon)},
116        zoom: 8,
117    });
118
119    //Creates a sidebar button
120    $('#fullMap .content').after('<ul id="maps-side"></ul>');
121    var map_side = document.getElementById('map-side');
122
123
124    var ms_child = '';
125
126    //Creates a infowindow object.
127    var infoWnd = new google.maps.InfoWindow();
128
129    var markerSize = {x: 20, y: 79};
130
131    google.maps.Marker.prototype.setLabel = function (label) {
132        this.label = new MarkerLabel({
133            map: this.map,
134            marker: this,
135            text: label
136        });
137        this.label.bindTo('position', this, 'position');
138    };
139
140    var MarkerLabel = function (options) {
141        this.setValues(options);
142        this.span = document.createElement('span');
143        this.span.className = 'maps-marker-label';
144    };
145
146    MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), {
147        onAdd: function () {
148            this.getPanes().overlayImage.appendChild(this.span);
149            var self = this;
150            this.listeners = [
151                google.maps.event.addListener(this, 'position_changed', function () {
152                    self.draw();
153                })];
154        },
155        draw: function () {
156            var text = String(this.get('text'));
157            var position = this.getProjection().fromLatLngToDivPixel(this.get('position'));
158            this.span.innerHTML = text;
159//						this.span.style.left = (position.x - (markerSize.x / 2)) - (text.length * 3) + 10 + 'px';
160            this.span.style.left = (position.x - (markerSize.x / 2)) + 'px';
161            this.span.style.top = (position.y - markerSize.y + 40) + 'px';
162        }
163    });
164
165    var bounds = new google.maps.LatLngBounds();
166    //$(".raymi-list .item .distance").each(function(){
167    $(".items-collection .item .distance").each(function () {
168
169
170        if (parseFloat($(this).data("lat"))) {
171            $this = $(this);
172            var pos = Number($(this).data("pos"));
173            objects.push($(this).html());
174            var myPlace = new google.maps.LatLng(parseFloat($(this).data("lat")), parseFloat($(this).data("lon")));
175
176            bounds.extend(myPlace);
177
178            var title = '';
179
180            if ($this.parent().parent().find('.card-title').text().trim() != '') {
181                title = $this.parent().parent().find('.card-title').text().trim();
182            } else {
183
184            }
185
186
187            /*
188                        if($this.parent().find(".font-size-tyni").text().trim()!=""){
189                            $h5 = $this.parent().find(".font-size-tyni").text().trim();
190                                                    }
191                        $link=$this.parent().parent().parent().parent().attr('href');
192                        if (typeof $link === "undefined") {
193                            $link=$this.parent().parent().parent().parent().parent().attr('href');
194                        }
195            */
196
197            var contentString = pos + '.- ' + title;	//ARREGLAR
198            /*
199                        var infoWnd = new google.maps.InfoWindow({
200                            content: contentString
201                        });
202            */
203
204//			var item_category = $(this).closest('.searchItem').data('category');
205
206            var marker = new google.maps.Marker({
207                position: myPlace,
208                map: mapFull,
209//									label: labels[labelIndex++ % labels.length]
210                label: pos
211//pos
212//                                                    icon: '/common/images/map_'+item_category+'.png'
213            });
214
215            //The infoWindow is opened when the sidebar button is clicked
216            marker.addListener('click', function () {
217                infoWnd.setContent(contentString);
218                infoWnd.open(mapFull, marker);
219            });
220            /*
221                        //The infoWindow is opened when the sidebar button is clicked
222                        google.maps.event.addListener(marker, "click", function(){
223                            infoWnd.setContent("<strong>" + title + "</title>");
224                            infoWnd.open(maps, marker);
225                        });
226            */
227
228            $(this).attr("position", objects.length - 1);
229
230
231            markers.push(marker);
232
233            ms_child = document.createElement("li");
234            ms_child.innerHTML = '<span>' + pos + '.-</span> ' + title;
235            ms_child.setAttribute('title', title);
236            map_side.appendChild(ms_child);
237
238            //Trigger a click event to marker when the button is clicked.
239            google.maps.event.addDomListener(ms_child, "click", function () {
240                google.maps.event.trigger(marker, "click");
241                $('#maps-side li').removeClass('active');
242                $(this).addClass('active');
243//								alert('clic');
244            });
245        }
246    });
247    mapFull.fitBounds(bounds);
248
249    var input = document.getElementById('map-side');
250    mapFull.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
251
252
253    /*
254        $("body").append('<div class="bgFullScreen hidden"><i class="fa fa-times-circle fa-2x" aria-hidden="true"></i></div>');
255        $(".bgFullScreen:last").click(function(){
256            $(".bgFullScreen:last,.fullmap").toggleClass("hidden");
257        });
258    */
259
260    /*
261        $("body").append('<div class="bgFullScreen hidden"><i class="fa fa-times-circle fa-2x" aria-hidden="true"></i></div>');
262        $(".bgFullScreen:last").click(function(){
263            $(".bgFullScreen:last,.fullmap").toggleClass("hidden");
264        });
265    */
266}