Ankündigung

Einklappen
Keine Ankündigung bisher.

Google Maps V3 API - Marker und Informationen aus einer Datenbank

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Google Maps V3 API - Marker und Informationen aus einer Datenbank

    Hallo Zusammen!
    Ich bin relativ neu im Bereich Javascript und stehe total auf dem Schlauch.
    Ich hoffe Ihr könnte mir helfen.

    Ich möchte gerne Adressen und Informationen aus einer Datenbank in Google Maps darstellen.
    Das darstellen der einzelnen Ort klappt.

    Aber ich würde gerne die Marker anklicken und Informationen angezeigt bekommen.
    Die Daten kommen aus einer XML.

    HTML-Code:
    <!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>
    
    
    <html>
      <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(51.92277778, 10.43083333),
              zoom: 7
    
            });
            var infoWindow = new google.maps.InfoWindow;
    
              // Change this depending on the name of your PHP or XML file
              downloadUrl('reklamationen_xml.php', 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 bauherr = markerElem.getAttribute('bauherr');
                  var plz = markerElem.getAttribute('plz');
                  var ort = markerElem.getAttribute('ort');
                  var strasse = markerElem.getAttribute('strasse');
                  var beschreibung = markerElem.getAttribute('beschreibung');
                  var bemerkung = markerElem.getAttribute('bemerkung');
                  var lfdnr = markerElem.getAttribute('lfdnr');
                  var typ = markerElem.getAttribute('typ');
                  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 defer
        src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXX&callback=initMap">
        </script>
      </body>
    </html>

    Folgender Fehler wird von der Console ausgegeben:

    Code:
    testmap.html:68 Uncaught ReferenceError: address is not defined
        at testmap.html:68
        at HTMLCollection.forEach (<anonymous>)
        at testmap.html:47
        at XMLHttpRequest.request.onreadystatechange (testmap.html:94)

  • #2
    Es gibt keine Variable address. Wo soll die herkommen?

    Kommentar


    • #3
      Das ist mir schon klar, aber ich verstehe schlichtweg nicht, wie ich es zusammensetzen muss.

      Letztlich müssen doch die Informationen aus der Datenbank in eine Variable geschrieben werden.

      Beispiel:
      Code:
       var html = "<b><x1> Reklamation "+ lfdnr +" aus NuBIS:  </x1><hr></hr></b> <br/><b>Adresse:</b><br>"+ name + "<br/>" + strasse + "</hr><br/>" + plz + "&nbsp;" + ort + "<br><br/><b>Beschreibung:</b><br><br/>" +beschreibung + "<br><br/><b>Bemerkung:</b><br><br/>" + bemerkung + "<br><br/><b>Bauherr:</b><br><br/>" + bauherr+ "<br><br/><b>geplanter Termin:</b><br><br/>" + typ;
      So aber was passiert hier ?
      Code:
      var infowincontent = document.createElement('div');
                    var strong = document.createElement('strong');
                    strong.textContent = name
                    infowincontent.appendChild(strong);
                    infowincontent.appendChild(document.createElement('br'));
      Hier wird es doch zusammengefügt:
      Code:
       var text = document.createElement('text');
                    text.textContent = adress
                    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);
      Ich hatte eine laufende Version in MapsV2 aber diese wird ja bald nicht mehr unterstützt.

      Kommentar


      • #4
        Du hast doch lauter Variablen strasse, plz, usw. erstellt. Jetzt wirds doch nicht daran scheitern daraus einen komplette Adresse zusammen zu setzen? Das sind doch absolute JavaScript-Grundlagen.

        Code:
        const addresse = plz + ' ' + ort + ', ' + strasse;

        Kommentar


        • #5
          Es wird soweit angezeigt.
          Jetzt habe ich noch Probleme mit dem Informationsfenster.
          Der Text wird angezeigt, aber die HTML Tags (Formatierung) wird ignoriert.

          Ich habe gelesen und gelesen und komme nicht weiter.
          In meiner Programmierung MapsV2 hat es aber tadellos funktioniert.

          Code:
          var html = "<b><x1> Reklamation "+ lfdnr +" aus NuBIS:  </x1><hr></hr></b> <br/><b>Adresse:</b><br>"+ name + "<br/>" + strasse + "</hr><br/>" + plz + "&nbsp;" + ort + "<br><br/><b>Beschreibung:</b><br><br/>" +beschreibung + "<br><br/><b>Bemerkung:</b><br><br/>" + bemerkung + "<br><br/><b>Bauherr:</b><br><br/>" + bauherr+ "<br><br/><b>geplanter Termin:</b><br><br/>" + typ;

          Kommentar


          • #6
            Naja, du setzt ja auch die Eigenschaft .textContent, die wie der Name schon sagt Text und kein HTML enthält. Möchtest du HTML-Code setzen, brauchst du .innerHTML.

            Kommentar


            • #7
              Ja, du hast natürlich Recht und es funktioniert jetzt auch. Komisch das es in meinem vorherigen Code fast 2 Jahre unter V2 gelaufen ist.

              Abschließend habe ich aber dennoch 2 Punkte.

              Var Typ ist angeblich nicht definiert. Die XML weißt diese aber mal aus und mal nicht.

              Beispiel:

              typ="" oder typ="0000-00-00" oder typ="2020-11-12"

              Hier wird geprüft ob es einen geplanten Termin gibt.
              Ziel: ungeplante Termine = rote Marker / geplante Termine = grüne Marker

              In meinem vorherigen V2 Code habe ich es so gemacht:
              Code:
               if (typ > "0000-00-00"){
                    var marker = new GMarker(point, customIcons['gruen']);
                    }
                    else{
                    var marker = new GMarker(point, customIcons['rot']);
                    }
              Meinem Verständnis nach muss hier geändert werden, eben entsprechend rot oder grün.
              Code:
              var icon = customLabel || {};
                            var marker = new google.maps.Marker({
                              icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' ,
                              map: map,
                              position: point,
                              label: icon.label,
              Ich habe diverses probiert, verstehe aber noch nicht was ich genau verändern muss. Und zu dem wird ja ie Variable Typ nicht bewertet.
              Sorry für die Fragen, aber ich tue mich bei dir Umstellung ungewöhnlich schwer.

              Kommentar


              • #8
                "typ" ist was anderes als "type".
                Code:
                var typ = markerElem.getAttribute('typ');
                Code:
                var icon = customLabel[type] || {};

                Kommentar


                • #9
                  ich glaube das ist etwas durcheinander.

                  typ kommt aus der XML und wird hier auch ausgegeben
                  Code:
                  var html = "<b><x1> Reklamation "+ lfdnr +" aus NuBIS:  </x1><hr></hr></b> <br/><b>Adresse:</b><br>"+ name + "<br/>" + strasse + "</hr><br/>" + plz + "&nbsp;" + ort + "<br><br/><b>Beschreibung:</b><br><br/>" +beschreibung + "<br><br/><b>Bemerkung:</b><br><br/>" + bemerkung + "<br><br/><b>Bauherr:</b><br><br/>" + bauherr+ "<br><br/><b>geplanter Termin:</b><br><br/>" + typ;
                  Mit dem Icon Label hat das nichts zutun.

                  Code:
                        if (typ > "0000-00-00"){
                         var marker = new google.maps.Marker({
                                  icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png' ,
                                  map: map,
                                  position: point,
                                  label: icon.label,
                  
                                });
                        }
                        else{
                         var marker = new google.maps.Marker({
                                  icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' ,
                                  map: map,
                                  position: point,
                                  label: icon.label,
                  
                                }); 
                        }

                  Kommentar


                  • #10
                    Und wo kommt die Variable "type" her?

                    Kommentar


                    • #11
                      ich finde in meinem Code kein "type"

                      Hier nochmal der Gesamte Code:
                      HTML-Code:
                      <!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>
                      
                      
                      <html>
                        <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(51.92277778, 10.43083333),
                                zoom: 7
                      
                              });
                              var infoWindow = new google.maps.InfoWindow;
                      
                                // Change this depending on the name of your PHP or XML file
                                downloadUrl('reklamationen_xml.php', 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 bauherr = markerElem.getAttribute('bauherr');
                                    var plz = markerElem.getAttribute('plz');
                                    var ort = markerElem.getAttribute('ort');
                                    var strasse = markerElem.getAttribute('strasse');
                                    var beschreibung = markerElem.getAttribute('beschreibung');
                                    var bemerkung = markerElem.getAttribute('bemerkung');
                                    var lfdnr = markerElem.getAttribute('lfdnr');
                                    var typ = markerElem.getAttribute('typ');
                                    var point = new google.maps.LatLng(
                                        parseFloat(markerElem.getAttribute('lat')),
                                        parseFloat(markerElem.getAttribute('lng')));
                      
                                     var html = "<b><x1> Reklamation "+ lfdnr +" aus NuBIS:  </x1><hr></hr></b> <br/><b>Adresse:</b><br>"+ name + "<br/>" + strasse + "</hr><br/>" + plz + "&nbsp;" + ort + "<br><br/><b>Beschreibung:</b><br><br/>" +beschreibung + "<br><br/><b>Bemerkung:</b><br><br/>" + bemerkung + "<br><br/><b>Bauherr:</b><br><br/>" + bauherr+ "<br><br/><b>geplanter Termin:</b><br><br/>" + typ; 
                      
                            if (typ > "0000-00-00"){
                                      var marker = new google.maps.Marker({
                                      icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png' ,
                                      map: map,
                                      position: point,
                                      label: icon.label,
                      
                                       });
                            }
                            else{
                                      var marker = new google.maps.Marker({
                                      icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' ,
                                      map: map,
                                      position: point,
                                      label: icon.label,
                      
                                       }); 
                            } 
                      
                                    var infowincontent = document.createElement('div');
                                    var strong = document.createElement('strong');
                                    strong.innerHTML = html
                                    infowincontent.appendChild(strong);
                                    infowincontent.appendChild(document.createElement('br'));
                      
                      
                      
                                    var icon = customLabel || {};
                                    var marker = new google.maps.Marker({
                                      icon: 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' ,
                                      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 defer
                          src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXX&callback=initMap">
                          </script>
                        </body>
                      </html>

                      Kommentar


                      • #12
                        Zitat von BDC Beitrag anzeigen
                        ich finde in meinem Code kein "type"
                        Ich habs sogar extra raus kopiert. Soll ichs auch noch mit roter Farbe einkreisen und 20 Pfeile dazu malen?

                        Kommentar


                        • #13
                          Das von dir kopierte kommt aus dem anfänglichen Post, deswegen habe ich extra den neuen Code hinzugefügt. Da gibt es diese Variable NICHT !

                          Kommentar


                          • #14
                            Das macht dann noch weniger Sinn. Deine Variable customLabel hat kein Property .label.

                            Warum betreibst du nicht Debugging und schaust dir deine Variableninhalte an?

                            Kommentar

                            Lädt...
                            X