Mehr aus Google Maps und Foursquare machen – Location Based Services für lau

Posted on Apr 27 in Mobile Development, PHPby Marcel PociotPrint

Vor kurzem stand ich am Bochumer Hauptbahnhof vor dem Zeitschriftenregal auf der Suche nach einer Lektüre für unterwegs als mich der provokative Untertitel einer Zeitschrift aufmerksam machte.

Auf dem Titelbild war ein junger Mann zu sehen, ich denke mal etwas älter als ich.

Unter seinem Bild stand in fetten Lettern:

Wie (insert random name) Facebook mit Foursquare vom Thron stürzen will.

Zumindest ging es in diese Richtung. Den Namen des Firmengründers habe ich mir auch nicht gemerkt. Doch der Titel hat seine Zweck bei mir erfüllt und ich habe mich mal über “Foursquare” schlau gemacht.

Vielleicht ist die Webseite schon vielen Leuten ein Begriff, für mich war die Seite neu.

Ich habe bereits im Appstore einige ähnlich konzeptionierte Apps bzw. Webseiten gefunden, doch besonders die Foursquare API fand ich interessant.

Zuerst einmal kurz worum es bei Foursquare geht:

Mit Hilfe eines GPS fähigen Handys (Android, iPhone, etc.) lädt man sich die verfügbare Foursquare App auf sein Handy. Dort kann man nun einen neuen Account anlegen, oder sich mit einem bereits existierenden anmelden.

Nach der Anmeldung sieht man alle in seinem Umkreis eingetragenen “Locations”, wie es neudeutsch so schön heisst und kann dann dort “einchecken”. Daraufhin kann man anderen Leuten die auch dort einchecken Nachrichten hinterlassen, oder sehen was andere geschrieben haben.
Hinzu kommt noch, das der bzw. diejenige, die in der Location am häufigsten “eingecheckt” hat der Mayor – also quasi Bürgermeister – der Location wird.

Doch wofür das ganze? In Amerika wird es bereits so gehandhabt, das man in Kneipen / Bars etwa vergünstigte Getränke oder ein gratis Getränk erhält, wenn man vorweisen kann, dass man sich bereits bei Foursquare in der Örtlichkeit eingecheckt hat.

Im Prinzip wird man somit für sein erscheinen belohnt und kann zudem andere wissen lassen wo man sich gerade befindet.

Falls eine Location noch nicht existiert, ist es natürlich auch möglich neue Locations anzulegen.

Soweit zur Funktionsweise von Foursquare. Foursquare bietet nun eine JSON / XML API an, mit deren Hilfe es möglich ist die eingetragenen Locations anhand von Längen- und Breitengrad auszulesen.

Hier poste ich nun ein Beispiel, wie man so seine Google Maps Karten auf der eigenen Seite mit mehr Informationen füllen kann und so seinen Benutzern mehr Informationen zur Verfügung stellt.

Hierfür benötigen wir folgende Dateien:

1. Die HTML Datei in der unsere Google Maps Karte liegt
2. jQuery
3. PHP (um den  AJAX Request auf Foursquare auszulösen)

Die HTML Datei

<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=GOOGLE_MAPS_KEY" type="text/javascript"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="gmaps.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  map = new GMap2(document.getElementById("map"));
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  showAddress(map,"Neuss, Germany");
});
</script>
<div id="map" style="height:400px;width:610px;"></div>

Wie man sieht passiert hier nicht wirklich viel. Ein DIV wird für die Google Karte bereitgestellt und die benötigten JavaScript Dateien werden geladen.
Mit der showAddress Funktion wird die Karte auf einen Ort zentriert – in diesem Fall Neuss in Deutschland.

Sollte soweit alles selbsterklärend sein.

Meine angepasste gmaps.js Datei:

//<![CDATA[

var geocoder = new GClientGeocoder();

function getFoursquareVenues(map, lat,lng){
	var url = 'foursquare.php?lat='+lat+'&lng='+lng+'&l=50';
	$.getJSON(url,function(data){
		data	= data.groups[0].venues;
		$(data).each(function(){
			addMarker(map, this.geolat, this.geolong, this.name);
		});
	});
}

function showAddress(map,addressString) {
	zoomLevel = 16;

	geocoder.getLatLng(addressString, function(point) {
		if (point) {
			map.setCenter(point, 5);
			map.setZoom( zoomLevel );

			var marker = new GMarker(point);
			map.addOverlay(marker);

			GEvent.addListener(map, "moveend", function() {
			  center = map.getCenter();
			  getFoursquareVenues(map, center.lat(), center.lng());
			});

			// Get Foursquare results
			getFoursquareVenues(map, point.lat(), point.lng());
		}
	});
} 

function addMarker(map,lat,lng,html) {
	point		= new GLatLng(lat,lng);
	var marker 	= new GMarker(point);
	if( html ){
		GEvent.addListener(marker, "click", function() {
       	   	marker.openInfoWindowHtml( html );
     	});
	}
	map.addOverlay(marker);
}

//]]>

In der showAddress Funktion, die ich innerhalb der HTML Datei aufrufe, wird nun die Karte auf den übergebenen Ort zentriert und die getFoursquareVenues Funktion wird aufgerufen um die umliegenden Foursquare Locations auszulesen.

Ausserdem setze ich ein Event auf “moveend” um die Foursquare Locations abzurufen, sobald die Google Maps Karte verschoben wird.

Die getFoursquareVenues bekommt nun die von Google Maps ausgelesenen Längen- und Breitengrade übermittelt und holt sich per AJAX das JSON Objekt aus der PHP Datei, die eine Anfrage auf die Foursquare API macht.

Die gefundenen Locations werden dann mit der addMarker Funktion auf die Karte gemalt.

Die PHP Datei:

$url	= 'http://api.foursquare.com/v1/venues.json?geolat='.$_GET["lat"].'&geolong='.$_GET["lng"].'&l='.$_GET["l"];
echo file_get_contents($url);

Hier wird nun einfach eine Anfrage an die Foursquare API gesendet und die Locations werden ausgegeben.

Das angegebene Beispiel ist natürlich nicht komplett und auch die von Foursquare zurückgegebenen Locations sollte man mit Vorsicht geniessen, da eben jeder eigene Locations eintragen kann.
Ich hoffe jedoch das ich hiermit einen kurzen Einblick in die Möglichkeiten der Foursquare API verschaffen konnte und wie man damit, mit nur wenig Zeilen Code seine Google Maps aufwerten kann.

Genauere Informationen findet man in der Foursquare API Dokumentation.

Bei weiteren Fragen und Anregungen kann natürlich gerne die Kommentarfunktion genutzt werden.

Popularity: 86% [?]

One Comment

Trackbacks / Pingbacks

• Webmaster sagt:

  11. Juni 2010 um 07:56

  Hello! Please e-mail me your contacts. I have a question webmaster@complective.ru” rel=”nofollow”>……

  Thank you!!!…