/* Compiled Bupuf front scripts */
/*
{
    "bupuf-google-map-js": {
        "src": "https:\/\/www.canhaem.org\/wp-content\/plugins\/bupuf-google-map\/js\/bupuf-google-map.js",
        "ver": "1.1.4",
        "priority": 10
    }
}
*/

/* / bupuf-google-map-js scripts start: / */
 function initMap() {

    var custom_maps = jQuery('.bupuf-google-map');

    custom_maps.each(function () {
        var locations = JSON.parse(jQuery(this).find('.bupuf-geo-json').val());
        var map_styles = JSON.parse(jQuery(this).find('.bupuf-map-styles').val());
        var map_id = jQuery(this).find('.bupuf-map-render').attr('id');
        var element = document.getElementById(map_id);
        var map = new google.maps.Map(element, {
            zoom: 10,
            center: {lat: 53.5444, lng: 113.4909},
            styles: map_styles
        });
        // Define the custom marker icons, using the store's "category".
        var pin_icon = jQuery(this).find('.pin-icon').val();
        if (pin_icon) {
            map.data.setStyle(feature => {
                return {
                    icon: {
                        url: pin_icon
                        //scaledSize: new google.maps.Size(64, 64)
                    }
                };
            });
        }

        map.data.addGeoJson(locations);

        var infoWindow = new google.maps.InfoWindow();
        var apiKey = jQuery(this).find('.map-api-key').val();

        // Show the information for a store when its marker is clicked.
        map.data.addListener('click', event => {

            let name = event.feature.getProperty('name');
            let description = event.feature.getProperty('description');
            let hours = event.feature.getProperty('hours');
            let phone = event.feature.getProperty('phone');
            let position = event.feature.getGeometry().get();

            let content = '<div><h3>'+name+'</h3>';
            if (description) content += '<p>'+description+'</p>';
            if (hours || phone) {
                content += '<p>';
                if (hours) content += '<b>Hours:</b>'+hours+'<br/>';
                if (phone) content += '<b>Phone:</b>'+phone;
                content += '</p>';
            }
            //content += '<p><img style="max-width: 100%;" src="https://maps.googleapis.com/maps/api/streetview?size=300x120&location='+position.lat()+','+position.lng()+'&key='+apiKey+'"></p>';
            content += '</div>';
            infoWindow.setContent(content);
            infoWindow.setPosition(position);
            infoWindow.setOptions({pixelOffset: new google.maps.Size(0, -30)});
            infoWindow.open(map);
        });

        // Set the initial bounds.
        var bounds = new google.maps.LatLngBounds();
        map.data.forEach(function(feature) {
            bounds.extend(feature.getGeometry().get());
        });

        var min_extend = 0.004;

        // Prevent the zoom from being too close if only one location exists.
        // Don't zoom in too far on only one marker
        if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
            var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + min_extend, bounds.getNorthEast().lng() + min_extend);
            var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - min_extend, bounds.getNorthEast().lng() - min_extend);
            bounds.extend(extendPoint1);
            bounds.extend(extendPoint2);
        }

        map.fitBounds(bounds);
    });
}