[GIS] Adding Point Graphic to ArcGIS API for JavaScript Map

arcgis-javascript-api

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>

Best Answer

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/.

Related Question