How to plot coordinates from *.csv file on Google Maps?

Question

I want to highlight a mobile trace on Google Maps and GIS data from my network must also be visible.

I am able to plot hard coded coordinates on Google Maps but not from a *.csv file.

Note: *.csv file contains Lat & Long values to highlight traced route

Hi....I am able to highlight the route now but if i enter too many coordinates then the page responses very slowly....kindly can any ony let me know the limits ....I am post my code...plz mention if i am going in wrong direction.....Thanks

<>
             <!DOCTYPE html>
<html>
<head>

     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
     <meta charset="utf-8">
<title>MySiteMap</title>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDuSN0u2fpgle4eYZ1kxPHmTA8maKJynYE&sensor=false">
</script>
<script src="label.js">
</script>

<script>


    var a_Lat=new Array();
    var a_Long=new Array();
    var myLatLong = new Array();
    var myOtherSite = new Array();
    var myTataSite = new Array();
    var map;

    var myCenter=new google.maps.LatLng(18.980599,75.766536);

    function initialize()
    {
    //alert("Hello");



///sets lat_long values for polyline.


    var excel = new ActiveXObject("Excel.Application");

    var excel_file_r = excel.Workbooks.Open("D:\\Priyanka\\EGIS\\somefile.xls");

    var excel_file_s = excel.Workbooks.Open("D:\\Priyanka\\EGIS\\sitefile.xls");

        var excel_sheet_r = excel_file_r.Worksheets("sheet1");

    var excel_sheet_s = excel_file_s.Worksheets("sheet1");

        var data = excel_sheet_r.Cells(1,2).Value;

        alert("kklk");

    for (var i=2; i<10000; i++)
     {

        if(excel_sheet_r.Cells(i,1).Value==undefined || excel_sheet_r.Cells(i,2).Value==undefined)
        {
            //alert(i);
            //alert(i+" "+"about to break");
            break;
        }
                    //data = excel_sheet_r.Cells(i+1,i).Value;
                a_Lat[i-2]=excel_sheet_r.Cells(i,1).Value;
        a_Long[i-2]=excel_sheet_r.Cells(i,2).Value;

        myLatLong[i-2]=new google.maps.LatLng(a_Lat[i-2],a_Long[i-2]);
                //alert(myLatLong[i-2]);

    }



///sets latlong for Tata Sites

        //alert("kklk");
var counter_a = 0;

    for (var i=2; i<10000; i++)
     {

        if(excel_sheet_s.Cells(i,1).Value==undefined || excel_sheet_s.Cells(i,2).Value==undefined)
        {
            break;
        }
        else
        {
            myTataSite[i-2]=new google.maps.LatLng(excel_sheet_s.Cells(i,1).Value,excel_sheet_s.Cells(i,2).Value);
            counter_a = counter_a + 1;
        }

    }
alert(counter_a);
var counter1_a = 0;

///sets latlong for ICR Sites
    for (var i=2; i<10000; i++)
     {

        if(excel_sheet_s.Cells(i,3).Value==undefined || excel_sheet_s.Cells(i,4).Value==undefined)
        {
            break;
        }
        else
        {
            myOtherSite[i-2]=new google.maps.LatLng(excel_sheet_s.Cells(i,3).Value,excel_sheet_s.Cells(i,4).Value);
            counter1_a = counter1_a + 1;
        }

    }
alert(counter1_a);

///Release Excel object.

    excel.Quit(); 
    excel = null; 
    alert("BYE");



///sets map properties

        var mapProp = {
         center:myLatLong[1],
         zoom:4,
         mapTypeId:google.maps.MapTypeId.ROADMAP
        };


///Map object is defined

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



//------------------First KML file.......

        var ctaLayer3 = new google.maps.KmlLayer({ 
                url: 'https://sites.google.com/site/turbhegiskmlfiles/gis/cluster_boundry.kml'  
            });
//------------------second KML file......
        var ctaLayer4 = new google.maps.KmlLayer({ 
                url: 'https://sites.google.com/site/turbhegiskmlfiles/gis/WRL_Kolhpaur.kml'  
            });


        var myTrip = new Array();
///-------------------------------------------------------------------------------------------------------///
///-----------------------------------DEFINE POLYLINE-----------------------------------------------------///
///-------------------------------------------------------------------------------------------------------///

        myTrip = myLatLong;
        var flightPath=new google.maps.Polyline({
            path:myTrip,
            strokeColor:"#FF00FF",
            strokeOpacity:0.8,
            strokeWeight:5
        });

///Place marker on clicked location


        google.maps.event.addListener(map, 'click', function(event) {
                placeMarker(event.latLng);
                addruler(event.latLng);
        });



/*
var markerTata=new google.maps.Marker({
  position:o_site1,
  icon:'tower.png'
  });
var markerOther=new google.maps.Marker({
  position:t_site1,
  icon:'tata.png'
  }); 

var mySiteOther = new google.maps.Circle({
  center:o_site1,
  radius:2000,
  strokeColor:"#CC00CC",
  strokeOpacity:0.3,
  strokeWeight:2,
  fillColor:"#CCCCFF",
  fillOpacity:0.4
  });
var mySiteTata = new google.maps.Circle({
  center:t_site1,
  radius:75,
  strokeColor:"#0099FF",
  strokeOpacity:0.8,
  strokeWeight:2,
  fillColor:"#99FFFF",
  fillOpacity:0.4
  });
*/
alert("set")

        var mySiteTata = new Array();
        var markerTata = new Array();

        var mySiteOther = new Array();
        var markerOther = new Array();
        var infowindow1;

///sets TATA sites

        for (var i=0;i<500;i++)
        {


            markerTata[i]=new google.maps.Marker({
                position:myTataSite[i],
                icon:'tata.png'
            });



            mySiteTata[i] = new google.maps.Circle({
                center:myTataSite[i],
                radius:2000,
                strokeColor:"#0099FF",
                strokeOpacity:0.8,
                strokeWeight:2,
                fillColor:"#99FFFF",
                fillOpacity:0.1
            });



            infowindow1 = new google.maps.InfoWindow({
                content:"Tata Site"
            });

            google.maps.event.addListener(markerTata[i], 'mouseover', function() {
                infowindow1.open(map,markerTata[i])
            });
            //infowindow1.open(map,markerTata[i]);

            mySiteTata[i].setMap(map);
            markerTata[i].setMap(map);



        }

///sets ICR sites

        for (var i=0;i<counter1_a;i++)
        {




            markerOther[i]=new google.maps.Marker({
                position:myOtherSite[i],
                icon:'home.png'
            });


            mySiteOther[i] = new google.maps.Circle({
                center:myOtherSite[i],
                radius:2000,
                strokeColor:"#CC00CC",
                strokeOpacity:0.8,
                strokeWeight:2,
                fillColor:"#CCCCFF",
                fillOpacity:0.1
            });         

            mySiteOther[i].setMap(map);
            markerOther[i].setMap(map);     
        }




        ctaLayer3.setMap(map);
        ctaLayer4.setMap(map);
        flightPath.setMap(map);
    }

        function placeMarker(location) {
            var marker3 = new google.maps.Marker({
                    position: location,
                    map: map,
            });
            var infowindow3 = new google.maps.InfoWindow({
                    content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
            });
            infowindow3.open(map,marker3);
        }

//####################################################################
/*
    javascript ruler for google maps V3
    by Giulio Pons. http://www.barattalo.it
    this function uses the label class from Marc Ridley Blog

*/
function addruler(location) {

    var ruler1 = new google.maps.Marker({
        position: location ,
        map: map,
        draggable: true
    });

    var ruler2 = new google.maps.Marker({
        position: location ,
        map: map,
        draggable: true
    });
//alert(ruler1.getPosition());
    var ruler1label = new Label({ map: map });
    var ruler2label = new Label({ map: map });
//alert("hjj");
    ruler1label.bindTo('position', ruler1, 'position');
    ruler2label.bindTo('position', ruler2, 'position');

    var rulerpoly = new google.maps.Polyline({
        path: [ruler1.position, ruler2.position] ,
        strokeColor: "#FFFF00",
        strokeOpacity: .7,
        strokeWeight: 4
    });
    rulerpoly.setMap(map);

    ruler1label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
    ruler2label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));


    google.maps.event.addListener(ruler1, 'drag', function() {
        rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]);
        ruler1label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
        ruler2label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
    });

    google.maps.event.addListener(ruler2, 'drag', function() {
        rulerpoly.setPath([ruler1.getPosition(), ruler2.getPosition()]);
        ruler1label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
        ruler2label.set('text',distance( ruler1.getPosition().lat(), ruler1.getPosition().lng(), ruler2.getPosition().lat(), ruler2.getPosition().lng()));
    });

}


function distance(lat1,lon1,lat2,lon2) {
    var R = 6371; // km (change this constant to get miles)
    var dLat = (lat2-lat1) * Math.PI / 180;
    var dLon = (lon2-lon1) * Math.PI / 180; 
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
        Math.cos(lat1 * Math.PI / 180 ) * Math.cos(lat2 * Math.PI / 180 ) * 
        Math.sin(dLon/2) * Math.sin(dLon/2); 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    var d = R * c;
    if (d>1) return Math.round(d)+"km";
    else if (d<=1) return Math.round(d*1000)+"m";
    return d;
}

function all_clear(){
alert("Here")
    map.setMap(null);
}
//####################################################################



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

    <body>

        <p style="font-family:arial;color:magenta;font-size:20px;"> This is My web Page </p><br><br>

        <br><br><br>

        <div id="googleMap" style="width:500px;height:580px;"></div> <br><br><br><br>
        <p>Data in Excel is : **3652 https://sites.google.com/site/turbhegiskmlfiles/gis/shirur_to_ahmednagar.kml **</p>
        <p id = "demo"> Data is as follows: </p>
    </body>
</html>






<>

lewis · Answer 1 · 2013-08-02 13:02:10Z

up vote 0 down vote

Go to the maps engine lite on the site: https://mapsengine.google.com/map/?gmp=msp&pli=1 upload the csv file or convert to a xlsx format and upload. If you have it as a excel file there may be formating problems if it was not a cleansed csv where you have a x & y columnar lat long comma delimited text file formatting

answered Aug 2 at 13:02

lewis
1,0248

I want this to happen using javascript code. I am able to view google map with my online KML files.....now i want to know a way to upload my coordinates from CSV/excel file to Google map.....kindly share the script if anyone has worked on it – priyanka Aug 6 at 6:52

user17614 · Answer 2 · 2013-08-02 23:54:53Z

up vote 0 down vote

Google has a step by step tutorial that is close to what you want https://developers.google.com/kml/articles/csvtokml

If you have Arcgis just convert the csv to a shapefile then use http://www.zonums.com/shp2kml.html to do it for you.

answered Aug 2 at 23:54

user17614

I want this to happen using javascript code. I am able to view google map with my online KML files.....now i want to know a way to upload my coordinates from CSV/excel file to Google map.....kindly share the script if anyone has worked on it.....I have mapinfo n no ArcGIS.... – priyanka Aug 6 at 6:56

Tamas · Answer 3 · 2013-08-04 12:10:52Z

Provided you have a background in PHP a possible solution might be the following:

To keep things absolutely simple, use Googles' CSV parser library for PHP

Link to CSV parser for PHP

Then make sure you have the latitude and longitude values in your CSV. Once you have done that, parse the CSV and make a stdClass php object from each rows' coordinates. Something like this:

<?php
  $coordinates = array();
  for($i=0;$i<count($rows_number_of_csv);$i++){
  $coordinates = new stdClass();
  $coordinates->latitude = $latitude_value_from_row;
  $coordinates->longitude = $longitude_value_from_row;  
  array_push($points, $coordinates);
  unset($coordinates);
  }

  //Now that you have the array of points, echo it using PHP's json_encode function

  echo json_encode($points);
?>

Now this PHP file give you the set of points in a nice JSON format, that you can easily process on the client side with JS and Google Maps API v3.

Let me know if you need any more info on this solution!

Thanks for ur help but i want it in javascript...and where is the filename mentioned
If you want to read the CSV using JS, then this link code.google.com/p/jquery-csv might be helpful! Was my answer helpful or solved at least some of your problems?
thanks tamas for your help. now i am able to read lat-long values from excel and plot them on google map. but if data is entered in large amount then there is a problem. i have to add nearly 10000 locations with markers.
If thats the case, then you should use other techniques to avoid performance drop. One of them is clustering. Marker Clusterer Plus is a good point to start with that. You can also create tiles of your content but that is a completely different topic.

asked	2 months ago
viewed	105 times
active	23 days ago

How to plot coordinates from *.csv file on Google Maps?

3 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript google-maps csv or ask your own question.

Related Jobs

How to plot coordinates from *.csv file on Google Maps?

3 Answers

Your Answer

Sign up or login

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript google-maps csv or ask your own question.

Related Jobs

Related