Too Many Markers on Google Map : Performance Issue

Many a times we come across a business case where we need to add multiple markers to Google Map. When markers added on map cross a thousand mark it slows down Google Map big time. In order to handle this scenario, I came up with my custom approach which I have tested with about 10000 points on the map.

Here in this approach I used polyline to behave like a marker on the map.

//First Design your Marker as you wish.

I used svg path to create marker as shown below.

Design Marker:

var markerIcon = {

                    path: 'M -2,0 0,-2 2,0 1,0 1,2 -1,2 -1,0 -2,0 z', --This is Svg Path

                    strokeColor: Black',

                    fillColor: 'Red',

                    fillOpacity: 1,

                    scale: 3,

                    rotation: 0

                };

Get Marker Postion on Map:

var markerStyle = new google.maps.Polyline({

                    path: [coordinate, coordinate],

                    strokeOpacity: 0,

                    strokeWeight: 25,

                    icons: [{

                        icon: markerIcon,

                        offset: '0'

                    }]

                });

Plot Marker on the Map:

markerStyle.setMap(map);

***Where map is the actual map initialized in your application.

 

The simple hack is in Google Polyline function which expects different co-ordinates as path parameter. I used same co-ordinate provided twice which will plot a point on the map. By using custom icon like we used here with marker icon we can place whatever marker icon required on the map.

This approach is best used for eliminating performance issues. You can plot multiple markers on map but will not resolve any over lapping issue for which you may refer the below mentioned approach.

There are many other solutions like Marker Clustering, Spiderify, etc also available to handle multiple marker approach on google map which you may want to look into. Here are the links for the same,

1. Spiderify – https://github.com/jawj/OverlappingMarkerSpiderfier
2. Marker Clustering – https://github.com/googlemaps/js-marker-clusterer