map.js

var map;
var card_id;
var markers = [];
var infoWindow = new google.maps.InfoWindow();

const scrollToAnchor = (targetID) => {         
    const distanceToTop = (el) => {             
        return Math.floor(el.getBoundingClientRect().top);         
    };         
    //var targetID = ev.target.getAttribute('href');       
    const targetAnchor = document.querySelector(targetID);         
    document.querySelector('.map-container').scrollBy({ top: distanceToTop(targetAnchor) - 72, left: 0, behavior: 'smooth' });         
    ev.preventDefault();     
}

const initMap = () => {
    var latlng = new google.maps.LatLng(37.788518, -122.395687);
    var mapOptions = {
        center: latlng,
        zoom: 16,
        maxZoom: 17,
        minZoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        panControl: false,
        zoomControl: true,
        streetViewControl: false,
        scaleControl: false,
        overviewMapControl: false,
        mapTypeControl: false,
        styles: mapStyles
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    renderMarkers();
    attachEventHandlers();
};

const renderMarkers = () => {
    for (item of document.querySelectorAll('.locations h2 a')) {
        var card_id = item.getAttribute("data-card-id");
        var name = item.getAttribute("data-name");
        var address = item.getAttribute("data-address");
        var lat = item.getAttribute("data-latitude");
        var lng = item.getAttribute("data-longitude");
        var id = item.getAttribute("data-id");
        var panorama = item.getAttribute("data-panorama");
        var thumbnail = item.getAttribute("data-thumbnail");
        var description = item.getAttribute("data-description");
        var link = item.getAttribute("data-url");
        var features = item.getAttribute("data-features");
        var data = {
            name: name,
            address: address,
            lat: lat,
            lng: lng,
            id: id,
            open_space_id: card_id,
            panorama: panorama,
            thumbnail: thumbnail,
            description: description
        };
        var redIcon = {
            url: '/wp-content/themes/builder/library/js/marker.svg',
            size: new google.maps.Size(24, 24),
            scaledSize: new google.maps.Size(24, 24),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(6, 6)
        };
        var iconActive ={
            url: '/wp-content/themes/builder/library/js/marker-active.svg',
            size: new google.maps.Size(24, 24),
            scaledSize: new google.maps.Size(24, 24),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(6, 6)
        };
        var point = new google.maps.LatLng(lat, lng);
        var html = "<div class='infow'><div class='text'><h2 class='title'>" + name + "</h2>" + "<a class='toggler' href='"+link+"' target='_blank'>Explore Space &rarr;</a></div></div>";
        var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: redIcon,
            title: name,
            zIndex: 100
        });
        marker.open_space_id = card_id;

        markers.push(marker);
        bindInfoWindow(marker, map, infoWindow, html, data);
        
        
        
    }
};

const triggerClick = (e) => {
    console.log('clicked', e);
    const items = document.querySelectorAll('.locations h2 a');
    const idx = Array.from(items).indexOf(e.target);
    currentMarker = markers[idx];
    google.maps.event.trigger(currentMarker,"click");
};


const attachEventHandlers = () => {
    for (item of document.querySelectorAll('.locations h2 a')) {
        item.onclick = triggerClick;
    }
};

const bindInfoWindow = (marker, map, infoWindow, html, data) => {

    google.maps.event.addListener(marker, 'click', function() {
        var iconActive ={
            url: '/wp-content/themes/builder/library/js/marker-active.svg',
            size: new google.maps.Size(36, 36),
            scaledSize: new google.maps.Size(36, 36),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(6, 6)
        };

        var iconNormal ={
            url: '/wp-content/themes/builder/library/js/marker.svg',
            size: new google.maps.Size(24, 24),
            scaledSize: new google.maps.Size(24, 24),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(6, 6)
        };

        console.log(data);
        console.log('clicked map marker');
        var infowindow = new google.maps.InfoWindow({
            content: html
        });
        map.panTo(marker.getPosition());
        infoWindow.setContent(html);

        for (var i = 0; i < markers.length; i++) {
           markers[i].setIcon(iconNormal);
        }
    
        this.setIcon(iconActive);
        infoWindow.open(map, marker);


        //jQuery( ".explore" ).scrollTop( 0 );


        console.log('Scroll to #'+marker.open_space_id);
        if ( jQuery('.map-container:hover').length != 0) {
            setTimeout(function(){
                window.jQuery.smoothScroll({
                    scrollTarget: "#"+marker.open_space_id,
                    beforeScroll: function() {
                        console.log('sup');
                    },
                    offset: -90
                });
            }, 50);
        }

        //scrollToAnchor('#'+marker.open_space_id);

        // console.log('#link_'+card_id);
        // jQuery('#link_'+card_id).click();


    });
};


// function call that loads on initialize:
google.maps.event.addDomListener(window, 'load', initMap);