Googleマップマーカは個々のdiv内の郵便番号attrから設定されています

Question

私は複数の場所/マーカーが必要なGoogleマップを持っています。 は、これまでのところ、私は彼らはちょうど私が行うために必要なものこの

var locations = [ 
    ['Sheffield', 53.381690, -0.277405, 3], 
    ['Barnsley', 53.824976, -0.832214, 2], 
    ['Leeds', 53.865486, -1.216736, 1] 
]; 

のような配列に設定している。このようになります。マップコード付きのdivから個々のattrのタグからそれらを引っ張っています。

<div id="map"> 
    <div class="marker" postcode="S71 1ET" data-lat="53.381690" data-lng="-0.277405"></div> 
    <div class="marker" postcode="M16 0RA" data-lat="53.824976" data-lng="-0.832214"></div> 
    <div class="marker" postcode="S2 4SU" data-lat="53.865486" data-lng="-1.216736"></div> 
</div> 

理想的にも、私は場所が緯度LNGオフの代わりにattrの郵便番号を経由して移入するしたいと思います。したがって、ジオコードを使用する必要がありますか？

これまでのすべてのコードは、以下のとおりです。

<div id="map"> 
      <div class="marker" postcode="S71 1ET" data-lat="53.381690" data-lng="-0.277405"></div> 
      <div class="marker" postcode="M16 0RA" data-lat="53.824976" data-lng="-0.832214"></div> 
      <div class="marker" postcode="S2 4SU" data-lat="53.865486" data-lng="-1.216736"></div> 
     </div> 

     <script> 

     var locations = [ 
      ['Sheffield', 53.381690, -0.277405, 3], 
      ['Barnsley', 53.824976, -0.832214, 2], 
      ['Leeds', 53.865486, -1.216736, 1] 
     ]; 

     function initMap() { 

      var myLatLng = {lat: 53.774689, lng: 5.888672}; 

      var map = new google.maps.Map(document.getElementById('map'), { 
       zoom: 6, 
       center: myLatLng 
      }); 

      var count; 

      for (count = 0; count < locations.length; count++) { 
       new google.maps.Marker({ 
        position: new google.maps.LatLng(locations[count][1], locations[count][2]), 
        map: map, 
        title: locations[count][0] 
       }); 
      } 

     } 

     </script> 

Answer 1

理想的にも、私が代わりに緯度LNGオフ

attrに郵便番号を経由して移入するための場所が欲しい私は同意する傾向があります。緯度と経度がある場合は、それらを使用してください。それ以外の場合は、ジオコーディング、住所検索などが必要になります。コードが違うため、異なる国の同じ郵便番号を取得する可能性のある国の人々のためにコードを作成します。

とにかく、これは動作します：

<style>#map {height: 400px;}</style> 
<div id="map"></div> 
<div id="markers"> 
    <div class="marker" data-postcode="S71 1ET" data-lat="53.381690" data-lng="-0.277405"></div> 
    <div class="marker" data-postcode="M16 0RA" data-lat="53.824976" data-lng="-0.832214"></div> 
    <div class="marker" data-postcode="S2 4SU" data-lat="53.865486" data-lng="-1.216736"></div> 
</div> 
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script> 
<script> 
    // notice, jQuery makes it easier to read/write from/to HTML elements. But it's not required. 
    function readMarkersData() { 
     var locations = []; 
     var markerdivs = document.getElementById('markers').children; 
     for(var i=0; i<markerdivs.length; i++) { 
     var item = markerdivs[i]; 
     locations.push([ 
      item.getAttribute('data-postcode'), 
      item.getAttribute('data-lat'), 
      item.getAttribute('data-lng') 
     ]) 
     } 
     return locations; 
    } 
    function initMap() { 
     var myLatLng = {lat: 53.774689, lng: 5.888672}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 6, 
      center: myLatLng 
     }); 
     var count; 
     var locations = readMarkersData(); 
     for (count = 0; count < locations.length; count++) { 
      new google.maps.Marker({ 
       position: new google.maps.LatLng(locations[count][1], locations[count][2]), 
       map: map, 
       title: locations[count][0] 
      }); 
     } 
    } 
</script>