Meetups Coming To Town - A Mashup of Meetup, Google Gears, & Google Map APIs

Meetup.com is one of the social network site that facilitates offline group meetings in various locations around the world. I have been attending some of the groups' meetups since 2009 and found they were very helpful, most important of all - all the meetups I went to were FREE!

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.

To automatically find out the locations that users are in, the Google Gears API is used to retrieve Geolocation. Users will need to install Google Gears to use the feature, otherwise, they have to manually keyin the location information.

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.

view plaincopy to clipboardprint?

1. <?php  
2.   
3. $state = urlencode($_GET["state"]);  
4. $city = urlencode($_GET["city"]);  
5.   
6. if (isset($_GET["page"]))  
7. $page = $_GET["page"];  
8. else  
9. $page = "50";  
10.   
11. if (isset($_GET["topic"]))  
12. $topic = $_GET["topic"];  
13. else  
14. $topic="";  
15.   
16. if (! isset($_GET["type"]))  
17. $type=0;  
18. else  
19. $type=$_GET["type"];  
20.   
21. switch($type) {  
22.  case "0":  
23.   break;  
24.      
25.  case "1":  
26.   $curl = curl_init();  
27.   $req = "http://api.meetup.com/events.json/?country=us&state=" . $state .  "&city=" . $city . "&key=YourMeetupApiKey";  
28.   if ($topic != "") {  
29.   $req .= "&topic=" . $topic;  
30.   }  
31.   if ($page != "") {  
32.   $req .= "&page=" . $page;  
33.   }  
34.   curl_setopt($curl, CURLOPT_URL, $req );  
35.   curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);  
36.   $result = curl_exec($curl);  
37.   
38.   curl_close($curl);  
39.   $result=str_replace("\"results\":", "identifier:\"id\", items:", $result);  
40.   echo $result;  
41.   break;  
42. }    
43. ?>  

<?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.

The main JavaScript function - init() will try to find the user geolocation first, then retrieve data from Meetup API and populate the information on Dojo spreadsheet and a Google Map.(init2)

view plaincopy to clipboardprint?

1. function init() {  
2.   if (!window.google || !google.gears) {  
3.     alert('Gears is not installed, please get it at http://gears.google.com ');  
4.     return;  
5.   }  
6.    
7.   function successCallback(p) {  
8.  if (p.gearsAddress.country == "United States") {  
9.  dijit.byId('city').attr('value', p.gearsAddress.city);  
10.  dijit.byId('state').attr('name', p.gearsAddress.city);  
11.  }  
12.  init2();  
13.   }  
14.    
15.   function errorCallback(err) {  
16.     var msg = 'Error retrieving your location: ' + err.message;  
17.     alert(msg);  
18.   }  
19.    
20.   try {  
21.     var geolocation = google.gears.factory.create('beta.geolocation');  
22.     geolocation.getCurrentPosition(successCallback,  
23.                                    errorCallback,  
24.                                    { enableHighAccuracy: true,  
25.                                      gearsRequestAddress: true });  
26.   } catch (e) {  
27.     alert('Error using Geolocation API: ' + e.message);  
28.     return;  
29.   }  
30. }  
31.   
32. function init2() {  
33.   gridView();  //create spreadsheet  
34.  loadMap(dijit.byId('city').value + ", " + dijit.byId('state').value); // load the city map  
35.  drawMap(store); // draw the markers  
36.  }  
37.    

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
 }