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

Don’t miss it! Come see @tarynrosenkranz at 4:30 for a crash course on list building! See you in room 320 #netrootsnation ##NN14

Friday July 18, 2014

Facebook's Buy button lets you purchase products directly from Page posts and ads http://t.co/NiwfBxAjXL via @engadget

Friday July 18, 2014

RT @Geoff_Mackler: Listening to @tbonier talking about winning state legislatures and redistricting. #NN14

Thursday July 17, 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!