Adding Point Graphic to ArcGIS API for JavaScript Map?

Question

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

Uncaught TypeError: Cannot read property 'add' of null

Here is the code 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 have to wait for the map to load before you can interact with it.

See http://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=graphics_add, or for an updated version of your sample: http://jsfiddle.net/ady51wrn/7/.