I have data that is being collected, although a GPS device is installed in the car. So the data that I have is mainly on the street / road. Each coordinate has a certain meaning. The data format is something like this.
lat | long | value
---------------------------------
12.979155 | 77.644925 | 6
---------------------------------
12.97916833 | 77.64493667 | 2
---------------------------------
12.97917167 | 77.64492167 | 8
My task is to draw these long-longs on a google map. This seems to be a fairly simple task when we talk about placing markers 10, 100 or 1000. But, as I mentioned above, we collect data using the drive, and the distance between two lat-long or two points will be in several places (say , 2-3 feet).
So, at the end of the survey I will have 90-100 thousand lats for a small part of the city and can reach up to a million for the whole city.
I tried adding a 9-10k token and its nice woking, but when I try to download 40k, 50k, 60k, it makes my browser very slow, and this is the error message I'm ending up with.
Uncaught RangeError: Maximum call stack size exceeded main.js:1
I talked a lot about this, but I could not find any example or tutorial that would force me to place 1 million markers using technologies that I know a little (this is asp.net). I found this example http://www.scribblemaps.com/markerComplex/ Jonathan Wagner, but I can not understand and implement it in my existing code, which looks like this.
// To get lat-long from the MSSQL server.
function PushValues(ParameterID) {
a = ParameterID.slice(5);
var CityID = $('#ddlCity').val().split('|');
$.ajax({
type: "POST",
url: "index.aspx/PushLatLong",
data: "{CityID:'" + CityID[0] + "',OperatorID:'" + $('#ddlOperator').val() + "',ParameterID:'" + ParameterID.slice(4) + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
cache: false,
success: function (response) {
GooglePlaces = response.d.split('#');
if (GooglePlaces != "Blank") {
HasValues = 1;
} else {
HasValues = 0;
}
},
Error: function (r) {
}
});
}
// Sets the values ββin the google map.
function PlaceValues() {
var options = { zoom: 3, center: new google.maps.LatLng(37.09, -95.71), mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById('map'), options);
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < GooglePlaces.length; i = i + 2) {
ltlg = new google.maps.LatLng(GooglePlaces[i], GooglePlaces[i + 1]);
var marker = new google.maps.Marker({
position: ltlg,
map: map,
title: 'Place number',
icon: "img/GoogleIcons/" + legendfirstvalue[1]
});
bounds.extend(ltlg);
}
map.fitBounds(bounds)
$('#DivLoadImage').hide();
}
, , , lat-long. . clustring , , , . clustring.
, . , .
- .