Load coords to google maps in my webpage

Question

Is there a way I could load coordinates(from csv file, xlxs etc.) to the google map I embedded in my webpage? All the examples I see on the net only shows I must login to google map itself. What I want to do is to load the coordinates and put markers to those coordinates. The map is in my webpage.. Is there a way I could do this in 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>

Like the code above, but i have multiple coordinates, so, is there a way or code I code use to load coordinates from a file and add a marker to it..?

related question: [Use GoogleMaps API from coordinates in a csv file in javascript](http://stackoverflow.com/questions/32409510/use-googlemaps-api-from-coordinates-in-a-csv-file-in-javascript) — geocodezip, Jan 17 '16 at 17:40
related question: [Loading CSV with FileReader to make JS Objects for Map Markers (Maps API)](http://stackoverflow.com/questions/28921096/loading-csv-with-filereader-to-make-js-objects-for-map-markers-maps-api) — geocodezip, Jan 17 '16 at 17:41

Mosh Feu · Accepted Answer · 2016-01-18T05:44:49.207

Let's say that you know how to read a data from .csv and you know how to convert it to an array.

So you can iterate through the array and add markers as you want like this:

// 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>

sorry, sir. i got confused. but here you go~ – New to Programming Feb 12 '16 at 00:04 — New to Programming, Feb 12 '16 at 00:04

Load coords to google maps in my webpage

1 Answers1