0

I'm trying to pass in the initial start values from a text file on the localhost.

Can someone please explain how to do this properly?

I've been trying to follow tutorials but they all assume the file is read in from a reader.

I don't know javascript very well.

This doesn't work

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<script>
    function initialize() {

        var lat = 0;
        var long = 0;

        var center = File("Center.txt");
        var reader = new FileReader();
        reader.onload = function (e) {
            var results = reader.result;
        }
        reader.readAsText(center);           
        var text = reader.result.toString();
        var stringAr = text.split(",");
        lat = stringAr[0];
        long = stringAr[1];


        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(lat, long)
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);


        map.data.loadGeoJson('test.json');
    }

    function loadScript() {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
            'callback=initialize';
        document.body.appendChild(script);
    }

    window.onload = loadScript;
</script>
</head>
<body>
    <div id="map-canvas"></div>   
</body>
</html>

If I comment out all the file reader stuff it works, but I need to be able to pass in the lat long parameters without the user selecting anything.

Would I alternatively be able to read them from a json file and set it that way the same way I am with the data?

DanBrum
  • 419
  • 1
  • 7
  • 18
  • 1
    show us what the contents of your Center.txt file look like. And what do you get if you output `console.log(text);` after you call `var text = reader.result.toString();`? – duncan Jun 20 '14 at 12:15
  • Ah I didn't know about the javascript console, there is no output but I get this error Uncaught TypeError: Failed to execute 'readAsText' on 'FileReader': The argument is not a Blob. – DanBrum Jun 20 '14 at 13:46
  • I'm not 100% sure but I assume that line `var center = File("Center.txt");` is not correct. It seems that you cannot just use `File()` constructor. See some tutorials how to get `File` reference, for example [Reading files in JavaScript using the File APIs](http://www.html5rocks.com/en/tutorials/file/dndfiles/) – Anto Jurković Jun 20 '14 at 17:51
  • See [How to instantiate a File object in JavaScript?](http://stackoverflow.com/questions/8390855/how-to-instantiate-a-file-object-in-javascript) – Anto Jurković Jun 20 '14 at 19:29

1 Answers1

0

The problem is probably that the values you're reading from your text file are being saved as strings. Google maps expects Number objects. You can simply use parseFloat() to fix this:

lat = parseFloat(stringAr[0]);
long = parseFloat(stringAr[1]);
duncan
  • 31,401
  • 13
  • 78
  • 99