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.
Folgender Fehler wird von der Console ausgegeben:
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)
Kommentar