jfarmer@cityofstafford

Geocoder Widget- Error in the "Show Selected Result On Map" Section

Discussion created by jfarmer@cityofstafford on Dec 10, 2013
Latest reply on Dec 11, 2013 by jfarmer@cityofstafford
I have been using this tutorial to add some functionality to my Geocoder widget: [HTML]https://developers.arcgis.com/en/javascript/jstutorials/tutorial_geocoder.html#step7[/HTML]

I am able to do the autoComplete and placeholder without any issues but when I start to add the showLocation code, I am getting a blank screen when I go to load the page.

Here is the section giving me issues:
geocoder.on("select", showLocation;
    
    function showLocation(evt) (
     map.graphics.clear();
     var point = evt.result.feature.geometry;
     var symbol = new SimpleMarkerSymbol()
      .setStyle(SimpleMarkerSymbol.STYLE_SQUARE)
      .setColor(new Color([255,0,0,0.5])
     );
     var graphic = new Graphic(point, symbol);
     map.graphics.add(graphic);
     
     map.infoWindow.setTitle("Search Result");
     map.infoWindow.setContent(evt.result.name);
     map.infoWindow.show(evt.result.feature.geometry);


Here is the entire thing:
<!DOCTYPE html>
  <html>  
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>City of Stafford Plans Application</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">    
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
    <style> 
      html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; }, #search {display: block; position: absolute;}
   #HomeButton {position: absolute;}
    </style> 
    <script src="http://js.arcgis.com/3.7/"></script>
    <script> 
      var map, geocoder;
      require([
        "esri/map", "esri/dijit/Geocoder", "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "dojo/_base/Color", "dojo/query", "esri/dijit/Scalebar", "esri/dijit/OverviewMap", "esri/dijit/HomeButton", "esri/arcgis/utils",
        "dojo/parser", "dojo/ready",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane","dojo/dom",
        "dojo/domReady!"
      ], function(
        Map, Geocoder, Graphic, SimpleMarkerSymbol, Color, query, Scalebar, OverviewMap, HomeButton, arcgisUtils, dom,
        parser, ready
      ) {
  ready(function () {
   parser.parse();
   arcgisUtils.createMap("3c8f5130dea94b0797fc63a9f16fc58e", "map").then(function (response) {
     map = response.map;
    var geocoder = new Geocoder({
    autoComplete: true,
    arcgisGeocoder:{
     placeholder: "Find a Place"
    },
    map: map}, dom.byId("search"));
    geocoder.on("select", showLocation;
    
    function showLocation(evt) (
     map.graphics.clear();
     var point = evt.result.feature.geometry;
     var symbol = new SimpleMarkerSymbol()
      .setStyle(SimpleMarkerSymbol.STYLE_SQUARE)
      .setColor(new Color([255,0,0,0.5])
     );
     var graphic = new Graphic(point, symbol);
     map.graphics.add(graphic);
     
     map.infoWindow.setTitle("Search Result");
     map.infoWindow.setContent(evt.result.name);
     map.infoWindow.show(evt.result.feature.geometry);
     
    var scalebar = new Scalebar({
    map: map,
    attachTo: "bottom-left",
    scalebarUnit: "english",
    scalebarStyle: "ruler"
    });
    var overviewMapDijit = new OverviewMap({
    map: map,
    visible: true,
    color: "#00FF66",
    opacity:.40,
    expandFactor:1.5,
    attachTo: "top-right"
    });
    var home = new HomeButton({
    map: map}, "HomeButton");
    overviewMapDijit.startup();
    geocoder.startup();
    home.startup();
   });
  });
      });
    </script> 
  </head> 

  <body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" 
         data-dojo-props="design:'headline', gutters:false" 
         style="width:100%;height:100%;margin:0;">
      <div id="map" 
           data-dojo-type="dijit/layout/ContentPane" 
           data-dojo-props="region:'center'" 
           style="padding:0;">
        <div style="position:absolute; left:7%; top:10px; z-Index:2;">
            <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
  <div id="search">
  <div id="HomeButton">
    </div>
   </div>
          </div>
        </div>
      </div>
    </div>
  </body> 
  </html>

Outcomes