Thread: Google Map Help

Hello,

I will like some help on an issue I’m having if possible. I’m working on the following url:

https://www.citibank.com/icg/sa/citi...ighlights.html.

This is mostly 2 main files. One js file with locations in an array. And another get form data that the user indicates they want to see. My problem is that I can’t get the “Location” filters to work and display the correct pins on the Google Maps.

Here is one location in the array in indicate the name : value pairs.

Code:

{
      "facility_id": 22439,
      "asset_type": "Multifamily Rental",
      "closed": "2015",
      "name": "3475 Third Avenue",
      "role": "Permanent Loan",
      "address": "3475 Third Avenue",
      "longitude": "-73.906451",
      "latitude": "40.830208",
      "borough_county": "Bronx",
      "region": "Metro NY",
      "city": "Bronx",
      "state": "NY",
      "zip": "10475",
      "const_type": "New Construction",
      "tax_credit": "4%",
      "units": "102",
      "banker": "William Yates",
      "banker_phone": "",
      "banker_email": "",
      "ext_link": "",
      "ext_link_text": "",
      "img": 1
  }

Also here is my js file

Code:

var CCCMap = new function CCMap() {   //nice type identifier in debugger
  //"use strict";

  var city = null;
  var zip = null;
  var state = null;

  var resultListing = null; /* listing in left nav */
  var listings = null;
  var statDisplayResult = null;

  var _sites = null;
  var _assetColors = { "Senior Housing" : "aqua",
    "Multifamily Rental" : "fuschia",
    "Education" : "citi-blue",
    "Market Rate" : "cyan",
    "Healthcare" : "forest",
    "Small Business" : "burnt-orange",
    "Private Equity" : "goldenrod",
    "Conventional Rental" : "lime",  
    "Other" : "lime"};  //other??

  var _currentLocations = [];
  var _thisMap = this;
  
  var isCheckedOption = function (sel, opt) {
    var cType = false;
    var ct = [];
    $(sel).each(function(){
      ct.push($(this).val());
    });

    for(var i = 0; i < ct.length; ++i) {
      cType = (opt == ct[i]) || cType;
      } 
    return cType;
  };

  var containsCheckedOption = function (sel, opt) {
    var cType = false;
    var ct = [];
    $(sel).each(function(){
      ct.push($(this).val());
    });

    for(var i = 0; i < ct.length; ++i) {
        cType = (opt.indexOf(ct[i]) != -1) || cType;
    } 
    return cType;
  };


  var mapFilter = function (e) {
    //e.preventDefault();

    var allEmpty = $("input[name='asset_type']:checked").length == 0
      && $("input[name='citi_role']:checked").length == 0 
      && $("input[name='construction_type']:checked").length == 0
      && $("input[name='closing_date']:checked").length == 0
      && city.val() == ""
      && state.val() == ""
      && zip.val() == "";
    
    if(allEmpty == true) {
      displayLocations([]);
      return;
    }


    _currentLocations = jQuery.grep(CCCMap.sites(), function(element, index){
      var assetType = isCheckedOption("input[name='asset_type']:checked", element.asset_type);
      var citiRole = isCheckedOption("input[name='citi_role']:checked", element.role);
      var constructionType = isCheckedOption("input[name='construction_type']:checked", element.const_type);
      var closeDate = containsCheckedOption("input[name='closing_date']:checked", element.closed);

      var isCity = !!(city.val() != "" && element.city.toLowerCase().indexOf(city.val().toLowerCase()) != -1);
      var isZip = !!(zip.val() != "" && element.zip == zip.val());
      var isState = !!(state.val() != "" && element.state == state.val());
      console.log('city is ' + isCity);
      console.log('zip is ' + isZip);
      console.log('state is ' + isState);

      if($("input[name='exact_match_cb']:checked").length == 1) {
        assetType = $("input[name='asset_type']:checked").length == 0 ? true : assetType;
        citiRole = $("input[name='citi_role']:checked").length == 0 ? true : citiRole;
        constructionType = $("input[name='construction_type']:checked").length == 0 ? true : constructionType;
        closeDate = $("input[name='closing_date']:checked").length == 0 ? true : closeDate;

        isCity = $("input[name='city']").val() == "" ? true : isCity;
        isZip = $("input[name='zip']").val() == "" ? true : isZip;
        isState = state.val() == "" ?  true : isState;
        

        return assetType && citiRole && constructionType && closeDate && isCity && isZip && isState;
      } else { 
        return assetType || citiRole || constructionType || closeDate || isCity || isZip || isState;
      }
    });

    displayLocations(_currentLocations);

  };

  function displayMarkerInfo(map, marker) {
    /*
    *  Displays the popup window with the real estate information centered horizontal and
    *  vertical bottom so that the user can see the image
    */

    CCCMap.infowindow.setContent(marker.contentString);
    CCCMap.infowindow.open(map, marker);

    map.setCenter(marker.getPosition());
    var mapCLng = marker.getPosition().lng();
    var mapBounds = map.getBounds();
    var mapCLat = (mapBounds.getSouthWest().lat() + 30);
    map.setCenter({lat: mapCLat, lng: mapCLng});
  }

  var displayLocations = function (locations) {
    var mapOptions = {
      center: new google.maps.LatLng(39, -97),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    CCCMap.LOC_LISTINGS = "";
    resultListing.off("click");
    listings.empty();
    statDisplayResult.text("");

    var markers = [];

    var i = 0;
    for (i = 0; i < locations.length; i++) {
      var c_location = new google.maps.LatLng(locations[i].latitude, locations[i].longitude);
      var iconpath = (CCCMap.ICON_PATH + locations[i].color + ".png");
      var loc_marker = new google.maps.Marker({
        position: c_location,
        map: map,
        title : locations[i].name,
        icon: iconpath
      });

      markers.push({fid:locations[i].facility_id, lm : loc_marker});

      var imgData = locations[i].img !== undefined && locations[i].img > 0 ? "<p><img class=\"loc-img\" src='" + CCCMap.THUMB_PATH + locations[i].facility_id + ".jpg' /></p>" : "";
      var locCity = locations[i].city !== "" ? locations[i].city + ", " : "";
      var locState = locations[i].state || "";
      var locUnits = locations[i].units != "" ? " (" + locations[i].units + " Units)" : "";
      var csu = locCity + locState + locUnits !== "" ? "<p class=\"note-container\"><span class=\"note\">" + locCity + locState + locUnits  + "<br/></span></p>" : "";
      var vcard = "";  //"<a href='/icg/sa/citicommunitycapital/docs/vcards/" + locations[i].banker_vcard + "'> vCard</a>";
      var banker = locations[i].banker != "" ? "<p class=\"link\"><strong>Contact: </strong>" + locations[i].banker + "<a href=\"mailto:" + locations[i].banker_email + "\">email</a> " + vcard + "</p>" : "";
      var extLinkText = locations[i].ext_link_text != "" ? locations[i].ext_link_text : "More Information";
      var extLink = locations[i].ext_link != "" ? "<p class=\"link l-ext\"><a target=\"_blank\" href='" + locations[i].ext_link + "'>" + extLinkText + "</a></p>" : "";

      loc_marker.contentString = "<div class='infWin'><strong class=\"title\">" + locations[i].name + "</strong>" + csu  + banker + extLink +"</div>" + imgData;

      // check for click on marker and display content in infowindow
      google.maps.event.addListener(loc_marker, 'click', function() {
        displayMarkerInfo(map, this);
      });

      var listing = "<li class=\"listing\" rel=\"" + locations[i].facility_id + "\">" + locations[i].name + "</li>";

      CCCMap.LOC_LISTINGS = CCCMap.LOC_LISTINGS + listing;
      listings.append(listing);
    }

    if(locations.length != 0) {
      statDisplayResult.text("Found "
      + locations.length
      + " location" + (locations.length > 1 ? "s" : "" ) + ":");
      $("#stat-display-container").show();

      $(".nano").nanoScroller();
    } else {
      statDisplayResult.text("Select recent deals using the Transactions Menu.");
      $("#stat-display-container").hide();
    }

    resultListing = $(".listing");

    resultListing.click(function(){
      var listingId = $(this).attr("rel");
      for(var i = 0; i < markers.length; ++i){
        if(markers[i].fid == listingId){
          var lm = markers[i].lm;
          displayMarkerInfo(map, lm);
          return;
        }
      }
    });


    google.maps.visualRefresh = true;
  }; /* end displayLocations */


  /* public*/

  _thisMap.ICON_PATH = "https://www.citibank.com/icg/sa/citicommunitycapital/site/img/3d-pin-";
  _thisMap.THUMB_PATH = "https://www.citibank.com/icg/sa/citicommunitycapital/site/img/location_thumbs/";
  _thisMap.LOC_LISTINGS = "";

  _thisMap.infowindow = new google.maps.InfoWindow({
    content : "",
    maxWidth: 400});

  /*set the image properly in the info window */
  google.maps.event.addListener(_thisMap.infowindow, 'domready', function() {
    var locImg = $(".loc-img");
    //locImg.parent().parent().parent().addClass("fix-window");
    locImg.css("max-width", "350px");
  });

  _thisMap.assetColors = _assetColors;

  _thisMap.initMap = function(jsonObj) {
    city = $("input[name='city']");
    zip = $("input[name='zip']");
    state = $("#state");

    resultListing = $(".listing"); /* listing in left nav */

    listings = $(".listings");
    statDisplayResult = $("#stat-display-result");


    _sites = jsonObj;
    for (var i = 0; i < _sites.length; i++) {
      _sites[i].color = _assetColors[_sites[i].asset_type];
    }


    // reset map after Advance Setting toggle is clicked
    $("input.go").click(mapFilter);


    // Reset input fields after Find btn is clicked...also hides overlay
    $("#findBtn").click(function(e){
      var filterToggle = $(".filter_toggle");
      var filterLabel = $(".filter_label");
      mapFilter(e);
      city.val("");
      zip.val("");
      //state.val("");
      filterToggle.hide();
      filterLabel.removeClass("on");
    });



    document.getElementById("search-panel").reset();


    //CHECK IF "Show all Locations" is set 
    var showAllLoc = $("#toggle-loc1").hasClass( "selected" );
    if(showAllLoc == true) {
      displayLocations(CCMAP_LOCATIONS); 
      return;
    }

    //OTHERWISE SHOW NOTHING 

    displayLocations([]);


  };

  /* getLocations is unused for now. Its cheaper to just load the jsondata up front.*/
  _thisMap.getLocations = function () {
    var callback = function(jsonObj) {
      _thisMap.initMap(jsonObj);
    };

    $.post("js/locations.js", null, callback, "json" );
  };

  _thisMap.currentLocations = function() {
    return _currentLocations;
  };
  
  _thisMap.sites = function() {
    return _sites;
  };  


  _thisMap.updateMapDisplay = mapFilter;
  
}; //CCMap




// ********* DOCUMENT.READY **************

$(document).ready(function() {

  var locationSearch = $("#location-search");
  var filterSet = $(".filter_set");
  var filterToggle = $(".filter_toggle");
  var filterLabel = $(".filter_label");
  var fakeSelect = $(".fake_select");
  var searchSection2 = $(".search-section2");
  var filterToggle2 = $(".filter_toggle2");
  var inputSelected = $(".filter_set input");
  var advSetting = $("#adv-setting");


  /* LOAD locations.js (CCMAP_LOCATIONS)!!! ICMS rejects JSON files... (duh) */
  CCCMap.initMap(CCMAP_LOCATIONS);



  var toggleLoc1 = $("#toggle-loc1");
  var toggleLoc2 = $("#toggle-loc2");
  var advToggle = $("#adv-toggle");

  toggleLoc1.click(function(){
    $("#toggle-loc2").removeClass( "selected" );
    $("#toggle-loc1").addClass( "selected" );
    CCCMap.initMap(CCMAP_LOCATIONS); 
    $(".trans-opts").hide();
    $("#adv-setting").hide();
      filterLabel.removeClass("on");
  });

  toggleLoc2.click(function(){
    $("#toggle-loc1").removeClass( "selected" );
    $("#toggle-loc2").addClass( "selected" );
    CCCMap.initMap(CCMAP_LOCATIONS); 
    filterToggle.hide();
    $(".trans-opts").show();
    $("#adv-setting").show();
    filterLabel.removeClass("on");
  });

  advToggle.click(function(){
    $("#adv-option").toggle();
  });

  advSetting.mouseleave(function(){
     $("#adv-option").hide();
  });

  $("#adv-button").click(function(){
    // toggle button background
    var advTogg = $("#adv-option input");
    advTogg.toggle(function(){
      if($("#adv-option input:checked").length == 0){
        $('#adv-button').css('background-position','top left');
      } else {
        $('#adv-button').css('background-position','bottom left');
      }
    });
    // click hidden checkbox
    advTogg.click();
    advTogg.hide();
  });




  searchSection2.css("display","none")
    .css("visibility", "visible");



  filterLabel.click(function(){
    var ftoggle = $(this).siblings(".filter_toggle").css("display");
    if (ftoggle == "none") {
      filterToggle.hide();
      filterLabel.removeClass("on");
      $(this).siblings(".filter_toggle").show();
      $(this).addClass("on");
    }
    else {
      filterToggle.hide();
      $(this).removeClass("on");
    }
  });


  

  fakeSelect.click(function () {
    filterToggle2.show();
  });

  $(".fake_select li").click(function () {
    var thisId = $(this).attr('rel');
    var thisState = $(this).html();
    state.val(thisId);
    $("#fs1").find('a').text("State: " + thisState);
    CCCMap.updateMapDisplay();
    filterToggle2.hide();
  });


}); // END document.ready

Can someone let me know how I can get the filtering to work on the location text fields...city, zip or state?


Thanks in Advance!