0

Не могу разобраться с кластеризацией в google maps с data помогите пожалуйста.

<!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>trees</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>

<html>

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

  <script>
    var customLabel = {
      Карагач: {
        label: '1'
      },
      Тополь: {
        label: '2'
      },
      Ясень: {
        label: '3'
      },

      Неопределено: {
        label: '?'
      }
    };




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


      var markerCluster = new MarkerClusterer(map, [], {
        imagePath: "https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m"
      });




      // Change this depending on the name of your PHP or XML file
      downloadUrl('mapmarkers2.xml', function(data) {
        var xml = data.responseXML;



        var markers = xml.documentElement.getElementsByTagName('marker');
        Array.prototype.forEach.call(markers, function(markerElem) {
          var id = markerElem.getAttribute('id');
          var name = markerElem.getAttribute('name');
          var address = markerElem.getAttribute('address');
          var type = markerElem.getAttribute('type');
          var point = new google.maps.LatLng(
            parseFloat(markerElem.getAttribute('lng')),
            parseFloat(markerElem.getAttribute('lat')));

          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);
          infowincontent.appendChild(document.createElement('br'));
          var icon = customLabel[type] || {};
          var marker = new google.maps.Marker({
            map: map,
            position: point,
            label: icon.label
          });

          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 src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>


  <script async defer src="https://maps.googleapis.com/maps/api/js?key=API&callback=initMap">
  </script>
</body>

</html>
0

1 ответ 1

0
<script
  async
  defer
  src="https://maps.googleapis.com/maps/api/js?key=API&callback=initMap"
></script>

?key=API

введите сюда описание изображения

YOUR_API_KEY

твой API ключ - https://www.google.com/search

o ,-

2
  • про api key я знаю, я намеренно его скрыл. 9 мар 2020 в 6:51
  • Тогда в чем вопрос?
    – qwabra
    9 мар 2020 в 13:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.