3

I'm working on a dynamic mapping system wherein users input an address and can then have a google map displayed relating to accounts within a radius of that address. I've got it so my list of accounts are generating as intended based on the input, but I think I've overlooked something in the component setup because, while I'm getting the output list under the map itself, the pins aren't appearing on the map. If someone could take a look and point out what I'm missing or where I can fix it I'd appreciate it.

This is my current output: enter image description here

My server-side method:

@AuraEnabled 
public static List<Location> getNearByAccounts(String city, String state, String zipCode, string location){
    List<Location> result = new List<Location>();
    Integer maxDistance = 100;
    system.debug('city: ' + city);
    system.debug('state: ' + state);
    system.debug('zipCode: ' + zipCode);
    system.debug('location: ' + location);

    string latitude = '';
    string longitude = '';

    latitude = location.substringBefore(',').trim();
    longitude = location.substringAfter(',').trim();

    system.debug('latitude: ' + latitude);
    system.debug('longitude: ' + longitude);

    try{
        String strQueryString;
        string status = 'Active';
        strQueryString = 'SELECT Name, Central_Intake_Email__c, Facility_Number__c, ShippingStreet, Shipping_Geolocation__Latitude__s, Shipping_Geolocation__Longitude__s, ShippingCity, ShippingState, ShippingCountry, Type, Phone, ShippingPostalCode FROM Account WHERE RecordTypeId = : accountCenter AND Type != null AND Status__c=: status';

        if(city != '' || zipCode != '' ){
            strQueryString += ' AND DISTANCE(Shipping_Geolocation__c, GEOLOCATION(' + latitude + ',' + longitude + '), \'mi\') < '+ maxDistance+
                                ' ORDER BY DISTANCE(Shipping_Geolocation__c, GEOLOCATION(' + latitude + ',' + longitude + '), \'mi\') limit 250';
            }
        else if(state != ''){     
            strQueryString +=' AND ShippingState = : state ORDER BY DISTANCE(Shipping_Geolocation__c, GEOLOCATION(' + latitude + ',' + longitude + '), \'mi\') ASC limit 250';
            }
        system.debug('query: ' + strQueryString);
        List<Account> accounts = new List<Account>();
        accounts = Database.query(strQueryString);
        system.debug('Accounts: ' + accounts);
         for(Account acc :accounts){
            GeoLocation geoInfo = new GeoLocation();
            geoInfo.street = acc.ShippingStreet;
            geoInfo.postalCode = acc.ShippingPostalCode;
            geoInfo.city = acc.ShippingCity;
            geoInfo.state = acc.ShippingState;
            geoInfo.country = 'USA';
            geoInfo.latitude = acc.Shipping_Geolocation__Latitude__s;
            geoInfo.longitude = acc.Shipping_Geolocation__Longitude__s;
            Location locDetail = new Location();
            locDetail.icon = 'standard:account'; 
            locDetail.title = acc.Name;
            locDetail.description = acc.Name;
            locDetail.location = geoInfo;
            result.add(locDetail);
                }
        system.debug('mapPips: ' + result);
        return result;
        }
    catch(Exception e){
        system.debug('Error: ' + e.getMessage() + ' Line: ' + e.getLineNumber());
        return null;
        }   
    }    

public class Location{
    @AuraEnabled 
    public String icon{get;set;} 
    @AuraEnabled 
    public String title{get;set;} 
    @AuraEnabled
    public String description{get;set;} 
    @AuraEnabled 
    public GeoLocation location{get;set;} 
    }

public class GeoLocation{
    @AuraEnabled 
    public String street{get;set;}
    @AuraEnabled 
    public String postalCode{get;set;}
    @AuraEnabled 
    public String city{get;set;}
    @AuraEnabled 
    public String state{get;set;}
    @AuraEnabled 
    public String country{get;set;}
    @AuraEnabled 
    public decimal latitude{get;set;}
    @AuraEnabled 
    public decimal longitude{get;set;}
    }

Helper method:

searchNearAccounts : function(component, event, helper){
    var streetAddr;
    var cityAddr;
    var stateAddr;
    var zipAddr;
    var geolocation;

    var initialProcess = component.get("v.callingObject", "v.value");
    console.log("callingObject for Markers: " + initialProcess);
    if(initialProcess === 'contact'){
        streetAddr = component.find("conStreet").get("v.value");
        cityAddr = component.find("conCity").get("v.value");
        stateAddr = component.find("conState").get("v.value");
        zipAddr = component.find("conZip").get("v.value");
        geolocation = component.get("v.contactGeo", "v.value");
        }
    else if(initialProcess === 'patient'){
        streetAddr = component.find("ptStreet").get("v.value");
        cityAddr = component.find("ptCity").get("v.value");
        stateAddr = component.find("ptState").get("v.value");
        zipAddr = component.find("ptZip").get("v.value");
        geolocation = component.get("v.patientGeo", "v.value");
        }
    else{
        console.log('Other uh-oh');    
        }

    console.log('streetAddr: ' + streetAddr);
    console.log('cityAddr: ' + cityAddr);
    console.log('stateAddr: ' + stateAddr);
    console.log('zipAddr: ' + zipAddr);
    console.log('geolocation: ' + geolocation);
    if(geolocation !== undefined){
    var action = component.get("c.getNearByAccounts");
    return new Promise(function(resolve, reject){
        action.setParams({
                        "city" : cityAddr,
                        "state" : stateAddr,
                        "zipCode" : zipAddr,
                        "location" : geolocation
                        });
        action.setCallback(this, function(a){
        var response = a.getReturnValue();
        var state = a.getState();
        console.log('Populate Account Markers',state);
        if(component.isValid() && state !== "SUCCESS"){
            console.log("Error in fetching Account Markers.");
            return;
            }
        else{
            var repList = response;

            var mapComponent = component.find('mapComponent');
            if(mapComponent){
                mapComponent.destroy();
                }
            var mapContainer = component.find('mapContainer');
            var mapBody = mapContainer.get("v.body");

            var center = {
                location:
                    {
                    City: cityAddr,
                    Country: 'USA',
                    PostalCode: zipAddr,
                    State: stateAddr,
                    Street: streetAddr
                    }
                };

            $A.createComponent(
                "lightning:map",
                {
                    "aura:id" : 'mapComponent',
                    "mapMarkers" : repList,
                    "zoomLevel" : 13,
                    "center" : center
                },
                function(lightningMap){
                    mapBody.push(lightningMap);
                    mapContainer.set("v.body", mapBody);
                }
            );

            //component.set("v.mapMarkers", markerList);
            resolve("Resolved");
            }
        });
        $A.enqueueAction(action);
        });
        }
    },

Component div:

<div class="slds-col" id="mapCol">
            <div aura:id="mapContainer">
            <!--Placeholder Reference, Map Generated in Helper and inserted 
            here-->
            <!--<lightning:map aura:id="mapComponent"
                           mapMarkers="{!v.markers}"
                           markersTitle="Kindred Facilities"/>-->
                </div>
        </div>
0
5

Your issue is on the lines in the GeoLocation class where you have declared the geo location variables (Javascript case sensitivity issue!).

@AuraEnabled 
public decimal latitude{get;set;}
@AuraEnabled 
public decimal longitude{get;set;}

If you refer to the lightning:map documentation, the location's attributes are as below (notice the UPPERCASE L in the fields).

location: {
    'Latitude': '37.790197',
    'Longitude': '-122.396879'
}

Because the values returned from the GeoLocation class is de-serialized as LOWERCASE variable names, thus it's not rendering the markers.

Declaring the variables as below will fix your issue (if you want to use other variables from this class, then you need to capitalize those as well)

@AuraEnabled 
public decimal Latitude{get;set;} // starts with UPPERCASE L
@AuraEnabled 
public decimal Longitude{get;set;} // starts with UPPERCASE L
2
  • Yes, that was the cause of the issue. Thanks, I was staring at it so long I just glossed over the inconsistencies in case. – CMielczarski Dec 19 '18 at 12:57
  • JS being case sensitive and Apex on the other hand being case insensitive, it's very easy to miss :) – Jayant Das Dec 19 '18 at 13:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.