The Meetup.com API is very easy to use and everybody received one API key when registering with the site. I decided to utilize the API by integrating it with Google Gears and Map APIs to come out a mashup for people can easy to find out what meetups happening in his(her) own town.
The very first time you run the mashup it will ask your authorization -
A PHP file is running at back-end to communicate with Meetup API and the main program - mymu.html, I need to modifiy the header of the json output from Meetup in order for Dojo to accept it as a dojox.data.jsonreststore datastore to feed the spreadsheet displayed on top.
<?php
$state = urlencode($_GET["state"]);
$city = urlencode($_GET["city"]);
if (isset($_GET["page"]))
$page = $_GET["page"];
else
$page = "50";
if (isset($_GET["topic"]))
$topic = $_GET["topic"];
else
$topic="";
if (! isset($_GET["type"]))
$type=0;
else
$type=$_GET["type"];
switch($type) {
case "0":
break;
case "1":
$curl = curl_init();
$req = "http://api.meetup.com/events.json/?country=us&state=" . $state . "&city=" . $city . "&key=YourMeetupApiKey";
if ($topic != "") {
$req .= "&topic=" . $topic;
}
if ($page != "") {
$req .= "&page=" . $page;
}
curl_setopt($curl, CURLOPT_URL, $req );
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($curl);
curl_close($curl);
$result=str_replace("\"results\":", "identifier:\"id\", items:", $result);
echo $result;
break;
}
?>
You can test the program by going to maps.auctions411.com and see the detail javaScript and HTML codes from there. Beside the "State" and "City" filters, a optional "Topic" field is also available for you the limit the results. A Dojo speradsheet on upper page will show all the future meetups coming to your city, and a Google Map on the lower page will display where they will be held. Click at the row of the spreadsheet or the Google map marker, a more detail window will pop-out.
function init() {
if (!window.google || !google.gears) {
alert('Gears is not installed, please get it at http://gears.google.com ');
return;
}
function successCallback(p) {
if (p.gearsAddress.country == "United States") {
dijit.byId('city').attr('value', p.gearsAddress.city);
dijit.byId('state').attr('name', p.gearsAddress.city);
}
init2();
}
function errorCallback(err) {
var msg = 'Error retrieving your location: ' + err.message;
alert(msg);
}
try {
var geolocation = google.gears.factory.create('beta.geolocation');
geolocation.getCurrentPosition(successCallback,
errorCallback,
{ enableHighAccuracy: true,
gearsRequestAddress: true });
} catch (e) {
alert('Error using Geolocation API: ' + e.message);
return;
}
}
function init2() {
gridView(); //create spreadsheet
loadMap(dijit.byId('city').value + ", " + dijit.byId('state').value); // load the city map
drawMap(store); // draw the markers
}
