Foursquare + Google Maps Simplified

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

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(,);
	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.


Keyword search

Blueprint on Twitter Twitter

Follow us @BlueprintTweets!

Comic Sans still your go-to font? Take some lessons from @typekit on typography. http://t.co/9IDzJD8ZG1

about

What? Design the worst possible user experience? http://t.co/QFdBIpRCNC

about

The first good news about the Heartbleed bug emerges http://t.co/47H3vNZEzb via @ahess247

about

RT @DrDigiPol: At #CTeast targeting on #socmed panel w/ @DSPolitical's Jim Walsh, Proof's @cksieloff, Bluepiint' @agonzalz, Twitter's @JIGo…

about

"Help me…help you." Learn what Google lets you do to help them index your site. http://t.co/ngz33ShS08

about

Visit @BlueprintTweets »