https://www.superindo.co.id//js/superindoMaps/superindoMaps.js

1(function( $ ) {
2    
3    var settings = {
4        locations : {},
5        container : {},
6        width : 0,
7        height: 0,
8        base_url: ''
9
10    };
11    var superindoMap = {
12        stores : [],
13        markerIconUrl : "",
14        markers : [],
15        map : {},
16        containerResize : _containerResize,
17        container : {},
18        addLocations : _addLocations,
19        clearLocations : _clearLocations,
20        infoWindow: null,
21        infoWindowTemplate: "<div id='content'>" +
22            "<div class='iw-store-pic'>"+
23                "<a class='fancybox' data-fancybox='images' href='{{pict}}'>"+
24                    "<img alt= '{{alt}}' src='{{pic}}' class='img-map'>"+
25                "</a>"+
26            "</div>"+
27            "<div class='iw-store-name'><p class='red standar-font' style='margin-bottom:10px;'><b>Super Indo {{name}}</b></p></div>"+
28            "<div class='iw-store-address'>{{address}}</div>"+
29            "<div className='iw-store-phone'><a href='tel:{{phone-link}}'>{{phone}}</a></div>"+
30            // "<div className='iw-store-phone'>{{phone}}</div>"+
31        "</div>",
32        triggerMapEvent : null
33
34    };
35    // Plugin definition.
36    $.fn.superindoMaps = function( options ) {
37        settings = $.extend({}, options);
38        settings.container = superindoMap.container = this;
39        superindoMap.triggerMapEvent = google.maps.event.trigger;
40        superindoMap.markerIconUrl = options.markerIconUrl;
41        superindoMap.markerIconUrl2 = options.markerIconUrl2;
42        superindoMap.stores = $.extend({}, settings.locations);
43        
44        this.height(settings.height);
45        this.width(settings.width);
46        initialize();
47
48        return $(this).prop("superindoMap", superindoMap);
49    };
50
51    $.fn.superindoMaps.getMapInstance = function(elmt){
52        return $(elmt).prop("superindoMap");
53    };
54
55    //$.fn.superindoMaps.containerResize = _containerResize;
56    
57    function _containerResize(){
58        var sMap = this;
59        var center = sMap.map.getCenter();
60        google.maps.event.trigger(sMap.map, 'resize');
61        sMap.map.setCenter(center);
62        _reloadMarkersFromStores.call(this);
63    }
64
65    // Private function for debugging.
66    function initialize(){
67        var firstLatLng = {lat : -6.208280, lng : 106.845867}; // Test
68        superindoMap.map = new google.maps.Map(settings.container[0], {
69            zoom: 11,
70            center: firstLatLng,
71            scrollwheel: false,
72            mapTypeId: google.maps.MapTypeId.ROADMAP
73        });
74
75        superindoMap.map.setCenter({lat : -6.208280, lng : 106.845867});
76    }
77
78    function _addLocations(locations){
79        var sMap = this;
80        sMap.stores = $.extend({}, sMap.stores, locations);
81        _reloadMarkersFromStores.call(sMap);
82    }
83
84    function _addMarkers(){
85        var sMap = this;
86        var marker = {};
87
88        sMap.markers = $.map(sMap.stores, function(item, index) {
89            var latLng = $.map(item.coord.split(","),function(elem, idx) {
90                return parseFloat(elem);
91            });
92
93            if(item.type==2)
94            {
95                var icon_new = sMap.markerIconUrl2;
96            }
97            else
98            {
99                var icon_new = sMap.markerIconUrl;
100            }
101
102            var marker = new google.maps.Marker({
103                title: 'Super Indo ' + item.name,
104                position:{
105                  lat : latLng[0],
106                  lng : latLng[1]
107                },
108                icon: icon_new
109            });
110
111            item.phoneLink = (item.phone.split("/"))[0];
112            marker.superindoStoreRef = item.id;
113            marker = _appendInfoWindow.call(sMap, marker, item);
114
115            marker.setMap(sMap.map);
116            return marker;
117        });
118
119        if(sMap.markers.length > 0){
120            sMap.map.setCenter((sMap.markers[0]).getPosition());
121            // window.console.log((sMap.markers[0]).getPosition().toJSON());
122        }
123    }
124
125    function _clearMarkers(){
126        var sMap = this;
127        $.each(sMap.markers, function(index, val) {
128            val.setMap(null);
129        });
130
131        sMap.markers = [];
132        
133    }
134
135    function _clearLocations(){
136        var sMap = this;
137        _clearMarkers.call(sMap);
138        sMap.stores = [];
139    }
140
141    function _reloadMarkersFromStores(){
142        var sMap = this;
143
144        _clearMarkers.call(this);
145        _addMarkers.call(this);
146    }
147
148    function _appendInfoWindow(marker, store){
149        var sMap = this;  
150
151        marker.addListener('click', function(){
152            console.log("clicke marker");
153
154            var contentHtml = sMap.infoWindowTemplate
155                .replace("{{name}}", store.name)
156                .replace("{{pic}}", settings.base_url+store.pic)
157                .replace("{{address}}", store.address)
158                .replace("{{pict}}", settings.base_url+'../'+store.pic)
159                .replace("{{alt}}", store.alt)
160                // .replace("{{phone}}", store.phone)
161                .replace(new RegExp("\{\{phone\}\}", "g"), store.phone)
162                .replace("{{phone-link}}", store.phoneLink)
163
164            if(sMap.infoWindow !== null)
165                sMap.infoWindow.close();
166
167            sMap.infoWindow = new google.maps.InfoWindow({
168                content: contentHtml
169            });
170
171            sMap.infoWindow.open(sMap, marker);
172        });
173
174        return marker;
175    }
176 
177    // struktur lokasi [nama toko, coord, alamat toko, telepon, pic]
178    // ...
179 
180// End of closure.
181 
182})( jQuery );