How to draw millions of points on google maps? - javascript

I have millions of points I want to draw on google maps coming from an array.
I was looking at circles example
However, the problem is circles are... circles. Is there some way to draw circles such that it is like a canvas so it doesnt really matter how many points I draw on it?

I believe the answer is don't. That's too many markers. Per the table below (grabbed from geek.com) you would have a screen with nothing but markers and no map, even if each marker were only 1 pixel each, which they aren't.

There are ready solutions for marker clustering like Markerclusterer or Markerclustererplus.
You can find these libraries on github:
https://github.com/googlemaps/v3-utility-library/tree/master/markerclusterer
https://github.com/googlemaps/v3-utility-library/tree/master/markerclustererplus
Sample pages and documentation are inside these repositories. Could it work for you?

Related

Drag multiple polygons at once in Google Maps Javascript API v3

It is extremely easy to make a polygon draggable in the Google Maps API v3 with the 'draggable' option.
How could I go about dragging multiple polygons at once, however?
The idea is that the user selects some polygons somehow (not the issue here: could be by clicking, drawing a bigger polygon, etc.), and then is able to drag any one of them and see them all move together to the destination.
Thank you.
The easiest approach would be to create a single polygon instead of multiple polygons. Polygons may have multiple paths, so you could merge all polygons into 1.

Performance issue on rending large number of markers with polylines in Google Maps V3

To render a large number of simple (two point) polylines with markers on a map getting performance issue.
Example (Tested on Firefox):
To place 30,000 markers and 15,000 simple polylines, it’s taking time to render.
To solve this (streaming data): Adding 250 polylines and 500 markers on every 2 seconds instead of adding all the markers and polylines. But after rendering the all markers and polylines, browse is not responding on zoom in/zoom out.
Is there an easy solution to this?
Tried with MarkerClusterer (markers and polylines) but after zoom in / zoom out the browse was not able to render and crashed.
Tried with only markers (no polylines), giving good performance. It was able to render and able to zoom in /zoom out.
Are there any limitations or performance issues on combination of markers and polylines?
Could anyone advise on the best way to achieve this?
Thanks in advance!
Sree

Google Maps API v3 - Snap to polyline edges

Does anybody knows how to make a Marker or a Polyline snap into the coordinates of a existing Polyline?
I'm looking for something like the behavior in the googlemaps engine lite: https://mapsengine.google.com
If you select a Polyline or Marker there and try to edit another polyline coordinate (using ctrl or shift) it will snap into the marker or the polyline coordinates
There is, as far as I know, no easy way to do it. Polylines only have the locations (latLng objects) that you initially pass them and that is it.
So, with this in mind, you can take two approaches:
Instead of a Polyline, you can draw a Polygon.
Change your Polyline to include more points.
Polygon
With this approach, you would have to draw a very thin polygon, thin enough to look like a line.
Wit this approach you can easily check if the marker is inside the polygon by using the containsLocation() method, and if not, set its new position to inside the Polygon.
The drawback is that your Polygon needs to be very, very thin, and you need to set a width for the line. If the width is too big, the dragging will look inaccurate, and if it is too small you may miss it.
Polyline
With this approach, you would have to add multiple points to the polyline, and then move the marker to one of those points every time it went out.
This way there is no need to create a width to calculate the line, but you need to calculate dozens if not hundreds of extra points automatically, and then add them to the Polyline.
Both solutions would work, and both have pros and cons. In the end, it pretty much goes around the which poison do you prefer old saying.
Extra
Theory aside, I did find a good example for the Polylines strategy (kudos to #geocodezip for the comment and #BradBarrow for the response).

How to deal with multiple Google Maps markers on the exact same position

What I'm trying to do is finding an elegant way of dealing with multiple markers on the exact same spot on a google map. Possible scenarios are when your geo data just isn't accurate enough to distinguish two markers from one another (say 3 people live in the same house and all you have is an address) or you only have city information of a couple of shops.
Now there is the Clusterer of course, everybody is saying that, but that won't help here as the markers have the exact same location. They will stay clustered regardless of zoom level.
I like the way Google Earth does it. Here is an example. But so far I have not discovered a way to have this behavior in Google Maps. I would be pleased if someone can show me how to do this.
So perhaps as you are looping through your coordinates adding all the markers, you could check if any previous marker has the same latlng. If it has you could use a different marker, e.g one numbered '2'. Or to do the Google Earth thing, offset each marker slightly, and draw a polyline from the markers to the original location.

Spreading markers out as necessary in Google Maps

I'm displaying many (hundreds) of markers at a time in a given viewport in Google Maps. Often, this leads to markers being drawn over each other.
Since the exact positions aren't as important at zoom levels where so many markers are drawn, is there a library or piece of code that allows markers to dynamically update their position based on whether they are overlapping with other markers or not? As the user zooms in (and markers becomes more sparse), the markers will then move closer to their real positions.
And yes, I know about groupings, marker clusterings, etc. Those solutions aren't appropriate in my situation, since it is important that all markers be displayed at all times. And in actuality, I am already using those techniques as well, where appropriate. I'm using the Javascript V3 API.
You probably need to implement your own clustering algorithm - I think Google Maps let's you implement your own strategy (I know Bing Maps does, and typical they copy each other within 6 months or so of a new feature being implemented).
Note that for lots of dense pushpins, your constrains of separation but displaying all pins, are in conflict.
as for a strategy, my first thought is an annealing type of algorithm, although it probably isn't very fast. Basically each pushpin would exert a force on surrounding pushpins within a certain distance. iterate until sufficiently stable.

Categories