/// <reference types="google.maps" />

//Loading Symbol
const loading = '<br><br><br><br><br><center><img src="/z-archive/images/loading.gif" border="0"></center>';

//Variables for google maps API
let t = [];
let x = [];
let y = [];
let h = [];
let listing_array = [];

function addPlaces() {
  var address = $("#address").val();
  $.ajax({
    'url': "/API/geocode_zip_code.php",
    'global': false,
    'type': "POST",
    'data': {'address':address},
    'success': function (data) { processPlaces(data); }
  });
}

function processPlaces(data) {
    const mapContent = $('#mapContent');
    mapContent.html('');
    listing_array = data;
    for (let i=0; i < data.length; i++) {
        mapContent.append('<div style="text-align:center">');
        mapContent.append(data[i].string);
        mapContent.append('</div>');
    }
    initialize();
}

function initialize() {
    const google_map = new google.maps.Map(
        document.getElementById("map_canvas"),
        {
            center: { lat: 28.0207631, lng: -82.2240993 },
            zoom: 9,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    );

    const info_window = new google.maps.InfoWindow({
        content: 'loading',
        maxHeight: 500
    });

    // Create new markers
    for (const i = 0; i < t.length; i++) {
        
        //Give first marker a different color
        let pinColor;
        if (i===0) {
            pinColor = "009900";
        } else {
            pinColor = "FE7569";
        }

        const pinGlyph = new google.maps.PinElement({
            glyphColor: pinColor,
        });
        const markerGlyph = new google.maps.AdvancedMarkerElement({
            map: google_map,
            pinGlyph: pinGlyph,
            pinColor:pinColor,
            position: { lat: parseFloat(x[i]), lng: parseFloat(y[i]) },
        });


        //Load markers
        // const m = new google.maps.marker.AdvancedMarkerElement({
        //     map: google_map,
        //     position: { lat: parseFloat(x[i]), lng: parseFloat(y[i]) },
        //     content: pin,
        //     title: t[i],
        // });
        
        //Add a click listener to each marker.
        google.maps.event.addListener(markerGlyph, 'click', function() {
            info_window.setContent(this.html);
            info_window.open(google_map, this);
        });
    }
}