Google map is taking too long to load - google-maps

Question

I am opening a google map on page load and add pointers to it on the basis of data fetched from the database. But the problem here is it takes approx 3-4 minutes to load, cpu utilization reaches to 100% and RAM is also consumed a lot. Below is the code:
<div class="col-md-12">
<div class="row">
<div class="col-md-10">
<div id="map" style='height: 85vh;'></div>
</div>
</div>
</div>
<script>
var infowindows = [];
var notification_location, cirle_area_for_notification = null;
function initMap() {
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
// center: {lat: markers[0].lat, lng: markers[0].lng},
center: {lat: -33.826668, lng: 151.231526},
type:['(regions)'],
componentRestrictions: {
country: ['aus']
}
});
var icon, content = '';
<% #users.find_in_batches(batch_size: 200) do |users| %>
<% users.each do |user| %>
<% if user.staff? %>
icon = "<%= image_url 'blue.svg' %>";
content = ''
+ 'Name: <b></b></br>'
+ 'Role: <b>staff</b></br>'
+ 'Phone Number: <b><%= user.phone_number %></b></br>'
+ 'Qualification: <b><%= user.qualification_levels&.last&.name %></b></br>'
+ 'Radius: <b><%= user.address.radius %></b></br>'
+ 'Centers in same zone: <b><%= user.staff_active_centers_in_same_zones.pluck(:user_id) %></b></br>';
<% else %>
icon = "<%= image_url 'orange.svg' %>";
content = ''
+ 'Name: <b><%= user.user_name %></b></br>'
+ 'Role: <b>center</b></br>'
+ 'Phone Number: <b><%= user.phone_number %></b></br>'
+ 'Staffs in same zone: <b><%= user.center_active_staffs_in_same_zones.size %></b></br>';
<% end %>
var infowindow = new google.maps.InfoWindow({
content: content
});
infowindows.push(infowindow);
var marker = new google.maps.Marker(
{
position: {lat: <%= user.address.latitude %>, lng: <%= user.address.longitude %>},
map: map,
title: '<%= user.user_name %>',
animation: google.maps.Animation.DROP,
icon: new google.maps.MarkerImage(icon),
id: '<%= user.id %>',
users_in_same_zone: '<%= user.center_active_staffs_in_same_zones.pluck(:staff_user_id) %>'
}
);
//Click event on marker
marker.addListener('click', function() {
close_map_info_windows();
infowindow.open(map, marker);
});
<% end %>
<% end %>
// Close map infowindow
function close_map_info_windows(){
for (var i = 0; i < infowindows.length; i++) {
infowindows[i].close();
}
}
</script>
<script defer
src="https://maps.googleapis.com/maps/api/js?key=<%= Rails.application.secrets.google_api_key %>&libraries=places&callback=initMap">
</script>
Below is the controller code
#users = User.active.accepted.joins(:address)
.includes(:address, :qualification_levels, :staff_profile, :center_profile, :center_active_staffs_in_same_zones, :staff_active_centers_in_same_zones)
If I increase the batchsize more than 200, the response time increases. I am looping in view because I need to assign the values to the javascript functions
I am using RAILS5.
Any suggestions to optimize this page?

Answer 1

As first thing, it looks like you're having a N+1 issue.
Try adding .includes for models like staff_profile, qualification_levels, address or staff_active_centers_in_same_zones for your users query.
Something that could help you to identify those models is the bullet gem.
In any case, your code smells like something could be wrong as you potentially could load more than 200 user points in the map (telling because of the batch_size: 200 in your query), but only you know what should be doing your page.
And unrelated, but also move the query logic to the controller. In the view looks the wrong place to call it using a MVC approach.