Es kann losgehen!

Bevor Sie mit der Entwicklung beginnen, lesen Sie bitte unsere Entwicklerdokumentation.

Die Google Maps JavaScript API aktivieren

Zum Einstieg führen wir Sie durch die Google Developers Console, wo Sie vorab Folgendes tun müssen:

  1. Ein Projekt erstellen oder auswählen
  2. Die Google Maps JavaScript API und zugehörige Dienste aktivieren
  3. Zugehörige Schlüssel erstellen
Weiter

Verwenden von MySQL und PHP mit Google Maps

Übersicht

In dieser Anleitung erfahren Sie, wie Sie Informationen aus einer MySQL-Datenbank mithilfe der Google Maps JavaScript API auf einer Google-Karte anzeigen. Sie richtet sich an Personen mit Vorkenntnissen hinsichtlich MySQL, PHP und XML.

Auf der Karte in dieser Anleitung werden zwei Arten von Markern angezeigt, um zwischen den Standorten von Restaurants und Bars zu unterscheiden. In einer MySQL-Datenbank werden Informationen über die einzelnen Markerstandorte wie der Typ des Orts (Restaurant oder Bar), der Namen, die Adresse und die geografischen Koordinaten gespeichert. In der Karte werden diese Informationen über eine XML-Datei, die als eine Art „Vermittler“ zwischen der Datenbank und der Karte funktioniert, aus der Datenbank abgerufen. Markerinformationen können mithilfe von PHP-Anweisungen aus der Datenbank in eine XML-Datei exportiert werden.

Klicken Sie unten auf der Karte auf einen Marker, um ein Info-Fenster mit dem Namen und der Adresse des Standorts anzuzeigen. Die Marker haben das Label „R“ oder „B“ und zeigen die Standorte der Restaurants oder Bars.

Im folgenden Beispiel wird der gesamte Code angezeigt, den Sie zum Erstellen dieser Karte benötigen.

      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }



      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>


Probieren Sie es selbst aus

Bewegen Sie die Maus oben rechts über den Codeblock, um den Code zu kopieren, oder öffnen Sie ihn in JSFiddle.

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Using MySQL and PHP with Google Maps</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script>
      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                infoWindow.open(map, marker);
              });
            });
          });
        }



      function downloadUrl(url, callback) {
        var request = window.ActiveXObject ?
            new ActiveXObject('Microsoft.XMLHTTP') :
            new XMLHttpRequest;

        request.onreadystatechange = function() {
          if (request.readyState == 4) {
            request.onreadystatechange = doNothing;
            callback(request, request.status);
          }
        };

        request.open('GET', url, true);
        request.send(null);
      }

      function doNothing() {}
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Erste Schritte

Installieren Sie einen MySQL-Server mit PHP auf Ihrem Computer, richten Sie ihn ein und konfigurieren Sie ihn.

Erstellen einer Tabelle in MySQL

Erstellen Sie in MySQL eine Tabelle, die Attribute der Marker auf der Karte enthält, beispielsweise id, name, address, lat, lng und type des Markers.

Das Attribut id dient als primärer Schlüssel und das Attribut type dient zur Unterscheidung zwischen Restaurants und Bars.

Um den Speicherplatz für Ihre Tabelle so gering wie möglich zu halten, können Sie für die Attribute lat und lng Gleitkommawerte mit einer bestimmten Größe (10,6) festlegen. Auf diese Weise können Sie für die Felder Werte mit 6 Ziffern nach dem Dezimaltrennzeichen und 4 Ziffern vor dem Dezimaltrennzeichen speichern.

Die Interaktion mit der MySQL-Datenbank erfolgt über die phpMyAmin-Schnittstelle. Im folgenden Screenshot ist die Einrichtung der Tabelle in phpMyAdmin dargestellt.

Die Tabelle kann auch mithilfe von SQL-Befehlen erstellt werden (siehe nachstehende SQL-Anweisung).

CREATE TABLE `markers` (
  `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  `name` VARCHAR( 60 ) NOT NULL ,
  `address` VARCHAR( 80 ) NOT NULL ,
  `lat` FLOAT( 10, 6 ) NOT NULL ,
  `lng` FLOAT( 10, 6 ) NOT NULL ,
  `type` VARCHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;

Befüllen der Tabelle

Die Markerdaten können mit der Importfunktion der phpMyAdmin-Schnittstelle, die den Import von Daten in verschiedenen Formaten ermöglicht, in die SQL-Datenbank importiert werden.

Nachfolgend sind die Markerdaten für die Karte in dieser Anleitung im CSV-Format dargestellt.

Love.Fish,"580 Darling Street, Rozelle, NSW",-33.861034,151.171936,restaurant
Young Henrys,"76 Wilford Street, Newtown, NSW",-33.898113,151.174469,bar
Hunter Gatherer,"Greenwood Plaza, 36 Blue St, North Sydney NSW ",-33.840282,151.207474,bar
The Potting Shed,"7A, 2 Huntley Street, Alexandria, NSW",-33.910751,151.194168,bar
Nomad,"16 Foster Street, Surry Hills, NSW",-33.879917,151.210449,bar
Three Blue Ducks,"43 Macpherson Street, Bronte, NSW",-33.906357,151.263763,restaurant
Single Origin Roasters,"60-64 Reservoir Street, Surry Hills, NSW",-33.881123,151.209656,restaurant
Red Lantern,"60 Riley Street, Darlinghurst, NSW",-33.874737,151.215530,restaurant

Mit den folgenden SQL-Befehlen können die Markerdaten auch in die SQL-Tabelle importiert werden.

INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Love.Fish', '580 Darling Street, Rozelle, NSW', '-33.861034', '151.171936', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Young Henrys', '76 Wilford Street, Newtown, NSW', '-33.898113', '151.174469', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Hunter Gatherer', 'Greenwood Plaza, 36 Blue St, North Sydney NSW', '-33.840282', '151.207474', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('The Potting Shed', '7A, 2 Huntley Street, Alexandria, NSW', '-33.910751', '151.194168', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Nomad', '16 Foster Street, Surry Hills, NSW', '-33.879917', '151.210449', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Three Blue Ducks', '43 Macpherson Street, Bronte, NSW', '-33.906357', '151.263763', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Single Origin Roasters', '60-64 Reservoir Street, Surry Hills, NSW', '-33.881123', '151.209656', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Red Lantern', '60 Riley Street, Darlinghurst, NSW', '-33.874737', '151.215530', 'restaurant');

Ausgeben von Daten im XML-Format unter Verwendung von PHP

An dieser Stelle sollten Sie über eine Tabelle mit dem Namen markers verfügen, die die Markerdaten der Karte enthält. In diesem Abschnitt erfahren Sie, wie Sie die Tabellendaten aus der SQL-Datenbank mithilfe von PHP-Anweisungen in ein XML-Format exportieren. Die XML-Datei kann von der Karte zum Abrufen der Markerdaten über asynchrone JavaScript-Aufrufe verwendet werden.

Wird eine XML-Datei als eine Art „Vermittler“ zwischen die Datenbank und die Google-Karte geschaltet, werden Seiten anfangs schneller geladen und die Kartenanwendung kann flexibler gestaltet werden. Debugging kann einfacher durchgeführt werden, da Sie unabhängig voneinander die XML-Ausgabe der Datenbank überprüfen und die JavaScript-Analyse der XML-Daten durchführen können. Sie können die Karte auch vollständig auf statischen XML-Dateien basierend ausführen, ohne die MySQL-Datenbank zu verwenden.

Wenn Sie PHP noch nie verwendet haben, um eine Verbindung zu einer MySQL-Datenbank herzustellen, rufen Sie php.net auf und lesen Sie die Abschnitte zu mysql_connect, mysql_select_db, my_sql_query und mysql_error.

Mit einer der folgenden drei Techniken können die SQL-Tabellendaten als XML-Daten mit PHP ausgegeben werden.

Wenn ein öffentlicher Browser für den Zugriff auf eine Datenbank über PHP-Dateien verwendet wird, müssen Sie sich unbedingt vergewissern, dass Ihre Anmeldedaten für die Datenbank sicher sind. Fügen Sie zu diesem Zweck die Informationen zu Ihrer Datenbankverbindung in eine eigene PHP-Datei getrennt vom PHP-Hauptcode ein. Die Datei mit den Anmeldedaten sollten wie folgt aussehen, allerdings mit Ihren eigenen Informationen zur Datenbank.

<?php
$username="username";
$password="password";
$database="username-databaseName";
?>

Verwenden der DOM-XML-Funktionen von PHP für die XML-Ausgabe

Mit den DOM-XML-Funktionen von PHP können Sie sich um die Feinheiten kümmern, z. B. bestimmte Entitäten im XML-Code mit Escape-Zeichen versehen. Außerdem kann damit problemlos XML-Code mit komplexeren Strukturen erstellt werden. Sie können die DOM-XML-Funktionen einsetzen, um XML-Knoten zu erstellen, untergeordnete Knoten hinzuzufügen und ein XML-Dokument auf dem Bildschirm auszugeben. Um zu ermitteln, ob für PHP auf Ihrem Server die DOM-XML-Funktionalität aktiviert ist, überprüfen Sie die Konfiguration oder initialisieren Sie ein domxml_new_doc().

Nachfolgend ist die PHP-Datei dargestellt, mit der die Verbindung zu der MySQL-Datenbank hergestellt und die XML-Daten an den Browser übertragen werden.

<?php
require("phpsqlajax_dbinfo.php");

// Start XML file, create parent node
$doc = domxml_new_doc("1.0");
$node = $doc->create_element("markers");
$parnode = $doc->append_child($node);

// Opens a connection to a MySQL server
$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  $node = $doc->create_element("marker");
  $newnode = $parnode->append_child($node);

  $newnode->set_attribute("name", $row['name']);
  $newnode->set_attribute("address", $row['address']);
  $newnode->set_attribute("lat", $row['lat']);
  $newnode->set_attribute("lng", $row['lng']);
  $newnode->set_attribute("type", $row['type']);
}

$xmlfile = $doc->dump_mem();
echo $xmlfile;

?>

In der obigen PHP-Datei initialisiert der Code zuerst ein neues XML-Dokument und erstellt dann den übergeordneten Knoten „markers“. Anschließend erstellt er eine Verbindung zur Datenbank, führt eine SELECT *-Abfrage (Alles auswählen) für die Tabelle „markers“ durch und durchläuft dann die Ergebnisse. Für jede Zeile in der Tabelle (jeden Standort) erstellt der Code einen neuen XML-Knoten mit den Zeilenattributen als XML-Attribute und hängt ihn an den übergeordneten Knoten an. Der letzte Teil des Codes überträgt dann die XML-Daten an den Browserbildschirm.

Hinweis: Falls Ihre Datenbank internationale Zeichen enthält oder Sie anderweitig eine UTF-8-Ausgabe erzwingen müssen, können Sie utf8_encode in der Datenausgabe verwenden.

Verwenden der echo-Funktion von PHP für die XML-Ausgabe

Wenn Sie keinen Zugriff auf die PHP-Funktionen vom Typ dom_xml haben, können Sie die Ausgabe der XML-Daten mit der Funktion echo durchführen. Verwenden Sie eine Hilfsfunktion (z. B. parseToXML), wenn Sie die Funktion echo verwenden, um spezielle Entitäten (<,>,",') so zu codieren, dass sie XML-freundlich sind.

Nachfolgend ist die PHP-Datei dargestellt, mit der die Verbindung zu der MySQL-Datenbank hergestellt und die XML-Daten an den Browser übertragen werden.

<?php
require("phpsqlajax_dbinfo.php");

function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','&lt;',$htmlStr);
$xmlStr=str_replace('>','&gt;',$xmlStr);
$xmlStr=str_replace('"','&quot;',$xmlStr);
$xmlStr=str_replace("'",'&#39;',$xmlStr);
$xmlStr=str_replace("&",'&amp;',$xmlStr);
return $xmlStr;
}

// Opens a connection to a MySQL server
$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  echo '<marker ';
  echo 'name="' . parseToXML($row['name']) . '" ';
  echo 'address="' . parseToXML($row['address']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo '/>';
}

// End XML file
echo '</markers>';

?>

Der obige Code stellt eine Verbindung zu der Datenbank her und führt die SELECT *-Abfrage (Alles auswählen) für die Tabelle „markers“ aus. Anschließend gibt der Code den übergeordneten Knoten markers aus und durchläuft die Abfrageergebnisse. Danach gibt der Code den XML-Knoten für den Marker in jeder Zeile der Tabelle (für jeden Standort) aus. Hierdurch werden der Name und die Adressfelder zuerst über die Funktion parseToXML gesendet, für den Fall, dass spezielle Entitäten darin enthalten sind. Das Skript endet mit der Ausgabe des schließenden Tags markers.

Hinweis: Sie können utf8_encode für die XML-Datenausgabe verwenden, falls Ihre Datenbank internationale Zeichen enthält oder Sie eine UTF-8-Ausgabe erzwingen müssen.

Verwenden der DOM-Funktionen von PHP für die XML-Ausgabe

Nachfolgend ist die PHP-Datei dargestellt, mit der die Verbindung zu der MySQL-Datenbank hergestellt und die XML-Daten an den Browser übertragen werden.

<?php

require("phpsqlajax_dbinfo.php");

// Start XML file, create parent node

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);

// Opens a connection to a MySQL server

$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());}

// Set the active MySQL database

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table

$query = "SELECT * FROM markers WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Iterate through the rows, adding XML nodes for each

while ($row = @mysql_fetch_assoc($result)){
  // Add to XML document node
  $node = $dom->createElement("marker");
  $newnode = $parnode->appendChild($node);
  $newnode->setAttribute("name",$row['name']);
  $newnode->setAttribute("address", $row['address']);
  $newnode->setAttribute("lat", $row['lat']);
  $newnode->setAttribute("lng", $row['lng']);
  $newnode->setAttribute("type", $row['type']);
}

echo $dom->saveXML();

?>

Der obige Code initialisiert ein neues XML-Dokument und erstellt den übergeordneten Knoten „markers“. Anschließend erstellt er eine Verbindung zur Datenbank, führt eine SELECT *-Abfrage (Alles auswählen) für die Tabelle „markers“ durch und durchläuft dann die Ergebnisse. Anschließend erstellt der Code einen XML-Knoten für jede Zeile in der Tabelle (für jeden Standort) mit den Zeilenattributen als XML-Attribute und hängt ihn an den übergeordneten Knoten an. Danach wird die XML-Ausgabe an den Browserbildschirm übertragen.

Hinweis: Falls Ihre Datenbank internationale Zeichen enthält oder Sie eine UTF-8-Ausgabe erzwingen müssen, können Sie utf8_encode in der Datenausgabe verwenden.

Überprüfen der Funktionsfähigkeit der XML-Ausgabe

Rufen Sie zur Bestätigung, dass das PHP-Skript gültige XML-Daten produziert, die von Ihnen erstellte PHP-Skriptdatei von Ihrem Browser aus auf. Sie sehen daraufhin die nachfolgende XML-Ausgabe.

<markers>
<marker name="Love.Fish" address="580 Darling Street, Rozelle, NSW" lat="-33.861034" lng="151.171936" type="restaurant"/>
<marker name="Young Henrys" address="76 Wilford Street, Newtown, NSW" lat="-33.898113" lng="151.174469" type="bar"/>
<marker name="Hunter Gatherer" address="Greenwood Plaza, 36 Blue St, North Sydney NSW" lat="-33.840282" lng="151.207474" type="bar"/>
<marker name="The Potting Shed" address="7A, 2 Huntley Street, Alexandria, NSW" lat="-33.910751" lng="151.194168" type="bar"/>

<marker name="Nomad" address="16 Foster Street, Surry Hills, NSW" lat="-33.879917" lng="151.210449" type="bar"/>
<marker name="Three Blue Ducks" address="43 Macpherson Street, Bronte, NSW" lat="-33.906357" lng="151.263763" type="restaurant"/>
<marker name="Single Origin Roasters" address="60-64 Reservoir Street, Surry Hills, NSW" lat="-33.881123" lng="151.209656" type="restaurant"/>
<marker name="Red Lantern" address="60 Riley Street, Darlinghurst, NSW" lat="-33.874737" lng="151.215530" type="restaurant"/>
</markers>

Wenn die Markerdaten aus der Datenbank in Ihrem Browser nicht als XML-Ausgabe angezeigt werden, führen Sie Debugging-Maßnahmen durch, indem Sie die Zeile in der Datei entfernen, die den Header auf den Inhaltstyp text/xml festlegt. Diese Zeile veranlasst Ihren Browser möglicherweise zum Parsen von XML und macht es unter Umständen schwierig, Ihre Debugging-Meldungen zu sehen.

Erstellen der Karte

In diesem Abschnitt erfahren Sie, wie Sie das Kartenbeispiel in dieser Anleitung mithilfe von JavaScript entwickeln und die XML-Ausgabedatei erstellen. Lesen Sie die Dokumentation, um weitere Informationen zu den Grundlagen des Erstellens einer Google-Karte zu erhalten.

Erstellen Sie eine neue Datei in einem Texteditor und speichern Sie diese mit dem Namen index.html. Lesen Sie die folgenden Abschnitte, um den Code zu verstehen, den Sie dieser Datei hinzufügen können.

Laden der XML-Datei

Um die XML-Datei auf die Seite zu laden, können Sie das vom Browser zur Verfügung gestellte Objekt XMLHttpRequest verwenden. Dieses Objekt ermöglicht Ihnen das Abrufen einer Datei, die sich in derselben Domäne wie die anfordernde Webseite befindet und die Basis der AJAX-Programmierung darstellt.

Definieren Sie Ihre eigene Funktion zum Laden der Datei und legen Sie dafür die Bezeichnung downloadUrl() fest. Die Funktion übernimmt zwei Parameter:

  1. url gibt den Pfad der XML-Datei oder des PHP-Skripts an, das die Datei generiert, abhängig davon, ob die XML-Datei dynamisch aktualisiert werden soll, wenn Änderungen an der Datenbank vorgenommen werden. Die Karte in dieser Anleitung ruft eine statische XML-Datei für die Markerdaten auf.
    Am einfachsten ist es normalerweise, wenn sich diese XML-Datei im selben Verzeichnis wie die HTML-Datei befindet, sodass Sie einfach anhand des Dateinamens darauf verweisen können.
  2. callback gibt die Funktion an, die das Skript aufruft, wenn die XML-Daten an den JavaScript-Code zurückgegeben werden.

Der nachstehende Code zeigt die Funktionsdeklaration.

function downloadUrl(url,callback) {
 var request = window.ActiveXObject ?
     new ActiveXObject('Microsoft.XMLHTTP') :
     new XMLHttpRequest;

 request.onreadystatechange = function() {
   if (request.readyState == 4) {
     request.onreadystatechange = doNothing;
     callback(request, request.status);
   }
 };

 request.open('GET', url, true);
 request.send(null);
}

Hinweis: Da XMLHttpRequest asynchron ist, initiiert die Callbackfunktion die Funktion downloadURL basierend auf der Größe der XML-Datei. Je größer die XML-Datei, um so mehr Zeit wird für den Vorgang benötigt. Aus diesem Grund fügen Sie am besten keinen Code nach der downloadUrl ein, der auf die Marker innerhalb der Callbackfunktion angewiesen ist. Stattdessen kann derartiger Code innerhalb der Callbackfunktion eingefügt werden.

Nachdem Sie die Funktion definiert haben, können Sie sie von Ihrem Code aus aufrufen und den Namen der PHP-Datei und die Callbackfunktion übergeben. Die Karte in dieser Anleitung ruft eine statische XML-Datei für die Markerdaten auf, wie im folgenden Code dargestellt.


downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {
  var xml = data.responseXML;
  var markers = xml.documentElement.getElementsByTagName('marker');
  Array.prototype.forEach.call(markers, function(markerElem) {
    var name = markerElem.getAttribute('name');
    var address = markerElem.getAttribute('address');
    var type = markerElem.getAttribute('type');
    var point = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')),
        parseFloat(markerElem.getAttribute('lng')));

    var infowincontent = document.createElement('div');
    var strong = document.createElement('strong');
    strong.textContent = name
    infowincontent.appendChild(strong);
    infowincontent.appendChild(document.createElement('br'));

    var text = document.createElement('text');
    text.textContent = address
    infowincontent.appendChild(text);
    var icon = customLabel[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      label: icon.label
    });

Erstellen von benutzerdefinierten Markern

Der folgende Code zeigt, wie Sie benutzerdefinierte Label für Ihre Marker hinzufügen, indem Sie zuerst ein assoziatives Array erstellen. Dadurch werden Ihre Label den folgenden Zeichenfolgen des Markerfeldes type zugeordnet: restaurant oder bar. Auf diese Weise kann problemlos auf die Label verwiesen werden, wenn Sie Marker anhand der XML-Datei erstellen.

var customLabel = {
  restaurant: {
    label: 'R'
  },
  bar: {
    label: 'B'
  }
};

Erstellen von Markern und Info-Fenstern

Beim Erstellen von Markern können Sie die entsprechenden Marker-Label abrufen, indem Sie type als Schlüssel für das zugeordnete Array customLabel verwenden. Leiten Sie die Eigenschaft .label als Konstruktoroption google.maps.Marker weiter.

Erstellen Sie anschließend den HTML-Code, der im Info-Fenster angezeigt werden soll, indem Sie den Namen, die Adresse und die HTML-Tags miteinander verketten, um den Namen hervorzuheben.

Wenn Sie HTML-formatierte Beschreibungen in Ihrer Datenbank speichern, müssen Sie möglicherweise HTML-Entitäten mit Escape-Zeichen versehen und sind an diese HTML-Ausgabe gebunden. Indem Sie warten, bis jedes Attribut separat in JavaScript abgerufen wurde, steht es Ihnen frei, mit dem HTML-Code auf der Clientseite Verschiedenes auszuprobieren. Außerdem können Sie dann schnell eine Vorschau der neuen Formatierung anzeigen.

Nachdem Sie die HTML-Zeichenfolge konstruiert haben, wird mit dem folgenden Code ein Ereignislistener für den Marker hinzugefügt, der beim Anklicken ein Info-Fenster anzeigt.

marker.addListener('click', function() {
  infoWindow.setContent(infowincontent);
  infoWindow.open(map, marker);
});

Zusammenfassung

Öffnen Sie die Datei index.html in einem Browser. Wenn die Seite geladen wird, wird die Karte mit der Funktion initMap eingerichtet. Anschließend wird die Funktion downloadUrl aufgerufen. Diese Funktion durchläuft alle Markerelemente und ruft die Attribute „name“, „address“, „type“ und „latLng“ für jedes Markerelement ab.
Durch den Code werden anschließend Marker erstellt, die Marker der Karte hinzugefügt und dann ein Info-Fenster an jeden Marker gebunden, um beim Anklicken eine Beschreibung anzuzeigen.

Weitere Informationen

Wenn Sie Marker auf einer Karte mit Ihren eigenen Standortdaten grafisch darstellen möchten, können Sie Adressen für Ihre Marker mit dem Batch-Geocoding-Dienst in Breiten- und Längengrade umwandeln.

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API