在我的网页中加载坐标到谷歌地图答案

【问题标题】：Load coords to google maps in my webpage在我的网页中加载坐标到谷歌地图
【发布时间】：2016-04-22 17:42:19
【问题描述】：

有没有办法将坐标（从csv 文件、xlxs 等）加载到我嵌入网页中的谷歌地图？我在网上看到的所有示例仅表明我必须登录到谷歌地图本身。我想要做的是加载坐标并将标记放在这些坐标上。地图在我的网页中。有没有办法在JavaScript 中做到这一点？

<!DOCTYPE html>
<html>
  <head>
    <script
            src="http://maps.googleapis.com/maps/api/js">
    </script>

    <script>
      var myCenter=new google.maps.LatLng(51.508742,-0.120850);

      function initialize()
      {
        var mapProp = {
          center:myCenter,
          zoom:5,
          mapTypeId:google.maps.MapTypeId.ROADMAP
        };

        var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

        var marker=new google.maps.Marker({
          position:myCenter,
        });

        marker.setMap(map);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>

  <body>
    <div id="googleMap" style="width:500px;height:380px;"></div>
  </body>
</html>

和上面的代码一样，但是我有多个坐标，那么，有没有一种方法或代码可以用来从文件中加载坐标并向其添加标记..？

【问题讨论】：

相关问题：Use GoogleMaps API from coordinates in a csv file in javascript
相关问题：Loading CSV with FileReader to make JS Objects for Map Markers (Maps API)
您的 CSV 或 Excel 文件是什么样的？

标签： javascript html google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

假设您知道如何从.csv 读取数据，并且知道如何将其转换为array。

所以你可以像这样遍历数组并添加标记：

// get the file content via ajax
var csvContent = document.querySelector('#json').value;

var coords = [];
[].forEach.call(csvContent.split(/\n/g), function(a) {
  coords.push(a.split(','));
});

markers = [];

var myCenter = new google.maps.LatLng(51.508742,-0.120850);

function initialize() {
  var mapProp = {
    center:myCenter,
    zoom:11,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);


  for (var i = 0; i < coords.length; i++) {
    var marker = new google.maps.Marker({
      position:new google.maps.LatLng(coords[i][0], coords[1][1])
    });

    marker.setMap(map);
  }                
}

google.maps.event.addDomListener(window, 'load', initialize);

<script src="http://maps.googleapis.com/maps/api/js"></script>
JSON file:
<textarea id="json">
  51.5086,-0.12086
  51.5186,-0.12087
  51.5286,-0.12088
</textarea>
<hr />
<div id="googleMap" style="width:500px;height:380px;"></div>

【讨论】：

对不起，先生。我很困惑。但是给你~