Google Maps API V3 – MySQL-Datenbank-Einbindung mit php

 

Bei der Anzeige von Karten auf einer Webseite ist es oft wichtig, dass diese dynamisch gestaltet werden können und nicht starr immer die selben Punkte anzeigen. Dies kann man durch einbinden einer MySQL-Datenbank per php erreichen. In diesem Tutorial wird das Ergebnis erst einmal das gleiche sein, wie in der Erklärung, wie verschiedene Markerbilder erzeugt werden. Der Unterschied ist, dass die Informationen aus der Datenbank kommen. Diese muss erst einmal erstellt werden:

--
-- Tabellenstruktur für Tabelle `staedte`
--

CREATE TABLE IF NOT EXISTS `staedte` (
  `stadt` varchar(50) NOT NULL,
  `einwohner` mediumint(7) NOT NULL,
  `breitengrad` varchar(100) NOT NULL,
  `laengengrad` varchar(100) NOT NULL,
  `marker` varchar(10) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Daten für Tabelle `staedte`
--

INSERT INTO `staedte` (`stadt`, `einwohner`, `breitengrad`, `laengengrad`, `marker`) VALUES
('Hamburg', 1800000, '53.5510846', '9.9936818', 'gruen'),
('Berlin', 3510000, '52.519171', '13.4060912', 'rot'),
('Köln', 1020000, '50.937531', '6.9602786', 'gruen'),
('München', 1380000, '48.1366069', '11.5770851', 'gruen');

In phpmyadmin müsste dies dann so aussehen.
DB Städte
Es gibt also die Spalten für die Stadt, die Einwohneranzahl, den Breiten und den Längengrad, sowie die Information für die Farbe/Dateibezeichnung des Markerbildes.

Abgefragt wird dies per php:

$dbhost = "localhost";
$dbuser = "root";
$dbpw = "";
$database = "WP";

$db= mysql_connect ("$dbhost","$dbuser","$dbpw") or die(mysql_error()." - Serverzugriff gescheitert!");
mysql_select_db("$database",$db) or die(mysql_error()." - Datenbankzugriff gescheitert!");

 $abfrage = "SELECT stadt, einwohner, breitengrad, laengengrad, marker FROM staedte";
 $ergebnis= mysql_query ($abfrage,$db);
 while (list($stadt, $einwohner, $breitengrad, $laengengrad, $marker) = mysql_fetch_row($ergebnis))
 {
 $kartendaten.="['$stadt<br>$einwohner Einwohner', $breitengrad, $laengengrad, '$marker'],";
 }

 // Zur Kontrolle der Ausgabe "//" vor echo entfernen
 // echo "$kartendaten";

Bei $dbhost, $dbuser, $dbpw und $database sind die entsprechenden Informationen deiner Datenbank einzutragen. Die Datenbank heißt in meinem Fall „WP“, die abgefragte Tabelle „staedte“.

Der wichte Teil für die Google Maps API ist hierbei die Variabel „$kartendaten“. Im Beispiel werden vier Datensätze ausgelesen. Die while-Schleife läuft also dementsprechend oft. Durch den Punkt hinter $kartendaten (->“$kartendaten.=“) werden der Variabel immer weitere Informationen hinzugefügt. Sie wird also immer größer, ohne dass die früheren Informationen gelöscht werden. Gefüllt sieht sie in unserem Beispiel dann so aus:

['Hamburg<br>1,800 Mio Einwohner', 53.5510846 , 9.9936818, 'gruen' ],
 ['Berlin<br>3,510 Mio Einwohner', 52.519171 , 13.4060912, 'rot' ],
 ['Köln<br>1,020 Mio Einwohner', 50.937531 , 6.9602786, 'gruen' ],
 ['München<br>1,380 Mio Einwohner', 48.1366069 , 11.5770851, 'gruen' ],

Der komplette Code ist wie folgt und muss als *.php-Datei gespeichert werden!

<html>
<head>
<title>Google Maps V3 - MySQL-Datenbank-Einbindung per php</title>
 <meta http-equiv="content-type" content="text/html;" />
 <script src="http://maps.google.com/maps/api/js?sensor=false"
 type="text/javascript"></script>
</head>

<body>

<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpw = "";
$database = "WP";

$db= mysql_connect ("$dbhost","$dbuser","$dbpw") or die(mysql_error()." - Serverzugriff gescheitert!");
mysql_select_db("$database",$db) or die(mysql_error()." - Datenbankzugriff gescheitert!");

 $abfrage = "SELECT stadt, einwohner, breitengrad, laengengrad, marker FROM staedte";
 $ergebnis= mysql_query ($abfrage,$db);
 while (list($stadt, $einwohner, $breitengrad, $laengengrad, $marker) = mysql_fetch_row($ergebnis))
 {
 $kartendaten.="['$stadt<br>$einwohner Einwohner', $breitengrad, $laengengrad, '$marker'],";
 }

 // Zur Kontrolle der Ausgabe "//" vor echo entfernen
 // echo "$kartendaten";
?>

<h1>Millionenst&auml;dte in Deutschland</h1>
<div id="map" style="width: 750px; height: 400px;"></div>
 <script type="text/javascript">
// Informationen der einzelnen Marker
 var locations =
 [
 <?php echo "$kartendaten"; ?>
 ];

// Festlegung des ID-Namens (für div id), der Zoomstufe (1-16), des Mittelpunktes der Karte, und des Kartentyps
 var map = new google.maps.Map(document.getElementById('map'), {
 zoom: 5,
 center: new google.maps.LatLng(51, 10.5),
 mapTypeId: google.maps.MapTypeId.ROADMAP
 });

// Infofenster ("Blase") soll angezeigt werden
 var infowindow = new google.maps.InfoWindow();

// Auslesen der Markerinformationen
 var marker, i;

 // Länge und Breite, Markerbild und Festlegung für welche div-ID dies gilt
 var marker, i;

 for (i = 0; i < locations.length; i++) {
 e=locations[i][3];
 var image = 'marker_stern-' + e + '.png';

 marker = new google.maps.Marker({
 position: new google.maps.LatLng(locations[i][1], locations[i][2]),
 map: map,
 icon: image,
 });

 // Infofenster: Wie wird es angesprochen und was befindet sich in ihm
 google.maps.event.addListener(marker, 'click', (function(marker, i) {
 return function() {
 infowindow.setContent(locations[i][0]);
 infowindow.open(map, marker);
 }
 })(marker, i));
 }
 </script>
 <img src="marker_stern-gruen.png"> Mehr als eine Millionen Einwohner<br>
 <img src="marker_stern-rot.png"> Mehr als drei Millionen Einwohner
</body>
</html>

Ich habe für das Beispiel verschiedene Markerbilder verwendet. Damit das Ergebnis wie in der Grafik aussieht (bzw. dir überhaupt etwas angezeigt wird), benötigst du noch die beiden Markerbilder):

markerfarben

Downloads: Marker (rot), Marker (grün)

Nun sollte alles klappen!

Der Vorteil einer Datenbank ist natürlich die dynamische Abfrage. In diesem kleinen Beispiel macht es natürlich wenig Sinn, aber mögliche Abfragen wären:

$abfrage = "SELECT stadt, einwohner, breitengrad, laengengrad, marker FROM staedte WHERE marker='gruen'";
$abfrage = "SELECT stadt, einwohner, breitengrad, laengengrad, marker FROM staedte WHERE einwohner>1200000";

Die Datenbank könnte natürlich auch so aufgebaut sein, dass sie einen Kalender mit Veranstaltungen enthält und man nur Orte mit Ereignissen in der Zukunft oder der Vergangenheit angezeicht werden sollen.

Viel Spaß beim Umsetzen des Tutorials. Ich würde mich über Links zu den Projekten im Kommentarbereich freuen.

Mobilität der Zukunft: Das selbstfahrende Auto

 

Google Selbstfahrendes AutoDiese Tage ist das AUTOnome Fahrzeug ein Stück mehr Realität geworden. Google hat im Rahmen seines „Self-Driving Car Projekt“ auf seinem Blog einen Prototyp für ein erstes selbst-fahrendes Auto vorgestellt, dass nicht auf Basis eines derzeit existierenden Models etablierter Herrsteller aufbaut.

Das Besondere daran ist, dass es ohne Lenkrad und Pedale auskommt. Somit kann auf der Fahrt gelesen oder gearbeitet werden. Das Ziel wird also stressfrei erreicht. Wenn die Technik ausgereift ist, werden Unfälle und somit Tote und Verletzte der Vergangenheit angehören. Staus, die oft durch fehlerhafte Fahrweise entstehen, sollten damit auch seltener auftreten.

Außerdem verfügt das knuffige Auto über einen Elektroantrieb. Die ersten Kunden werden sicher Carsharing anbieter sein. Dadurch wird die Auslastung erhöht und es können neue Zielgruppen, wie führerscheinlose Nutzer, erreicht werden.

Was hälst du von der Idee? Ich bin auf deine Meinung in den Kommentaren gespannt.

Serienempfehlung: Suburgatory (Vorstadthölle)

Bei der Serie Suburgatory (Zusammengesetztes Wort aus suburb und purgatory – also Vorstadthölle) geht es um die 15-jährige Tessa, die mit ihrem Vater George von New York in die Vorstadt zieht. Doch schnell stellt sich heraus, dass vieles nur Fassade ist und das Leben in der Großstadt doch angenehmer sein kann.

Die Empfehlung gibt es, weil es leichte und kurzweilige – eine Folge geht ca. 20 Minuten – Unterhaltung ist. Die Serie wurde zum Beispiel bei ProSieben gezeigt. Derzeit ist sie auf deutsch nur auf ORF1 zu sehen. Ich empfehle aber sowieso die Originalfassung. Deshalb hier noch der Trailer in Englisch:

Das Fahrrad: Die schnellere Altenative in der Stadt

Der tägliche Wahnsinn des Stadtverkehrs wird sehr schön im Video von Tim Goldby gezeigt. Er hat einfach mal gezählt, wieviel Autos er auf dem Weg zur Arbeit mit dem Fahrrad überholt hat.

Also: Nachmachen und selbst das Fahrrad nehmen. Das spart Geld, Zeit und hält zudem noch fit.

via: zukunft-mobilitaet.net

Das Comeback der Schallplatte

Verkaufszahlen Vinyl Schallplatten 1993 bis 2012Musik wird immer beliebter. Jeder hat auf seiner Festplatte unzählige MP3s. Teils selbst gekauft, oft auch von Freunden oder irgendwie aus dem Internet. Außerdem gewinnen Streamingdienste an Bedeutung. Gleichzeitig sind die Verkaufszahlen von CDs sind seit Jahren im freien Fall. Um in die Charts zu kommen reichen meist wenige hundert verkaufte Tonträger.

Aber es gibt eine Entwicklung, die viele so vor einigen Jahren nicht erwartet hätten. Die Schallplatte ist zurück. Die Verkaufszahlen sind von 0,3 Millionen im Jahr 1993 auf 4,6 Millionen in 2012 gestiegen.

Einen Überblick über die Erfolgsgeschichte der Vinyl-Scheiben gibt die knapp 20minütige Dokumentation von Spiegel.tv. Es werden unter anderem Musiksammler, Schallplattenhersteller und -verkäufer, die Beatsteaks und WestBam interviewt.

Stadt der Zukunft: Fahrradparkhäuser und Stellplätze

Weltweit nimmt der Radverkehr immer weiter zu. Das ist erfreulich. Da derzeit leider (noch fast) keine Autoparkplätze für Fahrradstellplätze umfunktioniert werden, muss darüber nachgedacht werden, welche möglichkeiten es gibt, Fahrräder platzsparend zu parken. Sehr spannend finde ich dabei die folgende Idee aus Japan. Die Fahrräder werden dabei einfach in den Untergrund verfrachtet:

Aber auch in Deutschland gibt es schon Parkhäuser für Fahrräder. Wie zum Beispiel in Bamberg:

Die Vorteile liegen auf der Hand. Das Fahrrad ist vor Wind und Wetter geschützt, es kann nicht mutwillig zerstört werden und vor Dieben ist man auch sicher. Und zusätzlich spart es Platz im Straßenraum.

Nager IT: Die faire Maus

Nachdem vor einigen Wochen mit dem FairPhone eine kleine Welle von Artikeln über faire IT-Produkte durchs Internet ging, möchte ich an dieser Stelle auf die faire Maus von NAGER IT aufmerksam machen. Dies ist ein Projekt, das versucht die Computermaus so fair wie möglich herzustellen. Dabei werden soziale sowie ökologische Gesichtspunkte beachtet. Mehr Details gibts auf der Homepage. Die aktuelle Maus ist für ca. 30€ zu erwerben.

Serienempfehlung: Girls

Girls TV Show

2012 startete auf HBO die Fernsehserie Girls. Wie bei „Sex and the City“ spielen vier Frauen aus New York die Hauptrollen. Im Gegensatz zur Serie aus den 90ern sind diese aber nicht erfolgreich, sondern versuchen sich irgendwie durchs Leben zu schlagen. Außerdem leben sie in Brooklyn und nicht Manhatten.
In der ersten Folge gibt es auch eine kleine Anspielung in Form eines Plakates und eines schnippigen Spruches (Etwa: ‚Was ist Sex and the City?‘, wenn ich mich recht erinnere)

Die Idee zur Serie hatte Lena Dunham. Sie spielt auch die Rolle der Hannah. Ihre Eltern streichen ihr jegliche finanzielle Zuwendung. Damit beginnt das Drama.

Insgesamt eine zu empfehlende Serie. Manchmal etwas verstörend. Dann wieder angenehm mit schöner Musik.

Derzeit kann man sie sich auf dem Bezahlsender Glitz ansehen. Bald auch auf ZDFneo. Außerdem ist gerade die erste Staffel auf DVD erschienen. Ich empfehle die englische Originalspur, auch wenn es manchmal etwas schwieriger zu verstehen ist.

Wer kennt die Serie und kann sie auch empfehlen?

Kinotipp: Das Leben ist nichts für Feiglinge

Seit kurzem ist der Film „Das Leben ist nichts für Feiglinge“ in den Kinos. In den Hauptrollen sind Wotan Wilke Möhring, Helen Woigk, Chrstine Schorn, Frederick Lau und Rosalie Thomass zu sehen.
Er überzeugt meiner Meinung nach durch eine interessante Geschichte und seine charmante Art. Ansehen!

Kritiken gibt es hier:
moviepilot.de, kino.de, filmstarts.de

Plastik: Fluch der Meere

Die Weltmeere werden immer mehr mit Plastik vermüllt. Dazu hier zwei interessante Dokumentationen:

Insel aus Müll:

Plastik: Fluch der Meere:

Einen Lösungsvorschlag kommt von Boyan Slat. Er hat, zusammen mit vielen anderen, das Projekt „The Ocean Cleanup“ gestartet und dazu erfolgreich per Crownfunding 80.000$ eingesammelt.
Man darf gespannt sein, ob die Erwartungen erfüllt werden können.

%d Bloggern gefällt das: