https://moratelindo.co.id/js/modules/maps-google.js

1jQuery(function ($) {
2    if ($('.b-google-map').length > 0) {
3        var cenLatlng = new google.maps.LatLng(35.362961015414056, -90.71299265625);
4
5        var myOptions = {
6            zoom: 9,
7            scrollwheel: false,
8            draggable: ($(document).width() > 768),
9            center: cenLatlng,
10            mapTypeControlOptions: {
11                mapTypeIds: ['greyed']
12            },
13            mapTypeId: 'greyed',
14            mapTypeControl: false
15        };
16
17        var map = new google.maps.Map($('.b-google-map__map-view')[0], myOptions);
18        $.googleMap = map;
19
20        // set map greyed style
21        var featureOpts = [
22            {
23                stylers: [
24                    { visibility: 'simplified' },
25                    { "saturation": -100 },
26                    { "lightness": 50 }
27                ]
28            }
29        ];
30        var customMapType = new google.maps.StyledMapType(featureOpts, {name: 'Greyed Style'});
31        map.mapTypes.set('greyed', customMapType);
32
33        // info window
34        var infoWindowTemplate = $('.b-google-map__info-window-template');
35        var infoWindow = new google.maps.InfoWindow({
36            content: infoWindowTemplate.html(),
37            maxWidth: infoWindowTemplate.data('width')
38//            ,pixelOffset: new google.maps.Size(0, 60)
39        });
40        var markers = [],
41        locations;
42        function setMarkers() {
43            // markers placement
44            var markerTemplate = $('.marker-template');
45
46            var markerIcon = markerTemplate.attr('src');
47            if (markerIcon.length == 0) {
48                markerIcon = {
49                    path: fontawesome.markers.MAP_MARKER,
50                    scale: 0.7,
51                    strokeWeight: 0.2,
52                    strokeColor: 'black',
53                    strokeOpacity: 1,
54                    fillColor: '#6c6b6b',
55                    fillOpacity: 1
56                };
57            }
58            locations = [
59                {title: 'Coogee Beach', lat: 35.027332, long: -89.88796, icon: markerIcon},
60                {title: 'Cronulla Beach', lat: 34.727332, long: -88.86796, icon: markerIcon},
61                {title: 'Manly Beach', lat: 34.627332, long: -91.84796, icon: markerIcon},
62                {title: 'Maroubra Beach', lat: 34.527332, long: -92.82796, icon: markerIcon},
63                {title: 'Bondi Beach', lat: 34.927332, long: -90.90796, icon: markerIcon}
64            ];
65
66            function showHiddenLabel() {
67                if (currentMark && currentMark.hasOwnProperty('markerLabel')) {
68                    currentMark.markerLabel.isHidden = false;
69                    currentMark.markerLabel.draw();
70                }
71            }
72
73
74            function openInfoWindow(map, marker) {
75                infoWindow.close();
76                showHiddenLabel();
77//                infoWindow.setContent(locations[i][0]);
78                if (marker.hasOwnProperty('markerLabel')) {
79                    marker.markerLabel.isHidden = true;
80                    marker.markerLabel.draw();
81                }
82                currentMark = marker;
83                infoWindow.open(map, marker);
84            }
85
86
87            var currentMark;
88
89
90            for (var i = 0; i < locations.length; i++) {
91                markers[i] = new google.maps.Marker({
92                    position: new google.maps.LatLng(locations[i]['lat'], locations[i]['long']),
93                    title: locations[i]['title'],
94                    map: map,
95                    icon: locations[i]['icon']
96                });
97
98                var markerLabel = markerTemplate.data('label');
99                if (markerLabel.length > 0) {
100                    var label = new MarkerLabel({
101                        map: map,
102                        labelClass: 'f-google-map__marker-label f-primary-b text-uppercase',
103                        labelText: markerLabel
104                    });
105                    label.bindTo('position', markers[i]);
106                    label.bindTo('visible', markers[i]);
107                    label.bindTo('clickable', markers[i]);
108                    label.bindTo('zIndex', markers[i]);
109                    markers[i].markerLabel = label;
110                }
111
112
113                google.maps.event.addListener(markers[i], 'click', function () {
114                    openInfoWindow(map, this);
115                });
116
117                google.maps.event.addListener(infoWindow, 'closeclick', showHiddenLabel);
118
119            }
120            // open info window
121            setTimeout(function () {
122                openInfoWindow(map, markers[$('.b-google-map__info-window-template').data('selected-marker')]);
123            }, 1500);
124        }
125
126        setMarkers();
127        function clearMarkers(){
128            for (var i = 0; i < locations.length; i++) {
129                markers[i].setMap(null);
130            }
131        }
132        $('.b-google-map').on('replace_marker', function () {
133            clearMarkers();
134            setMarkers();
135        });
136
137
138    }
139});