Google Maps API - Добавление произвольных данных в точку на уровне данных

Question

var schoolLayer = new google.maps.Data();
schoolLayer.setMap(map);
let latLng = new google.maps.LatLng(coords1, coords2);
let school = new google.maps.Data.Point(latLng);
schoolLayer.add({geometry: school});

Я строю школьный слой.Я делаю это, добавляя точки к слою данных.Я добавил очки довольно легко.У меня вопрос, как мне добавить произвольные данные к точке, например, название школы?

Я пытался сделать schoolLayer.add({geometry: school, school_name: 'Hello Elementary School'}), но это не работает.

Answer 1

Поместите произвольные данные в поле свойств объекта.

let latLng = new google.maps.LatLng(37.4419, -122.1419);
let school = new google.maps.Data.Point(latLng);
schoolLayer.add({
  geometry: school,
  properties: {
    name: "school1"
  }
});

Затем вы можете получить их в прослушивателе событий, например так:

google.maps.event.addListener(schoolLayer, 'click', function(e) {
  infowindow.setContent(e.feature.getProperty("name"));
  infowindow.setOptions({
    pixelOffset: new google.maps.Size(0, -40)
  })
  infowindow.setPosition(e.latLng);
  infowindow.open(map);
})

подтверждениеконцепт скрипка

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var infowindow = new google.maps.InfoWindow();
  var schoolLayer = new google.maps.Data();
  schoolLayer.setMap(map);
  let latLng = new google.maps.LatLng(37.4419, -122.1419);
  let school = new google.maps.Data.Point(latLng);
  schoolLayer.add({
    geometry: school,
    properties: {
      name: "school1"
    }
  });
  let latLng2 = new google.maps.LatLng(37.445, -122.145);
  let school2 = new google.maps.Data.Point(latLng2);
  schoolLayer.add({
    geometry: school2,
    properties: {
      name: "school2"
    }
  });
  google.maps.event.addListener(schoolLayer, 'click', function(e) {
    infowindow.setContent(e.feature.getProperty("name"));
    infowindow.setOptions({
      pixelOffset: new google.maps.Size(0, -40)
    })
    infowindow.setPosition(e.latLng);
    infowindow.open(map);
  })
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>