Using The Yahoo! Maps ActionScript 3 API To Create A Map With Local Places - A Beginner's Tutorial
I was excited to learn that Yahoo! released an ActionScript 3.0 API for their maps service. I've just started to play with the API, but it looks relatively easy to use. I do wish there was a bit more developer's documentation. Since even after studying the examples provided by Yahoo!, I was confused on how to create a map and display places on the map (especially the results of doing a search on Yahoo! Local), I thought a beginner's guide might be useful for others.
I've created a simple Flex application demonstrating how to create a map, place a SimpleMarker object on the map, and display the results of doing a search of the Yahoo! Local listings. You can view the application and get its source code (right click on the application) here. I tried to include some good comments in the source code to help you follow what I did. Here are the key steps:
Be sure to follow the directions at http://developer.yahoo.com/flash/maps/index.html on how to add to your project's library the Yahoo! maps component SWC. You'll know you've done that correctly if you can type inside the mx:Script tag "import com." and auto complete lists yahoo as one the choices. On the same page as these instructions is a link to get a Yahoo! developer API key. When you create a Yahoo! map in your Flex application you'll have to supply your API key.
After you have created a YahooMap object, you can manipulate that object using all the methods listed here. In my example, I created an Address object and then called the Address class's geocode method to get the latitude and longitude for my Address object. Then I centered the map on that latitude and longitude.
I then created a SimpleMarker object and assigned its latlon (latitude-longitude) property to the latlon returned by calling the geocode method on the Address object. I then used the YahooMap class's markerManager property to add this marker to the map display.
To do a search of Yahoo! Local listings, I created a LocalSearch object and called its searchLocal method. I passed to this method the type of place I wanted to search for, my maps zoom level, and the latlon I wanted to search around.
If the search is successful, you get back a LocalSearchEvent object which contains an array of LocalSearchItem objects. I used each LocalSearchItem object to create a SearchMarker object. I then displayed the SearchMarker object on the map by again using the YahooMap class's markerManager property.
My next goal is to learn how to create my own Marker objects, with my own properties (for example a title) and place those on the map.
I seem to be getting an error with this line:
_yahooMap = new YahooMap(APP_ID, mapContainer.width, mapContainer.height);
I get the 1137:Incorrect number of arguments. Expected no more than 0.
What am I doing wrong?
_yahooMap = new YahooMap(APP_ID, mapContainer.width, mapContainer.height);
I get the 1137:Incorrect number of arguments. Expected no more than 0. please help? and when i remove the attributes in the brackets i get the following runtime error
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.yahoo.maps.api.controls::PanControl/::reset()
at com.yahoo.maps.api.controls::PanControl/set panEnabled()
at com.yahoo.maps.api::YahooMap/addPanControl()
at components::contacts/createMap()
at components::contacts/___Canvas1_creationComplete()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at mx.core::UIComponent/set initialized()
at mx.managers::LayoutManager/::doPhasedInstantiation()
at mx.managers::LayoutManager/validateNow()
at mx.effects::Tween$/::timerHandler()
at flash.utils::Timer/flash.utils:Timer::_timerDispatch()
at flash.utils::Timer/flash.utils:Timer::tick()
It will work.