Problem getting an array of latitude longitude using polyline to draw a path
0
I want to draw a path using Polyline by waypoints (lat,lng) saved in sql server database.When I set waypoints manually it works fine and draws a rout but when I want to get latitude and longitude from database it doesn't work.I don't get any kind of errors just doesn't work,I don't have any points or markers and doesn't draw path.I don't know why and I'm totally confused about that.Here is my code.
<html>
<head>
<meta charset="UTF-8" />
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="map" style="width:1200px; height: 600px;"></div>
</body>
</html>
<script>
function initialize()
var mapOptions =
zoom: 3,
center: new google.maps.LatLng(31.909786, 54.365912),
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
//var handyCoordinate = [
// lat: 35.12394860000, lng: 50.95550740000 ,
// lat: 35.12470560000, lng: 50.95666690000 ,
// lat: 35.12550200000, lng: 50.95783140000 ,
// lat: 35.12628050000, lng: 50.95889470000
//];
//console.log(handyCoordinates);
var Coordinates = ;
$.ajax(
url: '/Home/GetPath',
type: 'Post',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function (data)
$.each(data, function (index, value)
Coordinates.push(new google.maps.LatLng(value.lat, value.lng));
);
,
error: function ()
);
var polyline = new google.maps.Polyline(
path: Coordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
);
for (var i = 0; i < polyline.getPath().getLength(); i++)
var marker = new google.maps.Marker(
//icon:
//url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
//size: new google.maps.Size(7, 7),
//anchor: new google.maps.Point(4, 4)
//,
position: polyline.getPath().getAt(i),
title: polyline.getPath().getAt(i).toUrlValue(6),
map: map,
);
polyline.setMap(map);
google.maps.event.addDomListener(window, 'load', initialize);
And here is my controller in rest of my mvc project
[HttpPost]
public JsonResult GetPath()
{
var q = TrackDb.TestTrackingTable_
.Where(x => x.DoccNo == 4844)
.Select(s => new
lat = s.latitude,
lng = s.longitude
)
.ToList();
This is my viewmodel
public class TrackHisViewModel
public int Id get; set;
public int PointStep get; set;
public int DoccNo get; set;
public decimal Longitude get; set;
public decimal Latitude get; set;
my database table
my database table
javascript c# asp.net-mvc google-maps polyline
asked Nov 13 '18 at 11:02
siavash bashirisiavash bashiri
97
add a comment |
0
I want to draw a path using Polyline by waypoints (lat,lng) saved in sql server database.When I set waypoints manually it works fine and draws a rout but when I want to get latitude and longitude from database it doesn't work.I don't get any kind of errors just doesn't work,I don't have any points or markers and doesn't draw path.I don't know why and I'm totally confused about that.Here is my code.
<html>
<head>
<meta charset="UTF-8" />
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="map" style="width:1200px; height: 600px;"></div>
</body>
</html>
<script>
function initialize()
var mapOptions =
zoom: 3,
center: new google.maps.LatLng(31.909786, 54.365912),
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
//var handyCoordinate = [
// lat: 35.12394860000, lng: 50.95550740000 ,
// lat: 35.12470560000, lng: 50.95666690000 ,
// lat: 35.12550200000, lng: 50.95783140000 ,
// lat: 35.12628050000, lng: 50.95889470000
//];
//console.log(handyCoordinates);
var Coordinates = ;
$.ajax(
url: '/Home/GetPath',
type: 'Post',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function (data)
$.each(data, function (index, value)
Coordinates.push(new google.maps.LatLng(value.lat, value.lng));
);
,
error: function ()
);
var polyline = new google.maps.Polyline(
path: Coordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
);
for (var i = 0; i < polyline.getPath().getLength(); i++)
var marker = new google.maps.Marker(
//icon:
//url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
//size: new google.maps.Size(7, 7),
//anchor: new google.maps.Point(4, 4)
//,
position: polyline.getPath().getAt(i),
title: polyline.getPath().getAt(i).toUrlValue(6),
map: map,
);
polyline.setMap(map);
google.maps.event.addDomListener(window, 'load', initialize);
And here is my controller in rest of my mvc project
[HttpPost]
public JsonResult GetPath()
{
var q = TrackDb.TestTrackingTable_
.Where(x => x.DoccNo == 4844)
.Select(s => new
lat = s.latitude,
lng = s.longitude
)
.ToList();
This is my viewmodel
public class TrackHisViewModel
public int Id get; set;
public int PointStep get; set;
public int DoccNo get; set;
public decimal Longitude get; set;
public decimal Latitude get; set;
my database table
my database table
javascript c# asp.net-mvc google-maps polyline
asked Nov 13 '18 at 11:02
siavash bashirisiavash bashiri
97
Could you try to call your api with Postman and tell us about the results?
– Péter Csajtai
Nov 13 '18 at 11:06
I think handyCoordinate is working .But from database lat long is not working
– LDS
Nov 13 '18 at 11:22
Thank you my friends.My problem solved.
– siavash bashiri
Nov 13 '18 at 11:31
add a comment |
0
0
0
I want to draw a path using Polyline by waypoints (lat,lng) saved in sql server database.When I set waypoints manually it works fine and draws a rout but when I want to get latitude and longitude from database it doesn't work.I don't get any kind of errors just doesn't work,I don't have any points or markers and doesn't draw path.I don't know why and I'm totally confused about that.Here is my code.
<html>
<head>
<meta charset="UTF-8" />
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="map" style="width:1200px; height: 600px;"></div>
</body>
</html>
<script>
function initialize()
var mapOptions =
zoom: 3,
center: new google.maps.LatLng(31.909786, 54.365912),
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
//var handyCoordinate = [
// lat: 35.12394860000, lng: 50.95550740000 ,
// lat: 35.12470560000, lng: 50.95666690000 ,
// lat: 35.12550200000, lng: 50.95783140000 ,
// lat: 35.12628050000, lng: 50.95889470000
//];
//console.log(handyCoordinates);
var Coordinates = ;
$.ajax(
url: '/Home/GetPath',
type: 'Post',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function (data)
$.each(data, function (index, value)
Coordinates.push(new google.maps.LatLng(value.lat, value.lng));
);
,
error: function ()
);
var polyline = new google.maps.Polyline(
path: Coordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
);
for (var i = 0; i < polyline.getPath().getLength(); i++)
var marker = new google.maps.Marker(
//icon:
//url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
//size: new google.maps.Size(7, 7),
//anchor: new google.maps.Point(4, 4)
//,
position: polyline.getPath().getAt(i),
title: polyline.getPath().getAt(i).toUrlValue(6),
map: map,
);
polyline.setMap(map);
google.maps.event.addDomListener(window, 'load', initialize);
And here is my controller in rest of my mvc project
[HttpPost]
public JsonResult GetPath()
{
var q = TrackDb.TestTrackingTable_
.Where(x => x.DoccNo == 4844)
.Select(s => new
lat = s.latitude,
lng = s.longitude
)
.ToList();
This is my viewmodel
public class TrackHisViewModel
public int Id get; set;
public int PointStep get; set;
public int DoccNo get; set;
public decimal Longitude get; set;
public decimal Latitude get; set;
my database table
my database table
javascript c# asp.net-mvc google-maps polyline
asked Nov 13 '18 at 11:02
siavash bashirisiavash bashiri
97
I want to draw a path using Polyline by waypoints (lat,lng) saved in sql server database.When I set waypoints manually it works fine and draws a rout but when I want to get latitude and longitude from database it doesn't work.I don't get any kind of errors just doesn't work,I don't have any points or markers and doesn't draw path.I don't know why and I'm totally confused about that.Here is my code.
<html>
<head>
<meta charset="UTF-8" />
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="map" style="width:1200px; height: 600px;"></div>
</body>
</html>
<script>
function initialize()
var mapOptions =
zoom: 3,
center: new google.maps.LatLng(31.909786, 54.365912),
mapTypeId: google.maps.MapTypeId.ROADMAP
;
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
//var handyCoordinate = [
// lat: 35.12394860000, lng: 50.95550740000 ,
// lat: 35.12470560000, lng: 50.95666690000 ,
// lat: 35.12550200000, lng: 50.95783140000 ,
// lat: 35.12628050000, lng: 50.95889470000
//];
//console.log(handyCoordinates);
var Coordinates = ;
$.ajax(
url: '/Home/GetPath',
type: 'Post',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
success: function (data)
$.each(data, function (index, value)
Coordinates.push(new google.maps.LatLng(value.lat, value.lng));
);
,
error: function ()
);
var polyline = new google.maps.Polyline(
path: Coordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
);
for (var i = 0; i < polyline.getPath().getLength(); i++)
var marker = new google.maps.Marker(
//icon:
//url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
//size: new google.maps.Size(7, 7),
//anchor: new google.maps.Point(4, 4)
//,
position: polyline.getPath().getAt(i),
title: polyline.getPath().getAt(i).toUrlValue(6),
map: map,
);
polyline.setMap(map);
google.maps.event.addDomListener(window, 'load', initialize);
And here is my controller in rest of my mvc project
[HttpPost]
public JsonResult GetPath()
{
var q = TrackDb.TestTrackingTable_
.Where(x => x.DoccNo == 4844)
.Select(s => new
lat = s.latitude,
lng = s.longitude
)
.ToList();
This is my viewmodel
public class TrackHisViewModel
public int Id get; set;
public int PointStep get; set;
public int DoccNo get; set;
public decimal Longitude get; set;
public decimal Latitude get; set;
my database table
my database table
javascript c# asp.net-mvc google-maps polyline
javascript c# asp.net-mvc google-maps polyline
asked Nov 13 '18 at 11:02
siavash bashirisiavash bashiri
97
asked Nov 13 '18 at 11:02
siavash bashirisiavash bashiri
97
edited Nov 20 '18 at 5:13
siavash bashiri
asked Nov 13 '18 at 11:02
siavash bashirisiavash bashiri
97
asked Nov 13 '18 at 11:02
siavash bashirisiavash bashiri
97
asked Nov 13 '18 at 11:02
siavash bashirisiavash bashiri
97
97
Could you try to call your api with Postman and tell us about the results?
– Péter Csajtai
Nov 13 '18 at 11:06
I think handyCoordinate is working .But from database lat long is not working
– LDS
Nov 13 '18 at 11:22
Thank you my friends.My problem solved.
– siavash bashiri
Nov 13 '18 at 11:31
add a comment |
Could you try to call your api with Postman and tell us about the results?
– Péter Csajtai
Nov 13 '18 at 11:06
I think handyCoordinate is working .But from database lat long is not working
– LDS
Nov 13 '18 at 11:22
Thank you my friends.My problem solved.
– siavash bashiri
Nov 13 '18 at 11:31
Could you try to call your api with Postman and tell us about the results?
– Péter Csajtai
Nov 13 '18 at 11:06
Could you try to call your api with Postman and tell us about the results?
– Péter Csajtai
Nov 13 '18 at 11:06
I think handyCoordinate is working .But from database lat long is not working
– LDS
Nov 13 '18 at 11:22
I think handyCoordinate is working .But from database lat long is not working
– LDS
Nov 13 '18 at 11:22
Thank you my friends.My problem solved.
– siavash bashiri
Nov 13 '18 at 11:31
Thank you my friends.My problem solved.
– siavash bashiri
Nov 13 '18 at 11:31
add a comment |
1 Answer
1
active
oldest
votes
0
Ajax calls are asynchronous and the navigator won't wait for the call to end before executing the following code.
That means that your 'Coordinates' array may be empty when initializing the polyline.
You can try to use async/await to fix your problem, or move the rest of the code in the success method of the call as well.
answered Nov 13 '18 at 11:12
qwsdqwsd
10913
Thank you qwsd.My problem solved by putting async : false
– siavash bashiri
Nov 13 '18 at 11:28
Maybe you could make your answer a bit more useful by showing how you would do that?
– MrUpsidown
Nov 13 '18 at 11:41
Just write this code in ajax ==> async: false
– siavash bashiri
Nov 13 '18 at 14:53
when async is true the request which goes toward server by script doesn't wait for reply and continue execution ,accordingly the array will remain empty when the page want to show content.
– siavash bashiri
Nov 13 '18 at 15:14
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53279591%2fproblem-getting-an-array-of-latitude-longitude-using-polyline-to-draw-a-path%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Ajax calls are asynchronous and the navigator won't wait for the call to end before executing the following code.
That means that your 'Coordinates' array may be empty when initializing the polyline.
You can try to use async/await to fix your problem, or move the rest of the code in the success method of the call as well.
answered Nov 13 '18 at 11:12
qwsdqwsd
10913
Thank you qwsd.My problem solved by putting async : false
– siavash bashiri
Nov 13 '18 at 11:28
Maybe you could make your answer a bit more useful by showing how you would do that?
– MrUpsidown
Nov 13 '18 at 11:41
Just write this code in ajax ==> async: false
– siavash bashiri
Nov 13 '18 at 14:53
when async is true the request which goes toward server by script doesn't wait for reply and continue execution ,accordingly the array will remain empty when the page want to show content.
– siavash bashiri
Nov 13 '18 at 15:14
add a comment |
0
Ajax calls are asynchronous and the navigator won't wait for the call to end before executing the following code.
That means that your 'Coordinates' array may be empty when initializing the polyline.
You can try to use async/await to fix your problem, or move the rest of the code in the success method of the call as well.
answered Nov 13 '18 at 11:12
qwsdqwsd
10913
Thank you qwsd.My problem solved by putting async : false
– siavash bashiri
Nov 13 '18 at 11:28
Maybe you could make your answer a bit more useful by showing how you would do that?
– MrUpsidown
Nov 13 '18 at 11:41
Just write this code in ajax ==> async: false
– siavash bashiri
Nov 13 '18 at 14:53
when async is true the request which goes toward server by script doesn't wait for reply and continue execution ,accordingly the array will remain empty when the page want to show content.
– siavash bashiri
Nov 13 '18 at 15:14
add a comment |
0
0
0
Ajax calls are asynchronous and the navigator won't wait for the call to end before executing the following code.
That means that your 'Coordinates' array may be empty when initializing the polyline.
You can try to use async/await to fix your problem, or move the rest of the code in the success method of the call as well.
answered Nov 13 '18 at 11:12
qwsdqwsd
10913
Ajax calls are asynchronous and the navigator won't wait for the call to end before executing the following code.
That means that your 'Coordinates' array may be empty when initializing the polyline.
You can try to use async/await to fix your problem, or move the rest of the code in the success method of the call as well.
answered Nov 13 '18 at 11:12
qwsdqwsd
10913
answered Nov 13 '18 at 11:12
qwsdqwsd
10913
answered Nov 13 '18 at 11:12
qwsdqwsd
10913
answered Nov 13 '18 at 11:12
qwsdqwsd
10913
10913
Thank you qwsd.My problem solved by putting async : false
– siavash bashiri
Nov 13 '18 at 11:28
Maybe you could make your answer a bit more useful by showing how you would do that?
– MrUpsidown
Nov 13 '18 at 11:41
Just write this code in ajax ==> async: false
– siavash bashiri
Nov 13 '18 at 14:53
when async is true the request which goes toward server by script doesn't wait for reply and continue execution ,accordingly the array will remain empty when the page want to show content.
– siavash bashiri
Nov 13 '18 at 15:14
add a comment |
Thank you qwsd.My problem solved by putting async : false
– siavash bashiri
Nov 13 '18 at 11:28
Maybe you could make your answer a bit more useful by showing how you would do that?
– MrUpsidown
Nov 13 '18 at 11:41
Just write this code in ajax ==> async: false
– siavash bashiri
Nov 13 '18 at 14:53
when async is true the request which goes toward server by script doesn't wait for reply and continue execution ,accordingly the array will remain empty when the page want to show content.
– siavash bashiri
Nov 13 '18 at 15:14
Thank you qwsd.My problem solved by putting async : false
– siavash bashiri
Nov 13 '18 at 11:28
Thank you qwsd.My problem solved by putting async : false
– siavash bashiri
Nov 13 '18 at 11:28
Maybe you could make your answer a bit more useful by showing how you would do that?
– MrUpsidown
Nov 13 '18 at 11:41
Maybe you could make your answer a bit more useful by showing how you would do that?
– MrUpsidown
Nov 13 '18 at 11:41
Just write this code in ajax ==> async: false
– siavash bashiri
Nov 13 '18 at 14:53
Just write this code in ajax ==> async: false
– siavash bashiri
Nov 13 '18 at 14:53
when async is true the request which goes toward server by script doesn't wait for reply and continue execution ,accordingly the array will remain empty when the page want to show content.
– siavash bashiri
Nov 13 '18 at 15:14
when async is true the request which goes toward server by script doesn't wait for reply and continue execution ,accordingly the array will remain empty when the page want to show content.
– siavash bashiri
Nov 13 '18 at 15:14
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53279591%2fproblem-getting-an-array-of-latitude-longitude-using-polyline-to-draw-a-path%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Could you try to call your api with Postman and tell us about the results?
– Péter Csajtai
Nov 13 '18 at 11:06
I think handyCoordinate is working .But from database lat long is not working
– LDS
Nov 13 '18 at 11:22
Thank you my friends.My problem solved.
– siavash bashiri
Nov 13 '18 at 11:31