CODEWITHSUNDEEP
google-mapsgoogle-maps-api-3kmlgeorss
user2055396
user2055396

Reputation: 59

Google maps Browser very slow & crashing when loading very large data with markers

I am building a GPS based tracking application and the idea is to show the total route of the vehicle in the last 24 hours with data coming at an average of every half a minute.

Along with these data, there are all sorts of goefences, route markers, various color codes based based on different conditions of vehicle in transit, different images on routes based on the different angles the GPS device sends the data.

With all these in mind, the data is very large and a lot of logic and conditions in place.

We are loading the google map by creating the xml and rendering on the map as layers and putting the other colour icons

Loading Markers from XML file to Google Map API approach is the base of the implementation. We are ajax refreshing the map every 3 seconds and placing the complete xml with layers.

Problems:

  1. The map with icons and images jerks every time the ajax calls are made and the feel of automated map updating is not happening
  2. When huge amount of data is present on the map, the application gets very slow and browser crashes quite a few times

Help needed:

  1. Is XML loading the most optimized way to load the maps?
  2. Is there other better options - Please suggest
  3. Lot of forum points to https://developers.google.com/maps/documentation/javascript/kmllayer Is this the apprach that needs to be taken

Upvotes: 1

Views: 2522

Answers (1)

kaho
kaho

Reputation: 4784

I think you need to do some optimization on displaying your data. The XML method is fine, the problem is you just have too many of them.

First thing you can do it to use the getBounds() method in the google.maps.Map class, and only display the markers that are within the user's view. It's like why draw 10,000 data when user can only see 10 of them?
You should also listen to the bounds_changed event so that you can update your view accordingly.

Secondly, you totally don't want to show all the markers even when user are looking at a wide area, not only it is slow, but also it is a horrible experience to have.
enter image description here
Instead you should group your data, just like what the iOS' Photos app's group by area function had do.
enter image description here

Also recycle your markers rather than deleting and creating.

Upvotes: 1

Related Questions