ESRI Javascript API - Adding a Graphic

It's easy to add Graphic on the Map using ESRI's Javascript API.

This function calls to add graphic.

addGraphic(map, getPoint(lngsign, photoLng, latsign, photoLat), photoFileName, photoThumbNail, photoTitle, photoDesc);

This function gets the Point Geometry based on Lat and Long.

function getPoint(lngsign, x, latsign, y) {
    var togoPoint = esri.geometry.geographicToWebMercator(new esri.geometry.Point(lngsign * x, latsign * y, new esri.SpatialReference({ wkid: 4326 })));
    return togoPoint;
}

This function adds the Graphic to the Map Control.
function addGraphic(map, geometry, fileName, thumbnailName, title, description)
{
    var symbol = null;
    var pointSymbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1), new dojo.Color([0, 0, 255, 0.9]));
    var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 1);
    var polySymbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.5]));
    var type = geometry.type;
    if (type === "point" || type === "multipoint") {
        symbol = pointSymbol;
    }
    else if (type === "line" || type === "polyline") {
        symbol = lineSymbol;
    }
    else {
        symbol = polySymbol;
    }
    var newGraphic = new esri.Graphic(geometry, symbol);
    var infoTemplate = new esri.InfoTemplate(); infoTemplate.setTitle(title);
    var imageContent = GetImageContent(fileName, thumbnailName, description);
    infoTemplate.setContent(imageContent);
    newGraphic.setInfoTemplate(infoTemplate);
    map.graphics.add(newGraphic);
   
}

Make sure that all these calls are done after the Map control is initialized.
This is the init() function. As you can notice the "onUpdateEnd" function ensures that the map is updated. All other javascript functions can be called after this event has fired.

function init()
{
    adjustWindowDimensions();
    map = new esri.Map("divMap");
    var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer");
    map.addLayer(tiledMapServiceLayer);
    var startExtent = new esri.geometry.Extent(-24440281.172008913, -342437.886717527, 2289441.8711969512, 10419895.695832416);
    map.setExtent(startExtent);
    dojo.connect(map, "onMouseMove", showCoordinates);
    dojo.connect(map, "onMouseDrag", showCoordinates);
    dojo.connect(window, 'resize', map, map.resize);
    dojo.connect(map, "onUpdateEnd", hideStatus);
    dojo.connect(map, "onUpdateStart", showStatus);
    dojo.connect(map, "onExtentChange", mapExtentModified);
} Happy Coding !

Cheers
Anand