Mashing Up Google Maps, Pt. 2

We initially had an issue within Moocher between our Google Maps “View Event” applet and the Facebook Comment system because the applet needed to be placed within an iFrame in order for its JavaScript to work correctly, and FBJS was not robust enough for what we needed. A page could display Facebook Comments or an iFrame, but not both.

The workaround we have implemented bypassed our “Display Event” applet by providing the user with a direct http hyperlink to Google Maps that is automatically generated for each individual event with the related search parameters. The syntax for our http query is: http://maps.google.com/maps?q=(Event Location)+(Network Name)

The Google Maps http query is flexible and allows a geographic coordinate to be included and specific markers to be placed on the map. This will allow us to refine our query results in the next phase. We used the same concept to make our “Add to Google Calendar” link. Moocher pulls information from the Facebook and Moocher event pages and generates a link that instructs Google Calendar to create an event reminder with event info, time, location, mooch type, etc.

The syntax for this is: http://www.google.com/calendar/event?action=TEMPLATE&text=(Event Name)&dates=(Date and Time in Google Format)&details=Mooch:(Type of Mooch)&location=(Name of location)&sprop=website:(Link to website of origin)

For more information about Google http parameters, please visit:

Google Map Parameters

Event Publisher Guide

Mashing Up Google Maps

To better support our users in finding free food, we are attempting to integrate Google Maps into the event view, which will let users find directions to events easily. Each Facebook network has its own map with a unique geographic point and zoom level. When a user is creating an event or importing an event to Moocher for a network, they will be prompted with the option to pinpoint the building/location of the event with a Google Map box that is automatically zoomed to their campus. Moocher stores the latitude and longitude of the mouse-click for reference.

When users are viewing an event with location data, the page will display a Google Map centered at the location of the event with a link to receive further directions from Google Maps. To enable the use of Google Maps within Facebook , we nested the scripts that Google Maps uses inside of an iFrame. Using PHP’s get() and set() methods, we are able to pass variables between our database, Google Maps applet, and the Moocher Application. The API is located at http://code.google.com/apis/maps/ and contains useful tutorials and code examples.