Foursquare + Google Maps Simplified

foursquare / Google / maps / php / social media / web development   Posted on Oct 5, 2011 by Nick Rivers

So a month or two ago, we built a map for a client that tracks his Foursquare checkins. Everytime, he "Checks in" somewhere using Foursquare, it adds a marker to the map, and displays info based on what place/venue it was. This seems to be a useful means to allow his constituents to feel connected and aware of where he is. After I built this, I had several friends ask me how it was done, so I figured others may find this useful as well.

The first thing we need is an access token. Foursquare has recently added the OAUTH protocol to its authentication system. In English, that means they made it more complicated to the the exact same thing. Instead of a username and password, you need an access token generated by their system. Lucky for you, I created a tool that will fetch and return this token to you. Click here to get your token (Note: You must log in with the user you wish to track). Once you have that you can declare this token and include the foursquaremap.php script in your file (You can download the source code here).

<?php
$access_token = 'ACCESS TOKEN GOES HERE';
require_once 'foursquaremap.php';
?>

The above code uses the access token to retreive our data. Now we implement the map.

function initialize() {
// We define the function first
function TextualZoomControl() {
}
TextualZoomControl.prototype = new GControl();
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(39.02,-76.941389), 10);

// Add control type
map.addControl(new GLargeMapControl());

// Define the marker icon
var blueIcon = new GIcon(G_DEFAULT_ICON);
function createMarker(point, index) {
markerOptions = { icon:blueIcon };
var marker = new GMarker(point, markerOptions);
return marker;
}
// Use Foursquare data to plot markers
<?php foreach ($checkins as $checkin): ?>
var point = new GLatLng(<?= $checkin->venue->location->lat ?>,<?= $checkin->venue->location->lng;?>);
map.addOverlay(createMarker(point));
<?php endforeach; ?>
}
else {
alert("There is a compatibility issue.");
}
}

Here is an example of what this looks like:

Click here to download the source files. Note that Foursquare has rate limiting so you should store this data locally, using a cron and display the data from your database. For more information about rate limiting see Foursquare Rate Limiting.


Search the Blog

Blueprint Tweets

RT @jason_springer: Great piece by @agonzalz at @BluePrintTweets: Moving Voters, One Click at a Time http://t.co/NypDukUeEL #Digital #Socia

Friday August 29, 2014

Do #digitalads really move voters to the polls? Here’s what we found. http://t.co/QNWs6T61sW

Wednesday August 27, 2014

Great story on Double Up Food Bucks & @FairFoodNetwork in MI. We're thrilled to be a part of this great program! http://t.co/l6nj71PwNa

Tuesday August 26, 2014

Visit BlueprintTweets ›

Contact Us

202.681.0215

info@blueprintinteractive.com

1155 Connecticut Avenue, NW
Suite 601
Washington, DC 20036

Or submit your info and let us know what we can do for you!