dealers-google-maps.js

function initMap() {};

$(function() {
    var googleMapInstance;
    var googleBoundsInstance;
    var googleAutocompleteInstance;
    var results = [];
    var markers = [];
    var infoWindows = [];

    initMap = function() {
        var mapOptions = {
            center: {
                lat: 43.112334,
                lng: 12.594401
            },
            maxZoom: 22,
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoomControl: true,
            mapTypeControl: false,
            scaleControl: true,
            streetViewControl: false,
            rotateControl: false,
            scrollwheel: false
        };

        googleMapInstance = new google.maps.Map($('#map')[0], mapOptions);
        initAutocomplete(true);
        bindEvents();
        bindLocateSubmit();
        bindNearbySubmit();
        $('#locate').click();
    }

    function initAutocomplete(firstInit) {
        googleAutocompleteInstance = new google.maps.places.Autocomplete($('#address')[0], {
            types: ['geocode'],
            componentRestrictions: {
                country: $('#country option:selected').val()
            }
        });

        googleAutocompleteInstance.bindTo('bounds', googleMapInstance);

        googleAutocompleteInstance.addListener('place_changed', function() {
            var place = googleAutocompleteInstance.getPlace();
            if (!place.geometry) {
                alert("Autocomplete's returned place contains no geometry");
                return;
            }

            $('#lat').val(place.geometry.location.lat());
            $('#lng').val(place.geometry.location.lng());

        });
    }

    function bindNearbySubmit() {
        var nearby = $('#nearby');
        var enabled = false;

        if (navigator.geolocation) {
            nearby.prop('disabled', false);
            enabled = true;
        }

        nearby.on('click', function(event) {
            event.preventDefault();

            if (enabled === false) return;

            nearby.prop('disabled', true);


            navigator.geolocation.getCurrentPosition(function(position) {

                var currgeocoder = new google.maps.Geocoder();
                return currgeocoder.geocode({
                    'location': new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
                }, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                        nearby.prop('disabled', false);
                        $("#address").val(results[0].formatted_address);
                        $('#lat').val(position.coords.latitude);
                        $('#lng').val(position.coords.longitude);
                        $('#locate').click();
                    } else {
                        nearby.prop('disabled', false);
                        alert('Geocode was not successful for the following reason: ' + status);
                    }
                });

            }, function(a) {

                alert($_words['nearby_fail_to_locate']);
                nearby.prop('disabled', false);
            }, {
                timeout: 70000,
                enableHighAccuracy: true,
                maximumAge: 75000
            });
        })

    }

    function bindEvents() {
        var countrySelected = $('#country option:selected');
        $('#lat').val(countrySelected.data('lat'));
        $('#lng').val(countrySelected.data('lng'));

        googleMapInstance.setCenter({
            lat: parseFloat(countrySelected.data('lat')),
            lng: parseFloat(countrySelected.data('lng'))
        });

        googleMapInstance.setZoom(5);

        $('#country').on('change', function() {
            var countrySelected = $('#country option:selected');

            $('#address').val('').prop('disabled', false);
            $('#lat').val(countrySelected.data('lat'));
            $('#lng').val(countrySelected.data('lng'));
            googleMapInstance.setCenter({
                lat: parseFloat(countrySelected.data('lat')),
                lng: parseFloat(countrySelected.data('lng'))
            });
            googleMapInstance.setZoom(5);
            initAutocomplete();
        });

        $(document).on('click', '.infowindow-content .infowindow-title', function(event) {
            var index = $(this).parent().data('index');

            $('.infowindow-content').removeClass('active');
            closeAllInfowindows();

            infoWindows[index].open(googleMapInstance, markers[index]);
            googleMapInstance.setCenter(markers[index].getPosition());

            $('.infowindow-content').filter(function() {
                return $(this).data('index') == index
            }).addClass('active');
        });

        $(document).on('click', '[data-zoom]', function(event) {
            event.preventDefault();
            var index = $(this).data('zoom');
            googleMapInstance.setCenter(markers[index].getPosition());
            googleMapInstance.setZoom(15);
        });
    }

    function bindLocateSubmit() {
        $('#form-map').on('submit', function(event) {
            event.preventDefault();
            return;
        })
        $('#locate').on('click', function(event) {
            event.preventDefault();

            var self = $(this);

            self.prop('disabled', true);
            $('#waiting').fadeIn();

            resetForm();

            $.getJSON(self.data('url'), {
                ajax: true,
                value: $('#address').val(),
                country: $('#country').val(),
                category: $('#category').val(),
                radius: $('#address').val().length > 0 ? 50 : 'no_distance',
                lat: $('#lat').val(),
                lng: $('#lng').val(),
            }, function(data) {

                $('.results').html('');
                $('#waiting').fadeOut();
                for (var i = 0; i < data.length; i++) {
                    addMarker(data[i], i);
                    addResult(data[i], i);
                }

                if (markers.length > 0) {
                    googleMapInstance.fitBounds(googleBoundsInstance);
                } else {
                    alert($_words['no_dealers_found']);
                }
                self.prop('disabled', false);
            });
        });
    }

    function resetForm() {
        // reset bounds
        googleBoundsInstance = new google.maps.LatLngBounds();

        // reset infowindow and clear marker
        markers.forEach(function(marker, index) {
            infoWindows[index].close(googleMapInstance, marker);
            marker.setMap(null);
        });

        infoWindows = [];
        markers = [];
        results = [];
    }

    function closeAllInfowindows() {
        infoWindows.forEach(function(info, index) {
            infoWindows[index].close(googleMapInstance, markers[index]);
        });
    }

    function addMarker(data, index) {
        var position = new google.maps.LatLng(parseFloat(data.lat), parseFloat(data.lng));

        if (isNaN(position.lat()) || isNaN(position.lng())) {
            console.log('bad position', data);
            return;
        }

        // add marker
        var marker = new google.maps.Marker({
            position: position,
            map: googleMapInstance,
            icon: {
                url: "https://49f44b141764baa2639d-7ed4c224bc1671c64dae8740f0861232.ssl.cf6.rackcdn.com/assets/images/marker_lion.png",
                size: new google.maps.Size(40, 45),
                origin: new google.maps.Point(0, 0),
                anchor: new google.maps.Point(40 / 2, 35),
                scaledSize: new google.maps.Size(40, 45),
            }
        });

        googleBoundsInstance.extend(marker.position);
        var infowindow = new google.maps.InfoWindow({
            content: generateTemplate(data, index)
        });

        markers.push(marker);
        infoWindows.push(infowindow);
        results.push(data);

        marker.addListener('click', function() {
            closeAllInfowindows();
            infowindow.open(googleMapInstance, marker);
            googleMapInstance.setCenter(marker.getPosition());
            // googleMapInstance.setZoom(15);
            $('.infowindow-content').removeClass('active');
            $('.infowindow-content').filter(function() {
                return $(this).data('index') == index
            }).addClass('active');
            $('#dealers .results').scrollTop($('.results .infowindow-content[data-index="' + index + '"]').parent()[0].offsetTop - 220);
            // $('#dealers .results').scrollTop($('#dealers .results .infowindow-content[data-index="' + index + '"]')[0].scrollHeight);
        });
    }

    function addResult(data, index) {
        var item = '<li>' + generateTemplate(data, index) + '</li>';

        $('.results').append($(item));
    }

    function generateTemplate(data, index) {
        if (typeof data == "undefined") {
            return "no data";
        }

        var item = "<div class='infowindow-content'  data-index='" + index + "'>";
        item += '<h6 class="infowindow-title"> <span class="title">' + data.name + '</span> <span class="fa fa-chevron-down"></span></h6>';

        // dealer category
        if (data.category)
            item += '<span class="infowindow-data">' + data.category + '</span>';


        // distance
        if (data.distance > 0) {
            item += '<small>' + parseFloat(data.distance).toFixed(1) + data.distance_type + ' </small>';
        }

        // address
        item += '<span class="infowindow-data"><br>' + data.address + '</span>';

        // email
        if (data.email)
            item += '<span class="infowindow-data"><a href="mailto:' + data.email + '" target="_blank">' + data.email + '</a></span>';

        // phone
        if (data.phone)
            item += '<span class="infowindow-data">' + data.phone + '</span>';


        // links
        item += '<span class="infowindow-data">';
        item += '<a href="https://www.google.com/maps?q=' + data.lat + ',' + data.lng + ' " target="_blank">' + $_words['directions'] + '</a> | <a href="#" data-zoom="' + index + '">' + $_words[
            'zoom'] + '</a> ';

        if (data.web) {
            item += '| <a href="' + data.web + '" target="_blank">' + $_words['web'] + '</a>';
        }

        item += '</span>';
        item += '</div>';

        return item;
    }
});