Clustermarker mit Google Maps-API, Standorte aus der Datenbank

-1

Ich erstelle eine Google-Map, die anhand von Informationen aus meiner Datenbank mit Markern gefüllt wird. Ich habe in diesem ersten Schritt die von Google bereitgestellte tutorial verfolgt.Clustermarker mit Google Maps-API, Standorte aus der Datenbank

Die Karte funktioniert gut, aber da einige meiner Marker dicht beieinander liegen, möchte ich das Marker-Clustering nutzen. Ich habe dem Tutorial von Google unter gefolgt.

Allerdings kann ich keinen Weg finden, um es zum Laufen zu bringen. Meine Marker erscheinen einfach so, wie sie sind, ohne Clusterbildung. Ich glaube, ich habe alle Schritte verfolgt, die JS-Datei mit meinem HTML verknüpft, die Markersymbole und JS-Datei heruntergeladen und auf meine Hosting-Site hochgeladen.

Wie kann ich weiterhin Marker aus meiner Datenbank erstellen, aber Cluster auch die Marker?

Ich habe den genauen Code aus dem Google Marker Clusterer Tutorial getestet, und alles funktioniert gut. (. Allerdings sind die Markierungen sind nicht in der Lage, die ich brauche)

Eine vereinfachte Version meiner HTML (PHP) Webseite ist wie folgt:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>My Website</title> 
    <style> 
     map { 
    height: 400px; 
    width: 98%; 
    border: 5px outset SteelBlue; 
    } 
    </style> 
    </head> 
<body> 

       <!-- Google Map --> 
       <div id='map'> 
       </div> 



<!-- Google MAPS API & Custom Maps JS--> 

    <!-- This is my personal file that houses the main Javascript code --> 
     <script src="findermap.js"></script> 

    <!-- A link to download this file is provided by the Google tutorial --> 
     <script src="markerclusterer.js"></script> 

    <!-- Basic Google Maps API key link --> 
    <script async defer 
     src="https://maps.googleapis.com/maps/api/js?key=MY-KEY-IS-USED-HERE&callback=initMap"> 
    </script> 

</body> 
</html>

Hier ist im Grunde die JavaScript-Datei Ich verwende „findermap. js“

  function initMap() { 
      var map = new google.maps.Map(document.getElementById('map'), { 
       center: new google.maps.LatLng(0, 0), 
       zoom: 1 
      }); 


      var customIcons = { 
        type1: { 
         icon: 'icon_type1.png' 
        }, 
        type2: { 
         icon: 'icon_type2.png' 
        }, 
        type3: { 
         icon: 'icon_type3.png' 
        }, 
        type4: { 
         icon: 'icon_type4.png' 
        } 
      }; 
      var markers = []; 
      var infoWindow = new google.maps.InfoWindow; 


       // Change this depending on the name of your PHP or XML file 
       downloadUrl('https://my-website.com/getinfo.php', function(data) { 
       var xml = data.responseXML; 
       var markers2 = xml.documentElement.getElementsByTagName('marker'); 
       Array.prototype.forEach.call(markers2, 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 = customIcons[type] || {}; 
        var marker = new google.maps.Marker({ 
        map: map, 
        position: point, 
        icon: icon.icon, 
        label: icon.label 
        }); 


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


       markers.push(marker); 

       }); 

       }); 

        var options = { 
         imagePath: '/clustericons/m' 
        }; 

       // Add a marker clusterer to manage the markers. 
        var markerCluster = new MarkerClusterer(map, markers, options); 
      } 

      function downloadUrl(url, callback) { 
      var request = window.ActiveXObject ? 
       new ActiveXObject('getinfo.php') : 
       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() {}

Quelle

2017-03-29 Mr N Burk

I Found it! Hier ist die Lösung. Dies ist die aktualisierte JavaScript-Datei:

var customIcons = { 
       type1: { 
        icon: 'icon_type1.png' 
       }, 
       type2: { 
        icon: 'icon_type2.png' 
       }, 
       type3: { 
        icon: 'icon_type3.png' 
       }, 
       type4: { 
        icon: 'icon_type4.png' 
       } 
     }; 

     function initMap() { 
      var cluster = []; 
      var map = new google.maps.Map(document.getElementById("map"), { 
      center: new google.maps.LatLng(0, 0), 
      zoom: 1, 
      mapTypeId: 'roadmap' 
      }); 
    var infowindow = new google.maps.InfoWindow(); 

      // Change this depending on the name of your PHP file 
      downloadUrl('https://my-website.com/the-sweet-sweet-xml-info.php', function(data) { 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers.length; i++) { 
       var name = markers[i].getAttribute("name"); 
       var address = markers[i].getAttribute("address"); 
       var type = markers[i].getAttribute("type"); 
       var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")), 
        parseFloat(markers[i].getAttribute("lng"))); 

       var html= "<b>" + 
       markers[i].getAttribute("name") + 
       "</b> <br/>" + 
       markers[i].getAttribute("address"); 

       var icon = customIcons[type] || {}; 
       var marker = new google.maps.Marker({ 
       map: map, 
       position: point, 
       icon: icon.icon, 
       }); 
       google.maps.event.addListener(marker, 'click', (function(marker, i) { 
          return function() { 
           infowindow.setContent(
           "<b>" + 
           markers[i].getAttribute("name") + 
           "</b> <br/>" + 
           markers[i].getAttribute("address") 
           ); 
           infowindow.open(map, marker); 

           //This sends information from the clicked icon back to the serverside code 
           document.getElementById("setlatlng").innerHTML = markers[i].getAttribute("name"); 
          } 
         })(marker, i)); 
       cluster.push(marker); 
      } 

      var options = { 
        imagePath: '/location-of-cluster-icons/m' 
       }; 

      var mc = new MarkerClusterer(map,cluster,options); 
      }); 
     } 

     function bindInfoWindow(marker, map, infoWindow, html) { 
      google.maps.event.addListener(marker, 'click', function() { 
      infoWindow.setContent(html); 
      infoWindow.open(map, marker); 

      }); 
     } 

     function downloadUrl(url, callback) { 
      var request = window.ActiveXObject ? 
       new ActiveXObject('the-sweet-sweet-xml-info.php') : 
       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() {}

Quelle

2017-04-01 18:31:32

Clustermarker mit Google Maps-API, Standorte aus der Datenbank

Antwort

Verwandte Themen