Google Maps with Angular

I am working on the first iteration of a new page to allow the user to check on the most recent bird sightings at John James Audubon Center at Mill Grove (near Valley Forge, PA).  To create this page I used one of Allen Kim’s ng-map directives with multiple infowindows.  I also created a custom google search engine which limits results to the field guide pages at National Audubon Society and to search terms appearing in urls and also returns only one item.

When a user clicks on a map marker the angular code retrieves the most recent bird sightings at JJAC recorded by Cornell University and available to the public at eBird API.   The json array that is returned is then evaluated for the common names of the birds and this information and a link to the organization’s website is displayed in a styled info window. The user can search on the common name of any of the birds on the list to find the field guide entry at the National Audubon Society website.  Cool!

Here is the first draft of my Angular Bird Map

To do:

  1. I want to have two markers, one for JJAC and one for the impoundments at John Heinz NWR in Tinicum.  Each marker would be populated with recent sightings at that birding hotspot.  While I can get the two markers to display and info windows to open, it appears that my current code is returning the recent sightings at both hotspots (both infowindows have the same long list of birds).  I need to separate the two lists.
  2. I would like the user to merely click on a bird of interest and have that term populate the search box.