Google Maps, DataTables, and FaceBook Places API

20:31:00 2D map , Facebook map , Google Maps 0 Comments

As more APIs allow CORS, we can create some really cool integrations without any server side code. Google Maps API is an obvious one but I was surprised to see successful Ajax calls to the FaceBook Graph API which made me think about building and integrating these services. I was scraping FaceBook for Places, or geo locations, so it only makes sense to start with a world map where you can search, click, or drag markers to retrieve any latitude and longitude coordinates for your geo search.
Next, these geo coords are sent to my facebook function that initiates a graph search for places near the provided geo location. The response drops markers on the Google Map, similar to Google’s own Places API and examples. But, I also wanted to visualize this dataset in more details and used the jQuery DataTables plugin to make the API data available for easy viewing, searching, and filtering. You can get more data for a specific place by clicking on an id, which initiates another place API call and drops the JSON response in a modal window with code highlighting.
Google and Facebook for Geo Places on a Map and Table

There is a lot of ways I plan on extending this in the future but the demo above covers some good concepts:

• Google Maps to grab Geo Coords with Search and HTML5 GeoLocation
• Adding and Removing Google Map Markers
• Google Map Markers with custom icons and popups
• Bind Google Map to Map Markers
• Using DataTables with Ajax source directly to API with CORS (FaceBook)
• DataTables with custom rendered cells and custom Ajax Callback
• Adding more data to DataTables and reloading DataTables
• Syntax Highlighting JSON in a SimpleModal

Here are the details:
I started this by looking at a simple Google Maps geolocation example. The code is easy to understand and it makes a lot of sense to ask for user’s permission and retrieve coordinates via HTML5 geolocation. I have previously covered Google’s geolocation services for the purpose of auto-filling address forms but here we want to give a user an easy way to locate any place on the map. Similar to my modestmaps geolocation example, I want to let someone pan, zoom, and interact (click or drag markers) with the map to quickly retrieve and copy geo coordinates. Take a look how that works:
Get Geo Location on Google Map
Now, we have a great starting point to retrieve data from other APIs based on user selected geographical locations. I am going to use the FaceBook Graph API to search for Places where type is “Restaurants”. Since I am going to be using DataTables with Ajax, I just pass the geo coords to DataTables where I build the url for the Facebook API call using geo data from Google Maps and other params like the Facebook access_token for authentication. I define the columns, data structure, and rendering options so that ID can look like a link with a class I can use to bind an event.
I hook into the DataTables Ajax callback function (via xhr.dt) to count the amount of places returned and provide a way to load more data into the table by following pagination links. Facebook responds with 5000 places which is generally good enough for Restaurants in a 1000 meter radius of a geo location, but if there is more data, I show an “add” button and it adds more data into DataTables via fnAddData function.
This is also where I place markers on the Google Map for the places coming back from FaceBook. I setup an array of markers first and remove any previously created markers from the map. Then, I pull the geo coords and setup markers using a restaurant icon, and bind a infowindow with the place title to create marker popups. The final piece is to extend bounds to all markers placed on the map and then, reposition map to fit bounds.
Next, I leverage jQuery on() method to attach click event handlers to those ID links that get rendered inside the table. If you click on an ID, my handler makes an Ajax request to Facebook Graph API for Place Details and pops up a modal window using SimpleModal to show the response. You could use something like TempoJS to visualize the data better but I just JSON.stringify with line breaks and use highlight.js to make the data more readable.