Use GoogleMaps API from coordinates in a csv file in javascript

Use GoogleMaps API from coordinates in a csv file in javascript - javascript

To be honest, I am not very familiar with JavaScript. But now I really need to use it to map a set of coordinates stored in my csv file, so I'll need JavaScript and GoogleMaps API.
The data I have in my csv is like this.
latitude1, longitude1, latitude2, longitude2, latitude3, longitude3, so on.
latitude1, longitude1, latitude2, longitude2, latitude3, longitude3, so on.
latitude1, longitude1, latitude2, longitude2, latitude3, longitude3, so on.
.......... so on.
Where each line represents a route and latitude-x and longitude-x represent a location. I hope you get my point.
I kind of mixed the code I got from w3school, google official site, stackoverflow and many others, then I modified it. And what I got so far is the following.
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js">
</script>
</head>
<body>
<input type="file" name="file" id="file">
<div id="googleMap" style="width:800px;height:580px;"></div>
<script type="text/javascript">
var coordinates = [];
document.getElementById('file').onload = function(){
var file = this.files[0];
var reader = new FileReader();
reader.onchange = function(progressEvent){
// Entire file
//console.log(this.result);
var lines = this.result.split('\n');
for(var line = 0; line < lines.length; line++){
var point = this.result.split(',');
var count =0;
for(var dua=0; dua<point.length; dua++){
if(dua%2==0){
var latitude = point[dua];
}else{
var longitude = point[dua];
coordinates[count] = new google.maps.LatLng(latitude+","+longitude);
console.log(coordinates[count]);
count++;
}
}
}
};
reader.readAsText(file);
};
function getCoor(){
return coordinates;
}
function initialize(){
var mapProp = {
center:new google.maps.LatLng(8.611911,41.146056),
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var myTrip = [];
var coordinates = getCoor();
for(var c=0; c<coordinates.length; c++){
myTrip += coordinates[c];
}
//console.log(myTrip);
var flightPath=new google.maps.Polyline({
path:myTrip,
strokeColor:"#0000FF",
strokeOpacity:0.8,
strokeWeight:8
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
As you can see, I store the coordinates I got per line from my csv file to array coordinate[count]. Now I want every line of coordinate to be passed to the initialize() function so it can be processed through the API. But I am confused at this point, especially seeing how the file is read through its own function, and I can't pass it out. I hope you get what I mean, just drop a comment if you don't understand something. Thank you very much.

Using the file reader code from the answer to Chrome FileReader
you need to wait for the DOM to be rendered before searching it for elements (move anything using document.getElementById inside the initialize function).
You have issues with your code for processing the file contents, for one coordinates[count] = new google.maps.LatLng(latitude+","+longitude); is not valid, the google.maps.LatLng takes two numbers as arguments, not a comma separated string.
proof of concept fiddle
code snippet:
var map;
function getCoor() {
return coordinates;
}
function handle_files(files) {
for (i = 0; i < files.length; i++) {
file = files[i];
console.log(file);
var reader = new FileReader();
ret = [];
reader.onload = function(e) {
console.log(e.target.result);
var lines = e.target.result.split('\n');
var bounds = new google.maps.LatLngBounds();
for (var line = 0; line < lines.length; line++) {
var point = lines[line].split(',');
var count = 0;
var coordinates = [];
for (var dua = 0; dua < point.length; dua++) {
if (dua % 2 == 0) {
var latitude = point[dua];
} else {
var longitude = point[dua];
coordinates[count] = new google.maps.LatLng(latitude, longitude);
console.log(coordinates[count]);
count++;
}
}
var myTrip = [];
for (var c = 0; c < coordinates.length; c++) {
myTrip.push(coordinates[c]);
bounds.extend(coordinates[c]);
}
map.fitBounds(bounds);
//console.log(myTrip);
var flightPath = new google.maps.Polyline({
path: myTrip,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 8
});
flightPath.setMap(map);
}
}
reader.onerror = function(stuff) {
console.log("error", stuff);
console.log(stuff.getMessage());
}
reader.readAsText(file); //readAsdataURL
}
}
function initialize() {
var mapProp = {
center: new google.maps.LatLng(8.611911, 41.146056),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input type="file" name="file" id="file" onchange="handle_files(this.files)" />
<div id="googleMap"></div>
Test file contents with 2 entries:
40.712940,-74.007120,40.713080,-74.007220,40.713080,-74.007220,40.713810,-74.008820,40.713810,-74.008820,40.714360,-74.008380,40.714930,-74.007940,40.715440,-74.007540,40.716010,-74.007110,40.716540,-74.006680,40.717080,-74.006250,40.717680,-74.005770,40.718300,-74.005380,40.718300,-74.005380,40.718410,-74.005330,40.718630,-74.005240,40.718640,-74.005240,40.718670,-74.005220,40.718680,-74.005220,40.718690,-74.005220,40.718720,-74.005220,40.718850,-74.005190,40.719020,-74.005180,40.719400,-74.005180,40.719860,-74.005210,40.720630,-74.005210,40.720700,-74.005230,40.721040,-74.005260,40.721710,-74.005320,40.721830,-74.005350,40.721960,-74.005370,40.722070,-74.005400,40.722120,-74.005400,40.722160,-74.005400,40.722230,-74.005380,40.723010,-74.005070,40.723630,-74.004810,40.723630,-74.004810,40.723720,-74.005610,40.723750,-74.005900,40.723810,-74.006080,40.723830,-74.006150,40.723850,-74.006270,40.723870,-74.006360,40.723890,-74.006420,40.723910,-74.006470,40.723940,-74.006530,40.723970,-74.006600,40.724000,-74.006640,40.724070,-74.006740,40.724150,-74.006840,40.724210,-74.006900,40.724270,-74.006940,40.724300,-74.006970,40.724320,-74.006980,40.724350,-74.006990,40.724360,-74.006990,40.724380,-74.007000,40.724390,-74.007000,40.724400,-74.007000,40.724460,-74.006990,40.724510,-74.006990,40.724630,-74.007010,40.724630,-74.007010,40.724850,-74.006990,40.724920,-74.006980,40.725000,-74.006970,40.725120,-74.006970,40.725240,-74.007010,40.725330,-74.007060,40.725430,-74.007150,40.725510,-74.007230,40.725610,-74.007330,40.725690,-74.007460,40.725760,-74.007590,40.725810,-74.007730,40.725860,-74.007880,40.725900,-74.008020,40.725930,-74.008180,40.725950,-74.008340,40.726260,-74.011430,40.726300,-74.011640,40.726340,-74.011870,40.726370,-74.012150,40.726500,-74.013540,40.726640,-74.014940,40.726680,-74.015320,40.726720,-74.015620,40.727500,-74.020640,40.727580,-74.021110,40.727650,-74.021580,40.728380,-74.026090,40.728440,-74.026490,40.728500,-74.026920,40.728500,-74.026930,40.728870,-74.031050,40.728930,-74.031380,40.729020,-74.031750,40.729060,-74.031870,40.729110,-74.032100,40.729230,-74.032470,40.729370,-74.033000,40.729410,-74.033140,40.729410,-74.033150,40.729640,-74.033960,40.729650,-74.033980,40.729790,-74.034510,40.729800,-74.034520,40.729800,-74.034530,40.729860,-74.034750,40.729860,-74.034760,40.729870,-74.034770,40.730010,-74.035290,40.730080,-74.035500,40.730140,-74.035670,40.730200,-74.035800,40.730270,-74.035940,40.730350,-74.036070,40.730380,-74.036120,40.730450,-74.036210,40.730460,-74.036230,40.730570,-74.036370,40.730710,-74.036500,40.730780,-74.036580,40.730840,-74.036670,40.730910,-74.036780,40.730970,-74.036880,40.731040,-74.037000,40.731100,-74.037100,40.731150,-74.037210,40.731220,-74.037360,40.731320,-74.037580,40.731340,-74.037630,40.731360,-74.037680,40.731380,-74.037740,40.731390,-74.037800,40.731540,-74.039420,40.731560,-74.039510,40.731580,-74.039710,40.731600,-74.039940,40.731700,-74.041100,40.731810,-74.042300,40.731850,-74.042760,40.731870,-74.042990,40.731910,-74.043400,40.731940,-74.043670,40.731970,-74.043980,40.731990,-74.044160,40.732010,-74.044420,40.732030,-74.044570,40.732040,-74.044720,40.732040,-74.044880,40.732050,-74.045030,40.732050,-74.045180,40.732040,-74.045340,40.732030,-74.045480,40.732020,-74.045620,40.732000,-74.045760,40.731970,-74.045990,40.731960,-74.046090,40.731960,-74.046090,40.731910,-74.046430,40.731880,-74.046650,40.731810,-74.047300,40.731740,-74.047820,40.731650,-74.048410,40.731620,-74.048560,40.731590,-74.048730,40.731360,-74.049980,40.731360,-74.049980,40.731290,-74.050150,40.731270,-74.050200,40.731250,-74.050230,40.731230,-74.050330,40.731220,-74.050440,40.731210,-74.050550,40.731200,-74.050650,40.731200,-74.050770,40.731190,-74.050860,40.731200,-74.050940,40.731200,-74.051050,40.731210,-74.051160,40.731220,-74.051250,40.731230,-74.051340,40.731240,-74.051420,40.731260,-74.051490,40.731270,-74.051560,40.731290,-74.051630,40.731310,-74.051700,40.731340,-74.051800,40.731370,-74.051860,40.731400,-74.051950,40.731450,-74.052060,40.731490,-74.052160,40.731540,-74.052240,40.731580,-74.052310,40.731630,-74.052380,40.731710,-74.052500,40.731790,-74.052680,40.731890,-74.052780,40.731980,-74.052870,40.732480,-74.053450,40.733440,-74.054550,40.734440,-74.055700,40.735190,-74.056570,40.737140,-74.058820,40.737860,-74.059640,40.737930,-74.059730,40.737980,-74.059790,40.738090,-74.059950,40.738200,-74.060110,40.738290,-74.060260,40.738360,-74.060390,40.738370,-74.060430,40.738430,-74.060530,40.738470,-74.060630,40.738530,-74.060740,40.738590,-74.060880,40.738650,-74.061000,40.738670,-74.061040,40.738720,-74.061160,40.738770,-74.061280,40.738820,-74.061410,40.738880,-74.061560,40.738920,-74.061690,40.738970,-74.061840,40.739000,-74.061920,40.739020,-74.062010,40.739080,-74.062240,40.739080,-74.062260,40.739100,-74.062360,40.739110,-74.062370,40.739200,-74.062790,40.739290,-74.063340,40.739320,-74.064290,40.739340,-74.064650,40.739320,-74.064660,40.739310,-74.064680,40.739310,-74.064690,40.739310,-74.064700,40.739300,-74.064760,40.739300,-74.064830,40.739300,-74.064840,40.739290,-74.064920,40.739290,-74.064930,40.739280,-74.065360,40.739260,-74.065770,40.739250,-74.066090,40.739180,-74.067220,40.739170,-74.067460,40.739160,-74.067610,40.739120,-74.068440,40.739120,-74.068440,40.739090,-74.069190,40.739070,-74.069560,40.739060,-74.069820,40.739030,-74.070420,40.739010,-74.070670,40.739000,-74.070900,40.738980,-74.071080,40.738970,-74.071300,40.738950,-74.071470,40.738910,-74.071730,40.738880,-74.071960,40.738830,-74.072300,40.738770,-74.072670,40.738570,-74.073800,40.738540,-74.073960,40.738540,-74.073970,40.738460,-74.074400,40.738430,-74.074560,40.738360,-74.074930,40.738350,-74.074980,40.738310,-74.075160,40.738260,-74.075410,40.738260,-74.075420,40.738240,-74.075540,40.738220,-74.075600,40.738210,-74.075680,40.738140,-74.076030,40.738040,-74.076550,40.737950,-74.077020,40.737820,-74.077690,40.737790,-74.077870,40.737700,-74.078330,40.737680,-74.078460,40.737660,-74.078710,40.737470,-74.079660,40.737300,-74.080530,40.737150,-74.081330,40.737020,-74.081990,40.736950,-74.082550,40.736770,-74.083610,40.736550,-74.084760,40.736440,-74.085240,40.736390,-74.085460,40.736200,-74.086390,40.735650,-74.089390,40.735450,-74.090820,40.735360,-74.091750,40.735230,-74.093790,40.735150,-74.094670,40.735030,-74.095900,40.734940,-74.097020,40.734860,-74.097820,40.734710,-74.099750,40.734680,-74.100080,40.734660,-74.100270,40.734660,-74.100520,40.734650,-74.101200,40.734640,-74.101460,40.734620,-74.102070,40.734620,-74.102080,40.734620,-74.102090,40.734620,-74.102250,40.734610,-74.102640,40.734580,-74.104510,40.734570,-74.104710,40.734570,-74.104860,40.734570,-74.104890,40.734570,-74.104930,40.734570,-74.105130,40.734570,-74.105440,40.734570,-74.105710,40.734590,-74.106450,40.734610,-74.106740,40.734610,-74.106830,40.734610,-74.106880,40.734620,-74.107180,40.734640,-74.107610,40.734650,-74.107750,40.734660,-74.108010,40.734660,-74.108050,40.734690,-74.108780,40.734710,-74.109440,40.734710,-74.109450,40.734720,-74.109620,40.734790,-74.111330,40.734820,-74.112180,40.734830,-74.112510,40.734830,-74.112530,40.734830,-74.112560,40.734860,-74.113210,40.734890,-74.113960,40.734910,-74.114600,40.734940,-74.115310,40.734970,-74.116090,40.735010,-74.117010,40.735030,-74.117830,40.735060,-74.118360,40.735100,-74.119520,40.735130,-74.120390,40.735160,-74.120930,40.735160,-74.121140,40.735170,-74.121360,40.735170,-74.121660,40.735170,-74.121810,40.735160,-74.121980,40.735160,-74.122090,40.735150,-74.122210,40.735150,-74.122330,40.735140,-74.122460,40.735120,-74.122600,40.735110,-74.122740,40.735100,-74.122870,40.735090,-74.122950,40.735080,-74.123020,40.735050,-74.123220,40.735030,-74.123400,40.735000,-74.123540,40.735000,-74.123560,40.734990,-74.123580,40.734970,-74.123690,40.734970,-74.123720,40.734960,-74.123770,40.734930,-74.123900,40.734880,-74.124150,40.734870,-74.124180,40.734860,-74.124210,40.734830,-74.124340,40.734830,-74.124350,40.734800,-74.124440,40.734800,-74.124450,40.734690,-74.124840,40.734690,-74.124840,40.734680,-74.124870,40.734660,-74.125040,40.734650,-74.125130,40.734650,-74.125200,40.734650,-74.125260,40.734650,-74.125370,40.734650,-74.125480,40.734660,-74.125550,40.734680,-74.125690,40.734710,-74.125860,40.734750,-74.126020,40.734780,-74.126120,40.734780,-74.126150,40.734790,-74.126170,40.734800,-74.126240,40.734810,-74.126270,40.734820,-74.126330,40.734840,-74.126420,40.734860,-74.126490,40.734870,-74.126560,40.734890,-74.126640,40.734900,-74.126720,40.734910,-74.126810,40.734920,-74.126900,40.734930,-74.126980,40.734940,-74.127070,40.734950,-74.127160,40.734960,-74.127250,40.734960,-74.127310,40.734970,-74.127380,40.734970,-74.127450,40.734970,-74.127510,40.734970,-74.127640,40.734970,-74.127780,40.734950,-74.128310,40.734940,-74.128380,40.734940,-74.128410,40.734940,-74.128460,40.734900,-74.129180,40.734780,-74.132380,40.734770,-74.132460,40.734750,-74.132540,40.734740,-74.132590,40.734730,-74.132640,40.734710,-74.132700,40.734690,-74.132760,40.734660,-74.132830,40.734640,-74.132890,40.734610,-74.132950,40.734590,-74.132990,40.734550,-74.133040,40.734520,-74.133090,40.734480,-74.133150,40.734420,-74.133220,40.734360,-74.133290,40.734180,-74.133510,40.734180,-74.133510,40.734150,-74.134250,40.734040,-74.136610,40.734040,-74.136650,40.734030,-74.137080,40.733960,-74.138610,40.733940,-74.139140,40.733940,-74.139340,40.733920,-74.139820,40.733920,-74.139860,40.733870,-74.140800,40.733840,-74.141460,40.733820,-74.141920,40.733780,-74.142650,40.733770,-74.142920,40.733750,-74.143540,40.733730,-74.143810,40.733710,-74.144440,40.733690,-74.144870,40.733670,-74.145320,40.733660,-74.145490,40.733660,-74.145520,40.733610,-74.145720,40.733490,-74.146120,40.733400,-74.146400,40.733260,-74.146950,40.733160,-74.147290,40.733000,-74.147850,40.732910,-74.148170,40.732860,-74.148310,40.732750,-74.148730,40.732730,-74.148830,40.732720,-74.148910,40.732720,-74.149000,40.732730,-74.149080,40.732700,-74.149860,40.732690,-74.150260,40.732710,-74.152170,40.732720,-74.152520,40.732720,-74.153410,40.732720,-74.154010,40.732720,-74.154100,40.732720,-74.155040,40.732720,-74.155190,40.732720,-74.155240,40.732710,-74.155260,40.732710,-74.155280,40.732710,-74.155690,40.732680,-74.156740,40.732670,-74.157230,40.732680,-74.157480,40.732670,-74.157690,40.732690,-74.158220,40.732710,-74.158570,40.732770,-74.158970,40.732830,-74.159310,40.732900,-74.159620,40.732960,-74.159970,40.733050,-74.160350,40.733080,-74.160530,40.733180,-74.160920,40.733180,-74.160920,40.733160,-74.161140,40.733140,-74.161240,40.733140,-74.161310,40.733150,-74.161370,40.733150,-74.161410,40.733160,-74.161460,40.733170,-74.161500,40.733190,-74.161540,40.733210,-74.161580,40.733240,-74.161740,40.733240,-74.161760,40.733240,-74.161780,40.733250,-74.161790,40.733250,-74.161820,40.733240,-74.161890,40.733290,-74.162120,40.733480,-74.162940,40.733690,-74.163770,40.733740,-74.163980,40.733770,-74.164130,40.733840,-74.164480,40.733940,-74.164920,40.734050,-74.165420,40.734080,-74.165540,40.734130,-74.165790,40.734140,-74.165840,40.734150,-74.165880,40.734160,-74.165960,40.734170,-74.166000,40.734260,-74.166450,40.734540,-74.167850,40.734590,-74.168090,40.734670,-74.168530,40.734740,-74.168920,40.734820,-74.169290,40.734850,-74.169520,40.734880,-74.169690,40.734940,-74.169930,40.735160,-74.170720,40.735500,-74.171870,40.735530,-74.171970,40.735550,-74.172050,40.735600,-74.172190,40.735650,-74.172370
38.9847,-77.09429,38.98442,-77.09424,38.98435,-77.09422,38.98426,-77.09419,38.9841,-77.09413,38.98372,-77.09398,38.9836,-77.09393,38.98324,-77.09378,38.98303,-77.09368,38.98267,-77.09349,38.98262,-77.09347,38.98261,-77.09346,38.9825,-77.09341,38.98221,-77.09328,38.98186,-77.09312,38.98132,-77.09285,38.98105,-77.09273,38.98062,-77.0925,38.98004,-77.0922,38.97925,-77.09182,38.97881,-77.09159,38.97847,-77.09141,38.97835,-77.09136,38.97775,-77.09107,38.97753,-77.09095,38.97723,-77.09081,38.97713,-77.09075,38.97656,-77.09047,38.97639,-77.09039,38.97584,-77.09024,38.97568,-77.0902,38.97547,-77.09015,38.97458,-77.08997,38.97365,-77.08979,38.97356,-77.08978,38.97283,-77.08967,38.97221,-77.08958,38.97131,-77.08943,38.97049,-77.0893,38.96957,-77.08917,38.96853,-77.08899,38.9684,-77.08897,38.9676,-77.08883,38.96738,-77.08877,38.96722,-77.08874,38.96692,-77.08866,38.96667,-77.08859,38.96623,-77.08844,38.96617,-77.08842,38.96599,-77.08834,38.96545,-77.0881,38.96537,-77.08805,38.96459,-77.08768,38.96447,-77.08762,38.96437,-77.08758,38.96377,-77.08729,38.9634,-77.0871,38.96277,-77.08677,38.96246,-77.08659,38.96192,-77.08632,38.96158,-77.08615,38.96149,-77.08611,38.96075,-77.0858,38.9607,-77.08569,38.96063,-77.08566,38.96015,-77.08541,38.96009,-77.08538,38.95974,-77.0852,38.9597,-77.08518,38.95964,-77.08515,38.95952,-77.0851,38.95949,-77.08508,38.95941,-77.08504,38.95904,-77.08485,38.95803,-77.08433,38.95712,-77.08387,38.95702,-77.08382,38.95617,-77.08338,38.95595,-77.08327,38.95531,-77.08294,38.9547,-77.08263,38.95461,-77.08259,38.95382,-77.08218,38.9534,-77.08197,38.95332,-77.08194,38.95323,-77.08188,38.95293,-77.08173,38.95252,-77.08152,38.95207,-77.08128,38.95147,-77.08097,38.95114,-77.0808,38.95111,-77.08079,38.95105,-77.08077,38.95088,-77.0807,38.9508,-77.08067,38.95071,-77.08064,38.9506,-77.08061,38.95048,-77.08058,38.95021,-77.08052,38.94988,-77.08041,38.9498,-77.0804,38.94975,-77.08039,38.94968,-77.08039,38.94927,-77.0803,38.94914,-77.08027,38.94887,-77.0802,38.94878,-77.08017,38.94875,-77.08016,38.94871,-77.08015,38.94863,-77.0801,38.94848,-77.08001,38.94842,-77.07997,38.94835,-77.07994,38.94807,-77.07977,38.94793,-77.07968,38.94774,-77.07957,38.94755,-77.07947,38.94747,-77.07943,38.94708,-77.07921,38.94688,-77.0791,38.94651,-77.0789,38.94651,-77.0789,38.94649,-77.07894,38.94646,-77.07897,38.94643,-77.07901,38.94641,-77.07903,38.94637,-77.07906,38.94634,-77.07908,38.94632,-77.0791,38.9463,-77.07911,38.94628,-77.07912,38.94625,-77.07913,38.94622,-77.07913,38.94619,-77.07913,38.94615,-77.07913,38.94611,-77.07912,38.94611,-77.07912,38.94603,-77.07913,38.94599,-77.07913,38.94595,-77.07914,38.94591,-77.07915,38.94588,-77.07916,38.94585,-77.07918,38.94582,-77.0792,38.94565,-77.0793,38.94562,-77.07932,38.94519,-77.07969,38.9451,-77.07981,38.9448,-77.08006,38.9447,-77.08014,38.94456,-77.08025,38.94435,-77.08041,38.94422,-77.08052,38.94367,-77.081,38.94348,-77.08116,38.94335,-77.08127,38.94318,-77.08141,38.9429,-77.08164,38.94288,-77.08166,38.94252,-77.08197,38.9424,-77.08207,38.94232,-77.08214,38.9422,-77.08224,38.94199,-77.08242,38.9418,-77.0826,38.94153,-77.08282,38.94142,-77.08292,38.94131,-77.08302,38.9412,-77.08311,38.94087,-77.08338,38.9408,-77.08345,38.94069,-77.08355,38.94035,-77.08385,38.9402,-77.08398,38.93996,-77.08418,38.93967,-77.08442,38.93932,-77.08471,38.9389,-77.08509,38.93883,-77.08514,38.93883,-77.08515,38.93876,-77.0852,38.93872,-77.08524,38.9385,-77.0854,38.9384,-77.08553,38.93838,-77.08556,38.93835,-77.0856,38.93833,-77.08563,38.9383,-77.08567,38.93827,-77.08573,38.93827,-77.08573,38.93828,-77.08577,38.93828,-77.08579,38.93828,-77.08579,38.93828,-77.08587,38.93828,-77.08591,38.93827,-77.08598,38.93826,-77.08603,38.93825,-77.08607,38.93824,-77.08611,38.93822,-77.08614,38.93821,-77.08616,38.9382,-77.08618,38.93819,-77.0862,38.93817,-77.08622,38.93816,-77.08624,38.93814,-77.08625,38.93813,-77.08626,38.93812,-77.08628,38.93809,-77.0863,38.93805,-77.08633,38.938,-77.08636,38.93797,-77.08637,38.93794,-77.08638,38.93791,-77.08639,38.93791,-77.08639,38.93788,-77.08639,38.93783,-77.08638,38.9378,-77.08636,38.93775,-77.08634,38.93772,-77.08632,38.93769,-77.0863,38.93764,-77.08627,38.93757,-77.08608,38.93757,-77.08608,38.93757,-77.08605,38.93756,-77.08602,38.93755,-77.08598,38.93755,-77.08598,38.93755,-77.08594,38.93754,-77.08589,38.93753,-77.08584,38.93753,-77.0858,38.93753,-77.08576,38.93753,-77.08571,38.93753,-77.08566,38.93753,-77.08562,38.93753,-77.08558,38.93752,-77.08554,38.93751,-77.08549,38.93749,-77.08543,38.93747,-77.08538,38.93745,-77.08534,38.93743,-77.0853,38.9374,-77.08525,38.93732,-77.08508,38.93704,-77.08472,38.93698,-77.08464,38.93697,-77.08462,38.93688,-77.08451,38.93674,-77.08431,38.93671,-77.08427,38.93669,-77.08424,38.93656,-77.08407,38.93645,-77.08392,38.93626,-77.08366,38.93608,-77.08341,38.93607,-77.08339,38.93565,-77.08282,38.93511,-77.08207,38.9351,-77.08206,38.93496,-77.08188,38.93471,-77.08154,38.93462,-77.08142,38.93415,-77.0808,38.934,-77.08058,38.93377,-77.08026,38.93355,-77.07994,38.93352,-77.0799,38.93344,-77.07978,38.93286,-77.079,38.93278,-77.07888,38.93253,-77.07854,38.93208,-77.07791,38.93196,-77.07776,38.93173,-77.07744,38.9315,-77.07712,38.93147,-77.07708,38.93146,-77.07707,38.9314,-77.07701,38.93131,-77.07687,38.93093,-77.07635,38.93018,-77.07534,38.92988,-77.07492,38.92975,-77.07473,38.92965,-77.0746,38.92932,-77.07413,38.92912,-77.07386,38.9291,-77.07383,38.92902,-77.07372,38.92891,-77.07358,38.92886,-77.07352,38.92876,-77.07338,38.92873,-77.07334,38.92861,-77.07318,38.92828,-77.07273,38.92777,-77.07201,38.92753,-77.07167,38.92744,-77.07155,38.92713,-77.07114,38.92695,-77.07089,38.92639,-77.07013,38.92617,-77.06984,38.92607,-77.0697,38.92585,-77.06939,38.92561,-77.06907,38.92534,-77.06869,38.92476,-77.06789,38.92471,-77.06783,38.92468,-77.06777,38.92464,-77.06771,38.92461,-77.06765,38.92459,-77.06761,38.92457,-77.06757,38.92454,-77.06751,38.92451,-77.06744,38.92449,-77.06737,38.92447,-77.06732,38.92445,-77.06726,38.92443,-77.0672,38.92441,-77.06714,38.9244,-77.06707,38.92439,-77.06702,38.92438,-77.06697,38.92437,-77.06692,38.92436,-77.06684,38.9243,-77.06661,38.92429,-77.06651,38.92428,-77.06636,38.92426,-77.06623,38.92424,-77.06614,38.92422,-77.06604,38.9242,-77.06594,38.92417,-77.06584,38.92415,-77.06575,38.92412,-77.06566,38.92409,-77.06556,38.92406,-77.06547,38.92401,-77.06535,38.92396,-77.06524,38.92393,-77.06516,38.92389,-77.06509,38.92385,-77.065,38.9238,-77.06492,38.92376,-77.06484,38.92371,-77.06475,38.92366,-77.06467,38.92362,-77.0646,38.92358,-77.06455,38.92352,-77.06447,38.92347,-77.0644,38.9234,-77.06433,38.92335,-77.06426,38.9233,-77.0642,38.92324,-77.06414,38.92318,-77.06408,38.9231,-77.06401,38.92305,-77.06396,38.92299,-77.06391,38.92293,-77.06386,38.92287,-77.06382,38.9228,-77.06376,38.92272,-77.06372,38.92264,-77.06367,38.92257,-77.06362,38.92249,-77.06358,38.9224,-77.06354,38.92233,-77.06351,38.92227,-77.06348,38.92219,-77.06345,38.92213,-77.06343,38.92206,-77.06341,38.92201,-77.0634,38.92195,-77.06338,38.92189,-77.06337,38.92183,-77.06336,38.92177,-77.06334,38.92172,-77.06333,38.92166,-77.06331,38.92159,-77.06328,38.92153,-77.06326,38.92146,-77.06321,38.9214,-77.06317,38.92134,-77.06314,38.92128,-77.0631,38.92121,-77.06297,38.92117,-77.06294,38.92112,-77.06288,38.92108,-77.06284,38.92104,-77.06279,38.92099,-77.06273,38.92091,-77.06262,38.91865,-77.05954,38.91847,-77.05929,38.91841,-77.0592,38.91837,-77.05914,38.91833,-77.05909,38.91831,-77.05905,38.91827,-77.05901,38.9182,-77.05892,38.91803,-77.05869,38.91779,-77.05839,38.91745,-77.05791,38.91709,-77.0574,38.91705,-77.05736,38.91703,-77.05732,38.91662,-77.05677,38.91551,-77.05525,38.91404,-77.05324,38.91362,-77.05266,38.91329,-77.05221,38.91271,-77.05142,38.91259,-77.05132,38.91252,-77.05123,38.9125,-77.0512,38.91248,-77.05117,38.91245,-77.05114,38.91243,-77.05112,38.9124,-77.05109,38.91237,-77.05107,38.91234,-77.05106,38.9123,-77.05105,38.91227,-77.05105,38.91225,-77.05105,38.91225,-77.05105,38.9122,-77.05104,38.91216,-77.05104,38.91212,-77.05104,38.91209,-77.05103,38.91206,-77.05102,38.91204,-77.05101,38.91201,-77.051,38.91199,-77.05098,38.91197,-77.05096,38.91194,-77.05093,38.91193,-77.05091,38.9119,-77.05088,38.91188,-77.05084,38.91187,-77.0508,38.91186,-77.05075,38.91185,-77.05072,38.91185,-77.0507,38.91185,-77.05066,38.91185,-77.05061,38.91186,-77.05056,38.91188,-77.0505,38.91189,-77.05046,38.91191,-77.05042,38.91191,-77.05039,38.91192,-77.05036,38.91193,-77.05033,38.91193,-77.05028,38.91194,-77.05022,38.91194,-77.05018,38.91193,-77.05013,38.91192,-77.05009,38.91191,-77.05005,38.91186,-77.04993,38.91181,-77.04969,38.91158,-77.049,38.91151,-77.04881,38.91147,-77.04869,38.91112,-77.0477,38.91075,-77.04663,38.91054,-77.04601,38.91043,-77.0457,38.91014,-77.04488,38.91009,-77.04473,38.90995,-77.04447,38.90991,-77.04435,38.90989,-77.04432,38.90987,-77.04429,38.90985,-77.04426,38.90979,-77.04421,38.90976,-77.04418,38.90973,-77.04416,38.90971,-77.04415,38.90969,-77.04414,38.90966,-77.04414,38.90963,-77.04413,38.90963,-77.04413,38.9096,-77.04413,38.90955,-77.04411,38.90952,-77.0441,38.90949,-77.04409,38.90946,-77.04407,38.90943,-77.04406,38.9094,-77.04404,38.90937,-77.04402,38.90934,-77.04399,38.90932,-77.04397,38.90929,-77.04394,38.90926,-77.04391,38.90924,-77.04387,38.90921,-77.04384,38.9092,-77.04381,38.90918,-77.04378,38.90917,-77.04374,38.90915,-77.04369,38.90914,-77.04364,38.90913,-77.04359,38.90912,-77.04355,38.90911,-77.0435,38.90911,-77.04345,38.90911,-77.0434,38.90912,-77.04335,38.90912,-77.04331,38.90913,-77.04327,38.90915,-77.04322,38.90917,-77.04315,38.90918,-77.0431,38.9092,-77.04306,38.90923,-77.04302,38.90925,-77.04298,38.90927,-77.04295,38.90928,-77.04292,38.90929,-77.04289,38.9093,-77.04286,38.90931,-77.04282,38.9093,-77.04278,38.9093,-77.04278,38.90931,-77.04265,38.90931,-77.04261,38.90931,-77.04258,38.90931,-77.04256,38.9093,-77.04253,38.90925,-77.04239,38.90919,-77.04212,38.90904,-77.0417,38.90852,-77.04021,38.90843,-77.03995,38.90826,-77.03946,38.90818,-77.03923,38.90812,-77.03906,38.90801,-77.03875,38.90793,-77.0385,38.90773,-77.03792,38.90763,-77.03765,38.90762,-77.03762,38.90754,-77.03741,38.90747,-77.03735,38.90731,-77.03709,38.90726,-77.03698,38.90726,-77.03698,38.90723,-77.03699,38.90716,-77.03691

Related

Read JSON value Coordinates in JavaScript & Plot to Google Map

I'm trying to Plot google map by getting the coordinates from database.
I've converted the data into JSON & trying to get locations from this JSON.
The JSON is:
[
{"GPS_COORDINATES":"29.392498333333332,71.69455666666666","TOWN":"T00031","LOCALITY":"107","SLOCALITY":"005","STATUS_DATE":"2017-09-16 00:00:00.000","TOTAL_SKU":"0"},
{"GPS_COORDINATES":"29.392564999999998,71.69445666666667","TOWN":"T00031","LOCALITY":"107","SLOCALITY":"005","STATUS_DATE":"2017-09-26 00:00:00.000","TOTAL_SKU":"1"},
{"GPS_COORDINATES":"29.400855,71.66181499999999","TOWN":"T00031","LOCALITY":"107","SLOCALITY":"005","STATUS_DATE":"2017-10-15 00:00:00.000","TOTAL_SKU":"1"}
]
I've tried the following code:
var ltlng = [];
var HiddenValue_gps_Coordinates = document.getElementById("<%=HF_gps_Coordinates.ClientID%>").value;
for (var i = 0; i < HiddenValue_gps_Coordinates.length; i++) {
var obj = HiddenValue_gps_Coordinates[i][0];
//ltlng.push(new google.maps.LatLng(obj.GPS_COORDINATES));
ltlng.push(new google.maps.LatLng(HiddenValue_gps_Coordinates[i][0]));
}
The JSON is set into the HiddenField by using C#
Reference to: JavaScript loop through json array? , I've tried the following code which is showing "undefined" in Console:
var HiddenValue_gps_Coordinates = document.getElementById("<%=HF_gps_Coordinates.ClientID%>").value;
for (var i = 0; i < HiddenValue_gps_Coordinates.length; i++)
{
var obj = HiddenValue_gps_Coordinates[i];
console.log(obj.GPS_COORDINATES);
ltlng.push(new google.maps.LatLng(HiddenValue_gps_Coordinates[i][0]));
}
This is not working for me.
Please Help
UPDATE:
The following code retrieved the coordinates very fine & print them to Console:
var HiddenValue_gps_Coordinates =JSON.parse(document.getElementById("<%=HF_gps_Coordinates.ClientID%>").value);
for (var i = 0; i < HiddenValue_gps_Coordinates.length; i++)
{
var obj = HiddenValue_gps_Coordinates[i];
console.log(obj.GPS_COORDINATES);
//The following is not working
ltlng.push(new google.maps.LatLng(obj.GPS_COORDINATES));
}
This is the snapshot of the Console:
But still I'm unable to plot the markers on Google map by using these Coordinates.
Please Help

You have to tell javascript that it is a JSON object with JSON.parse. Then you can access the properties like you would in code behind.
<script type="text/javascript">
var HiddenValue_gps_Coordinates = JSON.parse(document.getElementById("<%=HF_gps_Coordinates.ClientID%>").value);
for (var i = 0; i < HiddenValue_gps_Coordinates.length; i++) {
ltlng.push(new google.maps.LatLng(HiddenValue_gps_Coordinates[i].GPS_COORDINATES));
}
</script>
Maybe you have to split the coordinates since they are in one property of the json (not tested)
var obj = HiddenValue_gps_Coordinates[i].GPS_COORDINATES.split(",");
ltlng.push(new google.maps.LatLng(obj[0], obj[1]));
UPDATE
Here a complete working example
<asp:HiddenField ID="HF_gps_Coordinates" runat="server" />
<div id="map_canvas" class="map_canvas" style="width: 400px; height: 400px;"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXX&language=nl"></script>
<script type="text/javascript">
var myOptions = {
zoom: 11,
center: new google.maps.LatLng(29.9697393, 71.6469966),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var HiddenValue_gps_Coordinates = JSON.parse(document.getElementById("<%=HF_gps_Coordinates.ClientID%>").value);
for (var i = 0; i < HiddenValue_gps_Coordinates.length; i++) {
var obj = HiddenValue_gps_Coordinates[i].GPS_COORDINATES.split(",");
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(obj[0], obj[1]),
title: 'vdwwd'
});
}
</script>

First, check that the string is displayed correctly doing:console.log(HiddenValue_gps_Coordinates)
That value is a string, not a JavaScript object.
So you need to convert the JSON string into a JavaScript object by doing this:
var myObject = JSON.parse(HiddenValue_gps_Coordinates)
This should work :)

Removing GeoJson Layers from Google Maps

I'm trying to remove an array of GeoJson layers from Google Maps using the turf.js library for smoothing of the poly-lines.
I can create the layer fine and add them to the map, but when I try and remove the layers I get the following error code:
Uncaught TypeError: a.getId is not a function
To add the layers I do this, looping through my GeoJson file...
else if(Type==="LineString" && Pype==="isobar") {
//DO ISOBARS STUFF=================================
//GET LNG/LAT======================================
CorrLEN = dataID1.features[i].geometry.coordinates.length;
var Corrds =[];
var Corrs =[];
var LNGLAT ={};
var CORRS = new Object();
var x=0;
for (x=0;x<CorrLEN;x++){
var a = x-1;
LNGLAT = (dataID1.features[i].geometry.coordinates[x]);
Corrds.push(LNGLAT);
}
//=================================================================
//GET COLOUR INFO===================================================
var STCL = dataID1.features[i].properties.strokeColor;
var STOP = dataID1.features[i].properties.strokeOpacity;
var STSW = dataID1.features[i].properties.strokeWeight;
//=================================================================
LL = turf.linestring(Corrds);
curved = turf.bezier(LL,20000, 0.35);
curved.properties = {weight:STSW,color:STCL};
map.data.setStyle(function(feature) {
return {strokeWeight:feature.getProperty('weight'),
strokeColor: feature.getProperty('color')
};
});
IsoBars.push(curved);
I then use the following functions to add or remove the layers
//SHOW ISOBARS (works fine)
function ShowIsoBars() {
for (var i = 0; i < IsoBars.length; i++) {
map.data.addGeoJson(IsoBars[i]);
}}
//HIDE ISOBARS (Gets the error) Uncaught TypeError: a.getId is not a function
function HideIsoBars() {
for (var i = 0; i < IsoBars.length; i++) {
map.data.remove(IsoBars[i]);
}}
Many thanks in advance,

I found a solution by taking the new smoothed coordinates and then using them in a new google.maps.Polyline like so
var Path =[];
var x=0;
for (x=0;x<CorrLEN;x++){
Path.push(new google.maps.LatLng(curved.geometry.coordinates[x][1],curved.geometry.coordinates[x][0]));
}
var IsoBar = new google.maps.Polyline({
path: Path,
geodesic: true,
strokeColor: STCL,
strokeOpacity: STOP,
strokeWeight: STSW
});
IsoBars.push(IsoBar);
And then I can use the the following functions to show or hide the layers
function ShowIsoBars() {
for (var i = 0; i < IsoBars.length; i++) {
IsoBars[i].setMap(map);
}}
function HideIsoBars() {
for (var i = 0; i < IsoBars.length; i++) {
IsoBars[i].setMap(null);
}}

I found rather than removing all objects from the layer. It was easier to destroy and recreate the layer, which circumvents the error:
//Remove layer from map if it exists
if (mapLayer != null) {
mapLayer.setMap(null);
}
//create new layer
mapLayer = new window.google.maps.Data({ map: googleMap });

The route is not being plotted when the waypoints exceeded a certain amount

I first read a sets of coordinates in my local drive, then put them in
the xcoord and y coord to be start,waypts,destination which will be plotted on Google Map.
But i discovered that, once the coodinates exceeding a certain number,the route is not plotted anymore,but a road map without and route. changing travelmode also changing the number of effective waypoints. What can be done when i have >100 coordinates to be plotted? Also, i would like to change all the marker into default one but not the green one with letters on it.(After 26 points the marker become normal again.) Thank you very much.
I was first using the example provided in a question about 8 waypoints, which is here:
Plotting more than 8 waypoints in Google Maps v3
My code are as follow:
xcoord = [];
ycoord = [];
stops = [] ;
document.getElementById('file').onchange = function(){
alert('4');
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(progressEvent){
var lines = this.result.split('\n');
for(var line = 0; line < lines.length; line++){
//alert(lines[line]);
var split = [];
split = lines[line].split(',');
window.xcoord.push(split[0]);
window.ycoord.push(split[1]);
}
alert('finish');
}
reader.readAsText(file);
};
jQuery(function() {
document.getElementById('button').onclick = function initMap(){
for(i = 0;i<xcoord.length;i++){
window.stops.push({"Geometry":{"Latitude":xcoord[i],"Longitude":ycoord[i]}});}
var map = new window.google.maps.Map(document.getElementById("map"));
// new up complex objects before passing them around
var directionsDisplay = new window.google.maps.DirectionsRenderer();
var directionsService = new window.google.maps.DirectionsService();
Tour_startUp(stops);
window.tour.loadMap(map, directionsDisplay);
window.tour.fitBounds(map);
if (stops.length > 1)
window.tour.calcRoute(directionsService, directionsDisplay);}});
function Tour_startUp(stops) {
if (!window.tour) window.tour = {
updateStops: function (newStops) {
stops = newStops;
},
// map: google map object
// directionsDisplay: google directionsDisplay object (comes in empty)
loadMap: function (map, directionsDisplay) {
var myOptions = {
zoom: 13,
center: new window.google.maps.LatLng(22.2830, 114.200),
mapTypeId: window.google.maps.MapTypeId.ROADMAP
};
map.setOptions(myOptions);
directionsDisplay.setMap(map);
},
fitBounds: function (map) {
var bounds = new window.google.maps.LatLngBounds();
// extend bounds for each record
jQuery.each(stops, function (key, val) {
var myLatlng = new window.google.maps.LatLng(val.Geometry.Latitude, val.Geometry.Longitude);
bounds.extend(myLatlng);
});
map.fitBounds(bounds);
},
calcRoute: function (directionsService, directionsDisplay) {
var batches = [];
var itemsPerBatch = 10; // google API max = 10 - 1 start, 1 stop, and 8 waypoints
var itemsCounter = 0;
var wayptsExist = stops.length > 0;
while (wayptsExist) {
var subBatch = [];
var subitemsCounter = 0;
for (var j = itemsCounter; j < stops.length; j++) {
subitemsCounter++;
subBatch.push({
location: new window.google.maps.LatLng(stops[j].Geometry.Latitude, stops[j].Geometry.Longitude),
stopover: true
});
if (subitemsCounter == itemsPerBatch)
break;
}
itemsCounter += subitemsCounter;
batches.push(subBatch);
wayptsExist = itemsCounter < stops.length;
// If it runs again there are still points. Minus 1 before continuing to
// start up with end of previous tour leg
itemsCounter--;
}
// now we should have a 2 dimensional array with a list of a list of waypoints
var combinedResults;
var unsortedResults = [{}]; // to hold the counter and the results themselves as they come back, to later sort
var directionsResultsReturned = 0;
for (var k = 0; k < batches.length; k++) {
var lastIndex = batches[k].length - 1;
var start = batches[k][0].location;
var end = batches[k][lastIndex].location;
// trim first and last entry from array
var waypts = [];
waypts = batches[k];
waypts.splice(0, 1);
waypts.splice(waypts.length - 1, 1);
var request = {
origin: start,
destination: end,
waypoints: waypts,
optimizeWaypoints: true,
travelMode: window.google.maps.TravelMode.WALKING
};
(function (kk) {
directionsService.route(request, function (result, status) {
if (status == window.google.maps.DirectionsStatus.OK) {
var unsortedResult = { order: kk, result: result };
unsortedResults.push(unsortedResult);
directionsResultsReturned++;
if (directionsResultsReturned == batches.length) // we've received all the results. put to map
{
// sort the returned values into their correct order
unsortedResults.sort(function (a, b) { return parseFloat(a.order) - parseFloat(b.order); });
var count = 0;
for (var key in unsortedResults) {
if (unsortedResults[key].result != null) {
if (unsortedResults.hasOwnProperty(key)) {
if (count == 0) // first results. new up the combinedResults object
combinedResults = unsortedResults[key].result;
else {
// only building up legs, overview_path, and bounds in my consolidated object. This is not a complete
// directionResults object, but enough to draw a path on the map, which is all I need
combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(unsortedResults[key].result.routes[0].legs);
combinedResults.routes[0].overview_path = combinedResults.routes[0].overview_path.concat(unsortedResults[key].result.routes[0].overview_path);
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getNorthEast());
combinedResults.routes[0].bounds = combinedResults.routes[0].bounds.extend(unsortedResults[key].result.routes[0].bounds.getSouthWest());
}
count++;
}
}
}
directionsDisplay.setDirections(combinedResults);
var legs = combinedResults.routes[0].legs;
// alert(legs.length);
for (var i=0; i < legs.length;i++){
var markerletter = "A".charCodeAt(0);
markerletter += i;
markerletter = String.fromCharCode(markerletter);
createMarker(directionsDisplay.getMap(),legs[i].start_location,"marker"+i,"some text for marker "+i+"<br>"+legs[i].start_address,markerletter);
}
var i=legs.length;
var markerletter = "A".charCodeAt(0);
markerletter += i;
markerletter = String.fromCharCode(markerletter);
createMarker(directionsDisplay.getMap(),legs[legs.length-1].end_location,"marker"+i,"some text for the "+i+"marker<br>"+legs[legs.length-1].end_address,markerletter);
}
}
});
})(k);
}
}
};
}

The Snap to road thing is done via loading coordinates using PHP and then
using the google api. the code is as follow(for less than 200 points):
<!DOCTYPE html>
<?php
$stringJoin = "";
$stringJoin2 = "";
$index = 0;
$handle = fopen($_GET['fileName'], "r");
if ($handle) {
while (($line = fgets($handle)) !== false) {
$index++;
if ($index ==99 ){
$stringJoin2 .= trim($line)."|";
}
if ($index >= 100) {
$stringJoin2 .= trim($line)."|";
if($index == 200){
break;
}
continue;
}
$stringJoin .= trim($line)."|";
}
fclose($handle); }
echo $index;
echo "<br>";
$stringJoin = substr($stringJoin, 0, -1);
$stringJoin2 = substr($stringJoin2, 0, -1);
echo $stringJoin;
echo "<br>";
echo $stringJoin2; ?>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Roads API Demo</title>
<style>
html, body, #map {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
#bar {
width: 240px;
background-color: rgba(255, 255, 255, 0.75);
margin: 8px;
padding: 4px;
border-radius: 4px;
}
#autoc {
width: 100%;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="button" name="button" id="button">
<input type="file" name="file" id="file">
<div id="map"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script
src="https://maps.googleapis.com/maps/api/js?libraries=drawing,places"></script>
<script>
var apiKey = 'AIzaSyCk5PjtR_spPKrVowRS3A7I3IE4gX6Ctec';
var map;
var drawingManager;
var placeIdArray = [];
var placeIdArray2 = [];
var polylines = [];
var polylines2 = [];
var snappedCoordinates = [];
var snappedCoordinates2 = [];
document.getElementById('button').onclick = function initialize() {
alert("Start");
var mapOptions = {
zoom: 13,
center: {lat: 22.3030, lng: 114.200} };
map = new google.maps.Map(document.getElementById('map'), mapOptions);
runSnapToRoad();
runSnapToRoad2();}
// Snap a user-created polyline to roads and draw the snapped path
function runSnapToRoad() {
$.get('https://roads.googleapis.com/v1/snapToRoads', {
interpolate: true,
key: apiKey,
path: <?php echo '"'.$stringJoin.'"';?>}, function(data) {
processSnapToRoadResponse(data);
drawSnappedPolyline();
//getAndDrawSpeedLimits(); });}
// Store snapped polyline returned by the snap-to-road method.
function processSnapToRoadResponse(data) {
snappedCoordinates = [];
placeIdArray = [];
for (var i = 0; i < data.snappedPoints.length; i++) {
var latlng = new google.maps.LatLng(
data.snappedPoints[i].location.latitude,
data.snappedPoints[i].location.longitude);
snappedCoordinates.push(latlng);
placeIdArray.push(data.snappedPoints[i].placeId); }}
// Draws the snapped polyline (after processing snap-to-road response).
function drawSnappedPolyline() {
var snappedPolyline = new google.maps.Polyline({
path: snappedCoordinates,
strokeColor: 'black',
strokeWeight: 3 });
snappedPolyline.setMap(map);
polylines.push(snappedPolyline);}
</script>
<div id="bar">
<p class="auto"><input type="text" id="autoc"/></p>
<p><a id="clear" href="#">Click here</a> to clear map.</p>
</div>

Javascript array element undefined in Google Maps API [duplicate]

This question already has answers here:
Google Maps JS API v3 - Simple Multiple Marker Example
(15 answers)
Closed 8 years ago.
I am trying to add 3 markers to a map and when click on the markers, an info window will be shown. But every array element inside google.maps.event.addListener becomes undefined.
What's the problem?
<div id="map-canvas2" style="width:100%;height:500px"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var num;
var marker;
var infoWindow;
var infoText;
var lat;
var lng;
var map;
function initialize() {
num = 3;
marker = [];
infoWindow = [];
infoText = [];
lat = [];
lng = [];
infoText[0] = "test1";
lat[0] = 22.420845;
lng[0] = 114.208705;
infoText[1] = "test2";
lat[1] = 22.416026;
lng[1] = 114.209321;
infoText[2] = "test3";
lat[2] = 22.420841;
lng[2] = 114.205188;
for (var i = 0; i < num; i++) {
marker[i]=new google.maps.Marker({
position:new google.maps.LatLng(lat[i], lng[i]),
});
infoWindow[i] = new google.maps.InfoWindow({
content:"<div>"+infoText[i]+"</div>"
});
}
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng(22.420458,114.207482)
};
map = new google.maps.Map(document.getElementById('map-canvas2'), mapOptions);
for (var i = 0; i < num; i++) {
marker[i].setMap(map);
google.maps.event.addListener(marker[i], 'click', function() {
new google.maps.InfoWindow({
content:"<div>"+infoText[i]+"</div>"
}).open(map,marker[i]);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

The problem:
Each event listener is referencing the same variable i which gets incremented on each pass of the for loop. So after the loop is finished the value of i is 3, but none of your arrays have an index of 3 so you get undefined. Because each event handler is referencing the same i variable they are all referencing the same undefined array values.
The solution: Create a closure so that the event handler for each marker has a it's own variable instead sharing reference to single variable.
for (var i = 0; i < num; i++) {
marker[i].setMap(map);
google.maps.event.addListener(marker[i], 'click', (function(index) {
return function() {
new google.maps.InfoWindow({
content: "<div>"+infoText[index]+"</div>"
}).open(map, marker[index]);
}
})(i));
}
What we're doing is creating a Immediately-Invoked Function Expression "IIFE". The IIFE has a parameter called index which is set to the value of i. Because variables have function scope, index belongs only to this function. Inside the IIFE we return a function that will do the actual work when the event is triggered, but it will reference index not i.

Don't send indexed parameters to an anonymous function:
for (var i = 0; i < num; i++) {
var mrk = marker[i];
var iwContent = infoText[i];
mrk.setMap(map);
google.maps.event.addListener(mrk, 'click', function() {
new google.maps.InfoWindow({
content:"<div>"+iwContent+"</div>"
}).open(map,mrk);
});
}

Google map not getting centered

The google map i am using does not get centered about the mean point i have calculated.
The code for the initialization is given. The map appears to be zoomed out a lot and its center far off from the center i have calculated. The mean appears in the extreme top left of the map. What is the problem here?
I am displaying the map in Bootstrap modal.
function initializeMap()
{
var xMean = 0.0;
var yMean = 0.0;
for(var i=0;i<points.length;i++)
{
xMean += parseFloat(points[i][0]);
yMean += parseFloat(points[i][1]);
}
xMean /= parseFloat(points.length);
yMean /= parseFloat(points.length);
var myMean = new google.maps.LatLng(xMean, yMean);
var mapOptions = {
zoom:17,
center:myMean
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i<points.length;i++) {
path.push(new google.maps.LatLng(points[i][0],points[i][1]));
bounds.extend(path[i]);
};
map.fitBounds(bounds);
//Displaying the markers
var marker;
for (var i = 0; i < path.length; i++) {
marker = new google.maps.Marker({
position: path[i],
map: map
});
}
//Displaying the path
for (var i = 0; i<path.length-1; i++) {
var start = path[i];
var end = path[i+1];
requestDirections(start,end);
}
}

by using:
map.fitBounds(bounds);
map.setCenter(bounds.getCenter());
you seem to overwrite myMean coordinates

Develop Reference

JavaScript is the programming language of the Web.

Use GoogleMaps API from coordinates in a csv file in javascript - javascript

Related

Read JSON value Coordinates in JavaScript & Plot to Google Map

Removing GeoJson Layers from Google Maps

The route is not being plotted when the waypoints exceeded a certain amount

Javascript array element undefined in Google Maps API [duplicate]

Google map not getting centered

Categories

Resources