I have 3 functions in javascript in my MVC.NET view that run in the wrong order, not from the top to the bottom.
We get cities from our table and push to an array. Also no URL:s are created for the next functions where we call open weather map API with
url+cit+key.Call open weather map with the new URL:s to get the temperature data.
The weather data from open weather map is supposed to go in info window and in the content, for it to print later when a marker is clicked.
The second functions run before the first one every time and we have tried a lot of different things but nothing is working. What can we do?
@model List<IDAbroad.Models.PeopleModell>
@ViewData["Listan"]
@ViewBag.message
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<div id="map" style="width:100%;height:600px"></div>
<script>
function myMap() {
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
var mapOptions = { center: myCenter, zoom: 2 };
var mapCanvas = document.getElementById("map");
var map = new google.maps.Map(mapCanvas, mapOptions);
var cities = [];
$(document).ready(function () {
var url = '/People/myJson';
var url2 = [];
var url;
var data;
var string = "";
var lat = [];
var lon = [];
var namn;
var i = 1;
var temp = [];
var description = [];
var wIcon = [];
$(function () {
$.getJSON(url, function (data) {
$.each(data, function () {
//cities[i] = this['City'];
cities.push(this['City']);
url2.push('http://api.openweathermap.org/data/2.5/weather?q=' + this['City'] + '&APPID=MYKEY');
console.log("Första loopen: " + this['City']);
i++;
});
console.log("Hela listan med städer: " + cities + '<br>' + " HEEEEEEEEJ" + url2 + '<br>');
});
alert("Ska va etta");
getCities();
});
function getCities() {
$(function () {
console.log("Url 2 längd: " + url2.length);
for (var i = 1; i <= url2.length; i++) {
alert("kom in");
var url3 = url2[i]
$.getJSON(url3, function (data) {
$.each(data, function () {
temp[i] = this['main.temp'];
description[i] = this['description'];
wIcon[i] = this['icon'];
console.log("temperatur: " + temp[i]);
})
});
}
});
};
var i = 1;
$(function () {
$.getJSON(url, function (data) {
$.each(data, function () {
namn = this['Firstname'];
console.log("Position X: " + lat[i]);
console.log("Position Y: " + lon[i]);
var peoplePosition = new google.maps.LatLng(this['Latitude'], this['Longitude']);
var ico = {
url: "/profileImg/" + i + ".jpg",
scaledSize: new google.maps.Size(35,50)
}
var marker = new google.maps.Marker({
position: peoplePosition,
icon: ico
})
i++;
marker.setMap(map);
var content = this['Firstname'] + '<br>Stad: ' + this['City'] + '<br>Temp: ' + temp[i] + '<br>' + description[i];
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker, 'click', (function (marker, content, infowindow) {
return function () {
infowindow.setContent(content);
infowindow.open(map, marker);
};
i++
})(marker,content,infowindow));
})
})
});
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MYSECONDKEY">
</script>
