AGM-Map InvalidValueError & Uncaught TypeError

Question

I am currently building a project using Angular Google Maps where I am taking details from an API and displaying onto the map. The webservice object is of the form, which is stored as “selectedLoc”:

{"LOCATIONID":"OFF","LOCATIONNAME":"MAIN OFFICE","BRANCH_TYPE":"SHOWROOM","LATITUDE":"6.2267","LONGITUDE":"5.5823","AREANAME”:”CITY","ROAD_NBR”:"100","BLOCK_NBR":"200","INSURANCE_POLICY_NBR":"123456","INSURANCE_EXPIRY_DATE":"2022-12-12T00:00:00.000Z","INSURED_AMOUNT":4500000,"REMARKS":"DEMO UNITS","CONTACT_PERSON”:"JOHN","CONTACT_NUMBER”:"12345678","NATURE_OF_STOCK":"STOCK","FIXTURE_AND_FITTINGS":"300000"}

I am trying to display it onto a map, the code in my component.ts file is:

    latitude = this.selectedLoc.LATITUDE;
    longitude = this.selectedLoc.LONGITUDE;
    mapType = 'satellite';
    zoom = 12;

And the code in my component.html file is:

<agm-map [latitude]='latitude' [longitude]='longitude' [mapTypeId]='mapType' [zoom]='zoom’>
  <agm-marker [latitude]='selectedLoc.LATITUDE' [longitude]='selectedLoc.LONGITUDE' [label]='selectedLoc.LOCATIONID'></agm-marker>
</agm-map>

I am unable to see the map, instead get a black screen and an error in the console saying:

InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number

And when I try to zoom in or out of the map, I get another error saying:

Uncaught TypeError: Cannot read property 'zoom' of null

I’m not sure where I am going wrong.

Answer 1

Try this

latitude: number = parseFloat(this.selectedLoc.LATITUDE);
longitude: number = parseFloat(this.selectedLoc.LONGITUDE);

and

<agm-map [latitude]='latitude' [longitude]='longitude' [mapTypeId]='mapType' [zoom]='zoom’>
  <agm-marker [latitude]='latitude' [longitude]='longitude' [label]='selectedLoc.LOCATIONID'></agm-marker>
</agm-map>