Try It Out: Add the Map to Our Visualforce Page

The interactive map functionality that is essential to our Candidate Map feature can be achieved with a blend of Visualforce markup and JavaScript that accesses the Yahoo! Maps Web Services. As promised, you don't have to learn JavaScript to get the Candidate Map working. Instead, we'll use the sample code in the RecruitingApp-7_0.zip file you downloaded from Developer Force in Expanding the Simple App Using Relationships.

1. In the RecruitingApp-7_0.zip file, locate the file CandidateMapSample and open it in your favorite text editor.

   Make sure that Word Wrap or any feature that might add line breaks to the code is turned off in your text editor. You must preserve the original line breaks in the code sample. New line breaks caused by word wrapping features in text editors can break the code and prevent the code sample from working correctly.

   Also, be aware that copying code from Adobe PDF files can also cause code to break, so avoid copying code from PDF versions of this book.

   Important

2. Select the entire content of the file, and copy and paste it into the page editor at the bottom of your CandidateMap Visualforce page. The CandidateMapSample file contains the Visualforce markup you added in the steps above, so just replace everything in the page editor with the entire sample in the file.
3. Click the save icon () on the page editor.

The interactive map should appear on your CandidateMap Visualforce page, but with an error message and without plots. This is because the Candidate Map is still out of context and the page can't figure out which candidates to show. We can fix this by simply adding the CandidateMap Visualforce page to our position page layouts.