topic Re: How to add address search bar to a map template? in ArcGIS JavaScript Maps SDK Questions

How to add address search bar to a map template?

N_Young — Tue, 10 Jan 2012 22:58:53 GMT

I am an inexperienced programmer. I have added my map and data to the chrome-identify template for Javascript (following the template process here in the "Getting Started" section). All is working well. The problem is that I need an address search bar on this template.

What is the most simple way to add an address search bar/address location tool to my template?

Only the "basic viewer" template includes an address search bar. I don't want to use this template because I want the identify sidebar that is already set up in the other template.

Frankly, this sample code (go to Address Matching - Find an Address on the left sidebar) looks too hard for me to try to add to my template. Please let me know if there are any easier options.

Thanks!

Re: How to add address search bar to a map template?

AndyGup — Thu, 26 Jan 2012 23:48:36 GMT

@Natalie, you are on the right track. The Address Matching sample that you referenced is what needs to be coded into your existing application. If you wish to give it a try I have several suggestions. You're really close and it's not too many steps:

1) Copy the following HTML tags into your template's index.html file and place this beneath the <div id="description"></div>:

<div><textarea type="text" id="address"/>380 New York St, Redlands</textArea> <br /> <button dojotype="dijit.form.Button" onclick="locate()"> Locate</button></div>

2) In layout.js do the following:
- copy and paste this at the top of the page:

dojo.require("esri.tasks.locator"); dojo.require("dijit.form.Button");

- copy and paste these two lines of code right inside the function initMap():

locator = new esri.tasks.Locator("http://tasks.arcgis.com/ArcGIS/rest/services/WorldLocator/GeocodeServer"); dojo.connect(locator, "onAddressToLocationsComplete", showResults);

- copy and paste all the sample code from function locate(){...} and function showResults(candidates){...} and place it right below function addScalebar() in layout.js. So locate() and showResults() will become new functions in the layout.js file.

If all goes well, that should do it. Test the app in a web browser. Note that you have to host these files that you downloaded from ArcGIS.com on your own web server. I hope that helps,

-Andy
Esri Developer Network Team

Re: How to add address search bar to a map template?

N_Young — Fri, 27 Jan 2012 16:52:34 GMT

Thank you! I actually did get it figured out but this post will be very helpful to others who want to do this. Thanks for clearly explaining which parts of the sample code go in which files of the template!