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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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