Javascriptを使用してhtmlテーブルのデータから複数のマーカーをGoogleマップに表示

-1

同じページにロードされたhtmlテーブルの各行について、Googleマップにマーカーを表示しようとしています。Javascriptを使用してhtmlテーブルのデータから複数のマーカーをGoogleマップに表示

したがって、htmlテーブルには、「Site」、「Lat」、および「Lon」ヘッダーがあります。私はJQueryを使って行の値をスクラップし、この例のテーブルの下に表示されるGoogleマップのvarの場所に配置する必要があります（私はアプリケーションのテーブルの上にそれを必要としますが、。

私はほぼ手に入れましたが、うまく動作しません。

HTML

<table> 
<thead> 
    <th> Site </th> 
    <th> Lat </th> 
    <th> Lon </th> 
</thead> 
    <tbody> 
     <tr> 
      <td>Site 1</td> 
      <td>53.19373465</td> 
      <td>-6.39347735</td> 
     </tr> 
     <tr> 
      <td>Site 2</td> 
      <td>53.19373465</td> 
      <td>-6.39347735</td> 
     </tr> 
     <tr> 
      <td>Site 3</td> 
      <td>53.19373465</td> 
      <td>-6.39347735</td> 
     </tr> 
    </tbody> 
</table> 
<script 
    src= 
"http://maps.googleapis.com/maps/api/js?key=AIzaSyB1tbIAqN0XqcgTR1-   FxYoVTVq6Is6lD98"> 
</script> 

<body onload="initialize()"> 
    <div id="default" style="width:100%; height:100%"></div> 
</body>

CSS

html { height: 100% } 
    body { height: 100%; margin: 0; padding: 0 } 
    #map_canvas { height: 100% } 
    table { border: 1px solid black;} 
    th { border: 1px solid black;} 
    td { border: 1px solid black;}

Javascriptを/ Jあなたはテーブルが3つのマーカーを持っている - クエリ

var table = $("table tbody"); 

    table.find('tr').each(function (i) { 
     var $tds = $(this).find('td'), 
      siteName = $tds.eq(0).text(), 
      Lat = $tds.eq(1).text(); 
      Lon = $tds.eq(2).text(); 
     // do something with siteName, timeStamp, Lat, Lon 
     var locations = [('[' + siteName 
       + ',' + Lat 
       + ',' + Lon + ']')]; 
    }); 

    function initialize() { 

    var myOptions = { 
     center: new google.maps.LatLng(53.3242381,-6.3857877), 
     zoom: 7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 

    }; 
    var map = new google.maps.Map(document.getElementById("default"), 
     myOptions); 

    setMarkers(map,locations) 

    } 



    function setMarkers(map,locations){ 

     var marker, i 

for (i = 0; i < locations.length; i++) 
{ 

var loan = locations[i][0] 
var lat = locations[i][1] 
var long = locations[i][2] 

    latlngset = new google.maps.LatLng(lat, long); 

    var marker = new google.maps.Marker({ 
      map: map, title: loan , position: latlngset 
     }); 
     map.setCenter(marker.getPosition()) 


     var content = "Site: " + loan + '</h3>'  

    var infowindow = new google.maps.InfoWindow() 

google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
     return function() { 
      infowindow.setContent(content); 
      infowindow.open(map,marker); 
     }; 
    })(marker,content,infowindow)); 

    } 
    }

あなたはほとんどそこにいる

http://jsfiddle.net/2crQ7/894/

出典

2016-12-15 Shane Buckley

あなたのコンテンツが「」タグの内側にあることに気づいていませんか？そうでない場合は、DOM操作を行う前に基本的なHTMLを学習することをお勧めします...非常に基本的な変数（ 'var locations'）の範囲のような多くの間違いがあります... –

あなたはMooToolsを使用していますか？ –

@ T Jはい私は知っています、ここのHTMLコードはちょうど例です/ JSfiddle –

jsFiddle Demo

は、私は少しのプロセスをクリーンアップしましたが、これはそれが働いて取得します同じ場所にいるので、それを変更したいかもしれません。

var table = $("table tbody"); 

function attainLocation() { 
    var tableLocs = []; 
    table.find('tr').each(function(i) { 
     var $tds = $(this).find('td'), 
      siteName = $tds.eq(0).text(), 
      Lat = $tds.eq(1).text(); 
     Lon = $tds.eq(2).text(); 
     var obj = { 
      'sitename': siteName, 
      'lat': Lat, 
      'lon': Lon 
     }; 
     tableLocs.push(obj); 
    }); 
    return tableLocs; 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

function initialize() { 

    var myOptions = { 
     center: new google.maps.LatLng(53.3242381, -6.3857877), 
     zoom: 7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 

    }; 
    var map = new google.maps.Map(document.getElementById("default"), 
     myOptions); 

    var locations = attainLocation(); 
    setMarkers(map, locations) 

} 

function setMarkers(map, locations) { 

    var marker, i 

    for (i = 0; i < locations.length; i++) { 

     var loan = locations[i].sitename 
     var lat = locations[i].lat 
     var long = locations[i].lon 

     latlngset = new google.maps.LatLng(lat, long); 

     var marker = new google.maps.Marker({ 
      map: map, 
      title: loan, 
      position: latlngset 
     }); 
     map.setCenter(marker.getPosition()) 


     var content = "Site: " + loan + '</h3>' 

     var infowindow = new google.maps.InfoWindow() 

     google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) { 
      return function() { 
       infowindow.setContent(content); 
       infowindow.open(map, marker); 
      }; 
     })(marker, content, infowindow)); 

    } 
}

出典

2016-12-15 11:38:57

Spot on、ありがとうございました –

Javascriptを使用してhtmlテーブルのデータから複数のマーカーをGoogleマップに表示

答えて

関連する問題