Hello frnds,
I am trying to populate a google map after searching a table with nearly
500000 rows in it, now the searching is based on lat and lng and i have
also used some relationships through laravel to which some other datas
which might be needed for the cause.
Angular function to search
$scope.searchMap = function(){ var lat = $scope.lat; var lng = $scope.lng;
var subcat = $scope.subcat;
var data = {
lat: lat,
lng: lng,
subcat: subcat,
};
var config = {headers: {
'Authorization': 'Basic
d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
'Accept': 'application/json;odata=verbose',
"X-Testing" : "testing"
}
};
$http.post(base_url+"/filter-cvr-by-latlng",data,config)
.then(function(response) {
$scope.map = new
google.maps.Map(document.getElementById('map'), {
center: { lat: 59.339025, lng: 18.065818 },
zoom: 12
});
gmapService.placeMarkersOnMap($scope.map,response.data);
});
};
This is mine gmapService.placeMarkersOnMap service
googleMapService.placeMarkersOnMap = function (map, data) { var markers =
[]; var div = document.getElementById('res'); div.innerHTML = "";
this.removeExistingMarkersFromTheMap(); //ensure <https://ensure/> first
that existing markers have been removed//console.log <https://console.log/>
("Called");
for (var i = 0; i < data.length; i++) {
var infowindow = new google.maps.InfoWindow();
if(data[i].client == 1)
{
//console.log("Seeker");
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i].lat,data[i].lng),
icon: base_url+"/assets/images/icon-pin.png",
draggable: true,
html :data[i].text,
});
//console.log(data[i].text);
google.maps.event.addListener(marker, 'click', function() {
//infoWindow.open(map, marker);
//console.log(marker.html);
infowindow.setContent(marker.html);
infowindow.open(map, this);
});
google.maps.event.addListener(marker, 'dragend', function
(event) {
document.getElementById("lat").value = this.getPosition().lat();
document.getElementById("lng").value = this.getPosition().lng();
var lat = this.getPosition().lat();
var lng = this.getPosition().lng();
var subcat = document.getElementById('subcat').value;
var data = {
lat: lat,
lng: lng,
subcat: subcat,
};
var config = {headers: {
'Authorization': 'Basic
d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
'Accept':
'application/json;odata=verbose',
"X-Testing" : "testing"
}
};
$http.post("http://fiksable.com/18793418/filter-cvr-by-latlng",data,config)
.then(function(response) {
var map = new
google.maps.Map(document.getElementById('map'), {
center: { lat:
59.339025, lng: 18.065818 },
zoom: 12
});
googleMapService.placeMarkersOnMap(map,response.data);
});
});
marker.setMap(map);
}
else{
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i].lat,data[i].lng),
html :data[i].text,
//icon: circle
});
google.maps.event.addListener(marker, 'click',
function() {
//infoWindow.open(map, marker);
//console.log(marker.html);
infowindow.setContent(marker.html);
infowindow.open(map, this);
});
var j = i+1;
var h = "<div class='info
info-"+j+"'>"+data[i].text+"<br/>Distance:- "+data[i].distance+"</div>";
div.innerHTML = div.innerHTML + h;
markers.push(marker);
}
}
google.maps.event.addListener(map, 'idle', function() {
var bounds = map.getBounds(),
count = 0;
//console.log(bounds);
for (var i = 0; i < markers.length; i++) {
var marker = markers[i],
infoPanel = $('.info-' + (i+1) ); //
array indexes start at zero, but not our class names :)
if(bounds.contains(marker.getPosition())===true) {
infoPanel.show();
count++;
}
else {
infoPanel.hide();
}
}
$('#infos h2 span').html(count);
});
google.maps.event.addListener(map,'center_changed',function() {
/*console.log(map.getCenter().lat());
console.log(map.getCenter().lng());*/
});
map.setCenter(marker.getPosition());
//console.log(marker);
var mcOptions = { gridSize: 60, zoom:8};
markerCluster = new MarkerClusterer(map, markers, mcOptions);
}
return googleMapService;
});
And the laravel API
Route::post('filter-cvr-by-latlng',function(){ $providers = []; $lat =
Input::get('lat'); $lng = Input::get('lng'); $subcat_id =
Input::get('subcat');
$upper_latitude = $lat + (.30); //Change .50 to small values
$lower_latitude = $lat - (.30); //Change .50 to small values
$upper_longitude = $lng + (.30); //Change .50 to small values
$lower_longitude = $lng - (.30); //Change .50 to small values
$cvr_relations =
TempCVRRelation::where(['subcat_id'=>$subcat_id])->with('cvr')->get();
if($cvr_relations)
{
foreach($cvr_relations as $cr)
{
if(($cr->cvr->latitude
>= $lower_latitude && $cr->cvr->longitude <= $upper_latitude) &&
($cr->cvr->longitude >= $lower_longitude && $cr->cvr->longitude <=
$upper_longitude))
{
$theta = $lng
- $cr->cvr->longitude;
$dist =
sin(deg2rad($lat)) * sin(deg2rad($cr->cvr->latitude)) + cos(deg2rad($lat)) *
cos(deg2rad($cr->cvr->latitude)) * cos(deg2rad($theta));
$dist =
acos($dist);
$dist =
rad2deg($dist);
$miles =
$dist * 60 * 1.1515;
$com_dis =
round(($miles * 1.609344),2);
$arr = [
'Id'
=> $cr->cvr->id,
'text'
=> $cr->cvr->company_name,
'lat'
=> $cr->cvr->latitude,
'lng'
=> $cr->cvr->longitude,
'client' => 0,
'distance' => $com_dis,
];
array_push($providers,$arr);
}
}
$seeker = [
'Id' => 0,
'text' => "Drag me",
'lat' => $lat,
'lng' => $lng,
'client' => 1,
];
array_push($providers,$seeker);
return json_encode($providers);
}
});
I am just sending the user lat,lng to the API and manipulating it and
searching the database with those manipulated lat and lng.
The main problem is it does giving back results...but the time it's taking
to process is huge It's nearly 15 sec,
I main concern is how to decrease this time.....
Is there something missing in my code....or i have to do something more in
the angular part...
Quick help needed...
Thank you
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
