How to plot markers animating from center? - google-maps

I want to show markers coming out from map center(cluster's position) to their respective latlong.
e.g. redfin.com
Marker animations like DROP and BOUNCE wont be useful here I suppose.
is there any way to acheive it?

Related

google maps api marker composed of image and line

Is it possible with "Google Maps Api" to obtain a marker composed of a line and ends with a picture?
I tried to use a marker consists of a single image (eg, line and circle) and if there are 2 adjacent markers will be covered from the first second.
For example I have marker like this:
--0
and the second it's close the result is:
--0-0
I must rotate so the result is:
--0
\
0
how I can make this?
Take a look to MarkerOptions the attribute anchorPoint.
Using the Marker position you can detect a possible overlap between images, and change that value and image to do what you need.

panToBounds don't adjust zoom

I have following problem, i use autocomplete to get coordinates for needed places, i has use before Autocomplete.getPlace().geometry.location for map.setCenter() and have manual make maximum zoom. But i have found, that it given Autocomplete.getPlace().geometry.viewport, how i can it understand, it give me 4 X,Y points for corners, so i have put it inside of map.panToBounds(). I dont know how, but the map will slide to the right viewport, but with wrong zoom level . Before i start to type in autocomplete, the zoom is on 19, and after i fire action, the map slide to the right location, but position the map Bounds not exactly to autocomplete viewport, it zoom it on the center.
var autocomplete = new google.maps.places.Autocomplete(my_input,{types:['geocode']});
google.maps.event.addListener(autocomplete, 'place_changed', function()
{
my_map.panToBounds(this.getPlace().geometry.viewport);
});
Self fixed, i dont know for what is map.panToBounds(), but what i needed was map.fitBounds()

List and count markers

I need to count and list the markers that are within a figure either a sirculo or a rectangle.
The operation would be that when you insert a figure on the map I list and count how many markers inside it.
The Circle and Rectangle classes have a getBounds() function, which returns a LatLngBounds object. Add your circle/rectangle and get its bounds. Loop over your markers, calling the contains() function on each marker to see if it is contained in that latlng bounds.
You may need to be slightly cleverer with the circle, as its bounds will be for the bounding box that surrounds it, so you might have markers that fall outside the circle but still within that box. In which case you'd need to work something out based on the radius of the circle.

Search inside circle markers

I need to do a search for markers that are within a circle using as parameters the radius and position of the center of the circle. Someone can help me on how serious this search.
Concept:
make an array of the markers you want to search
iterate through the array of markers calculating the distance between each marker and the center point using the geometry library computeDistanceBetween()
function
compare that distance to the radius of the circle, if it is less than the radius, the marker is inside the circle, otherwise it is outside the circle.
example (with center point from geocoded address)

Stop drag of google map outside visual bounds

When you are pretty far zoomed out on a google map, you can drag it enough so that the map ends and becomes a blank gray color. The map seems to repeat seemlessly on the horizontal axis, but not vertically.I'm wondering if there is a way to prevent the map from being dragged when it reaches that gray area. Any ideas?
Just for fun, another approach would be to tell the map to wrap vertically in the same way that it wraps horizontally, by overwriting GMercatorProjection.prototype.tileCheckRange before creating the map.
GMercatorProjection.prototype.tileCheckRange=function(a,b,c){
var d = 1<<b;
if (a.y<0||a.y>=d) {
a.y=a.y%d;
if(a.y<0){
a.y+=d;
}
}
if(a.x<0||a.x>=d){
a.x=a.x%d;
if(a.x<0){
a.x+=d;
}
}
return true
}
The downside is that the API doesn't contain any code for causing the markers and polylines to jump vertically to the copy of the map that's in view, they only jump horizontally. A complete solution would require writing own code to do the vertical jumps, and use unbounded GLatLngs throughout.
This is a good example of how to limit the range of a map. It's a bit of a hack, but it's probably your only real option.