Having Issue on Adding Point Graphic to The ArcGIS API for JS Map

Question

Can you please take a look at this JSFiddle and let me know why I am not able to add the Market into the Map? I am getting this error

Uncaught TypeError: Cannot read property 'add' of null

Here is the ode I have

var map;
var graphicsArray = [];
require(["esri/map",
    "esri/geometry/Geometry",
    "esri/geometry/Point",
    "esri/geometry/Polyline",
    "esri/geometry/Polygon",
    "esri/graphic",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/Color",
    "esri/InfoTemplate",
    "dojo/domReady!",
    "esri/geometry"], function (Map,

Geometry,
Point,
Polyline,
Polygon,
Graphic,
SimpleMarkerSymbol,
SimpleLineSymbol,
SimpleFillSymbol,
Color,
InfoTemplate) {
    map = new Map("map", {
        basemap: "topo",
        center: [-106.61, 35.1107],
        zoom: 13
    });
    
    var point = new Point(-106.61, 35.1107);
    var pointSymbol = new SimpleMarkerSymbol();
    var pointAttributes = { city: "Albuquerque", state: "New Mexico" };
    var pointInfoTemplate = new InfoTemplate("Albuquerque");
    var pointGraphic = new Graphic(point, pointSymbol, pointAttributes).setInfoTemplate(pointInfoTemplate);

    graphicsArray.push(pointGraphic);
    for (i = 0; i < graphicsArray.length; ++i) {
        map.graphics.add(graphicsArray[i]);

    }

});

      html, body, #map {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
      }
      body {
          background-color: #FFF;
          overflow: hidden;
          font-family:"Trebuchet MS";
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
<script src="http://js.arcgis.com/3.14/"></script>
<div id="map"></div>

Answer 1

You are trying to add this point when the map isn't fully loaded.

So just wait for the map to be fully loaded and then add the point, by wrapping your loop inside this function:

map.on('load', function() {
    console.log('load event called');
    for (i = 0; i < graphicsArray.length; ++i) {
        map.graphics.add(graphicsArray[i]);
    }
});

ESRI has a small documentation on how to work with events here