Получить адрес по атрибуту элемента

Question

У меня есть несколько div-ов, и у каждого идентификатора данных есть определенный адрес.Затем я пытаюсь получить значение data-id из нажатой кнопки div и установить в de geocode центрирование карты по адресу.Но я не мог понять, как сделать это по клику.

Мой код пока:

<div class="map">

  <div class="btn_mapa" id="1" data-id="San Diego, CA"></div>
  <div class="btn_mapa"  id="2" data-id="Belo Horizonte, MG"></div>
  <div class="btn_mapa"  id="3" data-id="New York, NY"></div>
  <!–– ... many others ... ––>
  <div class="btn_mapa"  id="259" data-id="Atlanta, GA"></div>

  <div id="map-canvas" style="width: 100%; height: 100%;"></div>

</div>


<script src="https://maps.googleapis.com/maps/api/js?key=MYAPI"></script>

<script>

var geocoder;
var map;
var div1 = document.getElementById("1");
var address = div1.getAttribute("data-id");

function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

  if (geocoder) {
    geocoder.geocode({
      address: address
    }, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
          map.setCenter(results[0].geometry.location);

        } else {
          alert("No results found");
        }
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

добавьте прослушиватели кликов ко всем <div> с классом btn_mapa, в этой функции прослушивателя щелчков (this является ссылкой на нажатый <div>), получите атрибут data-id <div> и геокодировать это:

var btn_mapa = document.getElementsByClassName('btn_mapa');
for (var i=0; i<btn_mapa.length; i++) {
  google.maps.event.addDomListener(btn_mapa[i], 'click', function() {
  var address = this.getAttribute('data-id');
  console.log(address);
  geocodeAddress(address);
  });
}
function geocodeAddress(address) {
  if (geocoder) {
  geocoder.geocode({
    address: address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
        map.setCenter(results[0].geometry.location);

      } else {
        alert("No results found");
      }
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

}

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

фрагмент кода:

#map-canvas {
  height: 80%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div class="map">
  <div class="btn_mapa" id="1" data-id="San Diego, CA">San Diego</div>
  <div class="btn_mapa" id="2" data-id="Belo Horizonte, MG">Belo Horizonte</div>
  <div class="btn_mapa" id="3" data-id="New York, NY">New York, NY</div>
  <!–– ... many others ... ––>
  <div class="btn_mapa" id="259" data-id="Atlanta, GA">Atlanta, GA</div>
</div>
<div id="map-canvas"></div>
<script>
  var geocoder;
  var map;
  var div1 = document.getElementById("1");
  var address = div1.getAttribute("data-id");

  function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: latlng,
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
      },
      navigationControl: true,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
    var btn_mapa = document.getElementsByClassName('btn_mapa');
    for (var i = 0; i < btn_mapa.length; i++) {
      google.maps.event.addDomListener(btn_mapa[i], 'click', function() {
        var address = this.getAttribute('data-id');
        console.log(address);
        geocodeAddress(address);
      });
    }
  }
  google.maps.event.addDomListener(window, 'load', initialize);

  function geocodeAddress(address) {
    if (geocoder) {
      geocoder.geocode({
        address: address
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
            map.setCenter(results[0].geometry.location);
          } else {
            alert("No results found");
          }
        } else {
          alert("Geocode was not successful for the following reason: " + status);
        }
      });
    }
  }
</script>

Answer 2

Я не тестировал этот код, но в принципе он должен работать. Дайте ему шанс.

<div class="btn_mapa" id="1" data-id="San Diego, CA" onclick='handleClick(this);'></div>

<script>
function handleClick(element) {
  console.log(element.getAttribute('data-id');

}
</scrip>