https://www.tact48.com/plugins/gmaps/system/layout/js/gmaps.js

1var geocoder;
2var bounds = new Array();
3var map = new Array();
4
5function defaultInitMap() {
6    // Hook for Required parameter callback
7    //https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=defaultInitMap
8    return true;
9}
10
11function initOptionsMap() {
12    return {
13        zoomControl: true, //enables/disables the Zoom control.
14        zoomControlOptions: {
15            style: google.maps.ZoomControlStyle.SMALL
16        },
17        mapTypeControl: true, //enables/disables the Map Type control that lets the user toggle between map types (such as Map and Satellite)
18        mapTypeId: google.maps.MapTypeId.ROADMAP,
19        mapTypeControlOptions: {
20            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
21            //style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
22            mapTypeIds: ["roadmap", "satellite", "hybrid", "terrain"],
23        },
24        streetViewControl: false, //enables/disables the Pegman control that lets the user activate a Street View panorama.
25        rotateControl: false, //enables/disables the appearance of a Rotate control for controlling the orientation of 45° imagery.
26        scaleControl: false, //enables/disables the Scale control that provides a simple map scale.
27        fullscreenControl: true, //enables/disables the control that opens the map in fullscreen mode.
28        zoom: 1,
29        center: new google.maps.LatLng(48, 2),
30        disableDefaultUI: true,//This property disables any UI control buttons from the Maps JavaScript API.
31        scrollwheel: false,
32        mapId: 'DEMO_MAP_ID',
33    }
34}
35
36function initialize(mapName, options, mapId) {
37    geocoder = new google.maps.Geocoder();
38    var myOptions = initOptionsMap();
39
40    if (typeof options != 'undefined') {
41        $.each(options, function(option, value) {
42           if(typeof myOptions[option] !== 'undefined') {
43               if(option == 'center') {
44                   myOptions[option] = new google.maps.LatLng(value.lat, value.lng)
45               } else {
46                   myOptions[option] = value;
47               }
48           }
49        });
50    }
51
52    myOptions['mapId'] = (typeof mapId !== 'undefined') ? mapId : 'DEMO_MAP_ID';
53    map[''+mapName] = new google.maps.Map(document.getElementById("map_canvas_gmaps"+mapName), myOptions);
54}
55
56function zoomToBounds(boundsFromGeocoder, mapName, mapObj){
57    if(bounds[''+mapName] == undefined) {
58        bounds[''+mapName] =  new google.maps.LatLngBounds();
59    }
60    bounds[''+mapName].extend(boundsFromGeocoder);
61    if(typeof mapObj !== 'undefined') {
62        map[''+mapName] = mapObj;
63    }
64
65    map[''+mapName].fitBounds(bounds[''+mapName]);
66}
67
68/**
69 * Adding marker on the google map by coordinates
70 * Format data addMarcers((object) map, (string) 'mapName', (json) {name:'Marker name', link:'http://www.site.com/page.html', address:'City, Address 23, 4577', 'lat':'0.454', 'lng':'4.574'})
71 */
72function addMarkerOnMap(gmap, mapName, marker, AdvancedMarkerElement, infowindow) {
73    var name = (marker.hasOwnProperty('link')) ? '<a href="'+marker.link+'">'+marker.name+'</a>' : marker.name;
74
75    // The place where loc contains geocoded coordinates
76    var latLng    = new google.maps.LatLng(parseFloat(marker.lat), parseFloat(marker.lng));
77
78    var newMarker = new AdvancedMarkerElement(
79        {
80            map: gmap,
81            title: marker.name,
82            position: latLng,
83            gmpClickable: true,
84        });
85
86    google.maps.event.addListener(newMarker, 'click', function(){
87        infowindow.close();
88        infowindow.setContent('<span>'+name+'</span><p>'+marker.address+'</p>');
89        infowindow.open(gmap, this);
90    });
91
92    // Zoom to bounds
93    if(bounds[''+mapName] == undefined) {
94        bounds[''+mapName] = new google.maps.LatLngBounds();
95    }
96    bounds[''+mapName].extend(latLng);
97    gmap.fitBounds(bounds[''+mapName]);
98}
99
100/**
101 * Adding markers on the google map by address
102 * Format data addMarcers((string) 'mapName', (json) {marker1:{name:'Marker name', link:'http://www.site.com/page.html', address:'City, Address 23, 4577'}})
103 */
104function addMarkersOnMapByAddress(mapName, markers, mapId) {
105    $(document).ready(function(){
106        async function initMap() {
107            var gmap = new google.maps.Map(document.getElementById('map_canvas_gmaps'+mapName), initOptionsMap());
108            gmap.mapId = (typeof mapId !== 'undefined') ? mapId : 'DEMO_MAP_ID';
109
110            const {InfoWindow} = await google.maps.importLibrary("maps");
111            const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");
112            const infowindow = new InfoWindow();
113
114            $.each(markers, function(i, val) {
115                var geocoder = new google.maps.Geocoder();
116
117                // Next line creates asynchronous request
118                geocoder.geocode({address: val.address}, function(results, status) {
119                    // And this is function which processes response
120                    if (status == google.maps.GeocoderStatus.OK) {
121                        val['lat'] = results[0].geometry.location.lat();
122                        val['lng'] = results[0].geometry.location.lng();
123
124                        addMarkerOnMap(gmap, mapName, val, AdvancedMarkerElement, infowindow);
125                    }
126                    else {
127                        console.log('Geocode was not successful for the following reason: '+status);
128                    }
129                });
130            });
131        }
132
133        window.addEventListener('load', initMap);
134    });

135}
136
137/**
138 * Adding markers on the google map by coordinates
139 * Format data addMarcers((string) 'mapName', (json) {marker1:{name:'Marker name', link:'http://www.site.com/page.html', address:'City, Address 23, 4577', 'lat':'0.454', 'lng':'4.574'}})
140 */
141function addMarkersOnMapByCoordinates(mapName, markers, mapId) {
142    $(document).ready(function(){
143        async function initMap() {
144            var gmap = new google.maps.Map(document.getElementById('map_canvas_gmaps'+mapName), initOptionsMap());
145            gmap.mapId = (typeof mapId !== 'undefined') ? mapId : 'DEMO_MAP_ID';
146
147            const {InfoWindow} = await google.maps.importLibrary("maps");
148            const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");
149            const infowindow = new InfoWindow();
150
151            $.each(markers, function(i, val) {
152                addMarkerOnMap(gmap, mapName, val, AdvancedMarkerElement, infowindow);
153            });
154        }
155
156        window.addEventListener('load', initMap);
157    });
158}