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.

Advertisements

2 Kommentare

  1. Danke für die Super Einführung.
    Ich habe alle 4 Einträge gelesen, es umgesetzt und es funktioniert; einfach so!
    Jetzt habe ich zusätzlich zu den Marken (aus mySQL) eine fertige kml Datei die die tatsächlichen Verbindungen zwischen den Marken zeigt.
    Frage: Wie kann ich diese kml-Datei die auf dem Server steht zusätzlich zu den Marken einbinden?
    Die Suche im Netz ist nicht sehr ergiebig und bezieht sich oft auf eine frühere Version der APIs.
    Dank im Voraus.
    Wolfram
    Die Seite ist im Netz noch nicht freigegeben, da sie eine Ruine in Entwicklung darstellt, Auf Anfrage gerne der Link dazu

    • Wie schon per Mail geschrieben (aber damit andere Leser auch etwas von haben):

      Mir ist nicht geläufig, wie KML-Dateien bei der API V3 eingebunden werden.
      Mein Vorschlag ist deshalb einen KML-Parser oder XML-Parser zu suchen, um die Koordinaten der KML-Datei in eine MySQL-Datenbank zu überführen.

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: