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

#Facebook is still winning, by a long shot http://t.co/STJJ8Wavej by @epro http://t.co/BUEdnR3xfi

Monday April 21, 2014

Meet our new developer, Stu, and designer, Rachel! http://t.co/2e7bowwPuN

Friday April 18, 2014

RT @emalickthompson: @neworganizing thanks for the shout-out -- I really enjoyed coaching! It was great to meet all the engaged, inspiring …

Friday April 18, 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!