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

[BruceGreen]

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 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);


        }


    });

 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>

  [1]: http://jsfiddle.net/Behseini/ady51wrn/

[RobertScheitlin__GISP · Accepted solution]

Behrouz,

  The map was not ready yet. Here is the fix to use on map load:

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/on",
    "dojo/domReady!"
], function (
        Map,
        Geometry,
        Point,
        Polyline,
        Polygon,
        Graphic,
        SimpleMarkerSymbol,
        SimpleLineSymbol,
        SimpleFillSymbol,
        Color,
        InfoTemplate,
        on) {
    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, pointInfoTemplate);
    graphicsArray.push(pointGraphic);
    map.on("load", function(){
        for (i = 0; i < graphicsArray.length; ++i) {
            map.graphics.add(pointGraphic);//graphicsArray);
        }
    });
});

[BruceGreen]

Thanks a lot Robert