Read JSON value Coordinates in JavaScript & Plot to Google Map - javascript

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 :)

Related

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 });

Use GoogleMaps API from coordinates in a csv file in 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

How would I go about iterating over this JSON data

I'm pulling in the below json data from a database using ajax.
{"route":[{"latitude":-27.38851,"longitude":153.11606},{"latitude":-27.47577,"longitude":153.01693}]}
How would I got about iterating over it to get lat/long pairs to plot on a map?

Assign the JSON data to a variable, and loop through the route object like below:
var j = {"route":[{"latitude":-27.38851,"longitude":153.11606},{"latitude":-27.47577,"longitude":153.01693}]}
for(i=0; i<=j.route.length; i++){
var thisRoute = j.route[i];
}

Give it a try:
var j = {"route":[{"latitude":-27.38851,"longitude":153.11606},{"latitude":-27.47577,"longitude":153.01693}]};
for(var i= 0,len=j.route.length; i<len; i++){
var lat = j.route[i].latitude;
var long = j.route[i].longitude;
console.log(lat+' '+long);
}

var o = {"route":[{"latitude":-27.38851,"longitude":153.11606},{"latitude":-27.47577,"longitude":153.01693}]};
var i = 0;
var lat, long;
var len=o.route.length;
for(i,i<len; i++){
lat = o.route[i].latitude;
long = o.route[i].longitude;
console.log(lat+' '+long);
}

Here's a full implementation of what you're trying to achieve:
JSFIddle with a map
function createMarker(options) {
var marker = new google.maps.Marker(options);
return marker;
}
for (i = 0; i < data.route.length; i++) {
createMarker({
position: new google.maps.LatLng(data.route[i].latitude, data.route[i].longitude),
map: map
});

Adding destination lat and lon to destinations variable distancematricx API Success and Fail

I'm trying to get the lat and lon from a Json encoded file for use as destinations for the distance Matrix API rather than add var destinationA = new google.maps.LatLng(??.????, ???.?????); multiple times.
I thought I managed it, as both ways seem to produce the same variable destinations when viewed, yet method two produces an error Uncaught TypeError: a.lat is not a function
This is method one which gives var destination a length of 7:
var destinationA = new google.maps.LatLng(13.7373393, 100.5558883);
var destinationB = new google.maps.LatLng(13.735132, 100.55611199999998);
var destinationC = new google.maps.LatLng(13.736953, 100.55819300000007);
var destinationD = new google.maps.LatLng(13.736244, 100.55694100000005);
var destinationE = new google.maps.LatLng(13.736166, 100.557203);
var destinationF = new google.maps.LatLng(13.738747, 100.55587700000001);
var destinationG = new google.maps.LatLng(13.733558, 100.56020699999999);
var destinations = [destinationA,destinationB,destinationC,destinationD,destinationE,destinationF,destinationG];
works great, will return the distances for each from a given centre point on google map.
Method two:
This is method Two which gives var destination a length of 1, which I am stuck on finding out why its a single length and not 7 as above:
var location_lat_lon = <?php echo json_encode( $properties_data ); ?>;
var destinations = []
var first = true;
for (var i=0; i < location_lat_lon.length; i++) {
var sep = first ? '' : ',';
var lat = location_lat_lon[i].latitude;
var lon = location_lat_lon[i].longitude;
var destination1 = new google.maps.LatLng(lat, lon);
var destinations = [destinations+sep+destination1] ;
first = false;
}
which returns exactly the same result when viewing the variable destinations, yet this returns the error Uncaught TypeError: a.lat is not a function.
Any advice or guidance?
Is it not possible to pass destinations this way to the calculateDistances function?
Thanks in Advance :)

Try this:
var location_lat_lon = <?php echo json_encode( $properties_data ); ?>;
var destinations = []
for (var i=0; i < location_lat_lon.length; i++) {
var lat = location_lat_lon[i].latitude;
var lon = location_lat_lon[i].longitude;
var destination1 = new google.maps.LatLng(parseFloat(lat), parseFloat(lon));
destinations.push(destination1);
}

If data is null, dont show

This is my code. I get the data from xml. What I want is:
if a piece of data is null, don't show that row. How can I do it?
downloadUrl("xml/cat.xml", function(doc) {
var xml = xmlParse(doc);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var kWa = markers[i].getAttribute("kWa");
var html = 'rows here ';
Sorry for wrong question..
i want to hide here
var html = '
id='+id+', kwa='+kwa+' // if id is null how can hide item in here..?
';

You can do this with if checks like:
if(markers[i].getAttribute("lat") != NULL) // or "NULL" as a string if thats what is returned."
var lat = parseFloat(markers[i].getAttribute("lat));
Or you could put it in a try - catch statement:
for (//codes){
try{
//try parsing here
}catch(e){
if(e) // do something with the error
}
Which has the advantage of letting you do something for each error message. But the disadvantage of being slow. (though not as slow as it used to be in javascript)

Categories

Resources