cthcarr

Adding Search Widget Not Working

Discussion created by cthcarr on Apr 30, 2014
Hi, I'm admittedly the newbie to the js API that has held off asking questions but I'd really like to make some headway.  Right now I have some code where I'm trying to add the search widget and I can't for the life of me figure out why it's not working.  Any help would be greatly appreciated.

<!DOCTYPE html>
<html>

<head>
    <title>Web Map</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">

    <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
        html,
        body,
        #mapDiv,
        .map.container {
            padding: 0;
            margin: 0;
            height: 500px;
            width: 500px;
        }
        #search {
            display: block;
            position: absolute;
            z-index: 3;
            top: 20px;
            left: 75px;
        }
    </style>

    <script>
        var dojoConfig = {
            parseOnLoad: true
        };
    </script>
    <script src="http://js.arcgis.com/3.9compact/"></script>
    <script>
        var map,
            webmapId = "d63574b7cc054964beb705ef40217d25";

        require([
            "esri/map",
            "esri/dijit/Geocoder",

            "esri/graphic",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/geometry/screenUtils",

            "dojo/dom",
            "dojo/dom-construct",
            "dojo/query",
            "dojo/_base/Color",

            "dojo/domReady!"

        ], function (Map, Geocoder, Graphic, SimpleMarkerSymbol, screenUtils, dom, domConstruct, query, color ) {
            arcgisUtils.createMap(webmapId, "mapDiv").then(function (response) {
                map = response.map

                var geocoder = new Geocoder({
                    map: map,
                }, dom.byId("search"));
                geocoder.startup();
            });
        });
    </script>

</head>

<body>
    <div id="mapDiv"></div>
    <div id="search"></div>
</body>

</html>

Outcomes