Sunday, May 08, 2011

Google Maps - Bird Sightings, adding markers

So now that we have a bird object, a sightings objects and a flex google map pulling in the data from each, let's plot these on the map. This part is easy and rewarding. Here's a primer on Google Maps API for Flash overlays. First, go into your mxml file and import the packages you'll need to work with the Marker overlays

import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.styles.*;

Then remove your Alert that showed the length of the Sightings array and replace it with a for loop that adds markers. For now, assume the same marker options. We'll replace that with custom icons when we're sure adding the markers works.



As the call for the data happens async and we may not have the map ready yet, move the marker instantiation down into the map ready event. we'll modify this later to not query for the sighting data until after the map is ready

recompiling the swf and throwing it into the static resource yields:



In the next post, we'll resize the viewport and center based on the sightings found. we'll also add default navigation controls to the google map so we don't end up in a cul-de-sac

No comments: