Google Maps: Clustering with Fluster, hide markers and update clustering - javascript

I am using the Fluster library to do some clustering with the Google Maps API v3.
http://blog.fusonic.net/2009/12/fluster2-011-with-significant-performance-improvements/
I have "real-time" searching on the map. As you type in an input it hides or shows markers that match the search.
This works fine, however I can't get it to work with Fluster. i.e. I can show/hide my own markers, but I can't update the cluster markers.
Fluster doesn't seem to have a removeMarker() method. I tried adding my own, but with no luck...
this.removeMarker = function(_marker)
{
var index = me.markers.indexOf(_marker);
me.markers.splice(index, 1);
};
I would then try calling fluster.createClusters() or fluster.zoomChanged() but again, it just isn't doing what I want.
Does anyone know what I can do to work around this?
If it comes down to it, I guess I can remove the instant-search and just get it to re-render all the markers/clusters on the search form being submitted, but that is not an ideal solution.
Any advice would be greatly appreciated.

Related

Google Maps Api Marker Cluster Activate?

I'm using Google Maps to set some markers. I have things setup so that when an item in a list is hovered on the marker will highlight.
This is done easy enough by keep a hash of the markers. So that when I hover over an item it just updates the icon in the marker.
this.markers[hoverItem.id].setIcon('/img/map/active-marker.png');
This works just fine. However I'm also using the marker-clusterer-plus plugin with Google Maps. The problem I'm having is to highlight the cluster icon if the marker is inside.
I can't find away to access the cluster object of the marker. Is there anyway to access or set it somehow?
Looking at the code...:
...you'd probably need to call MarkerClusterer.getClusters to get all the clusters.
Then loop through them, perhaps then calling Cluster.getMarkers and checking if your marker is in each cluster's array of markers.
Cluster.isMarkerInClusterBounds and Cluster.isMarkerAlreadyAdded_ might also be useful.

Adding new places in google maps

I am using Google javascript api Currently. I would like to add new places like add small villages in the map, these small village does not appear in google map even when I am highest zoom. I know villages Lat/Lang and would like to add them when someone zoom in map (placed in my website). I can use Marker to accomplish similar, But it is not same as having places by default appear on map.
I tried searching stackoverflow and elsehere on net, But could not find any references. If someone can please sugggest on it
You need to request it from google: google.com/mapmaker
You need to drew a polygon of the city borders.
every request must to be approved by google.
Hope its help.
I used MarkWithLabel to accompalish http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html

Take an image from google map

I have a problem with google map now. That is I dont know how to capture a picture from google map. I developed my app which used google map api ver3 and it can show multiple markers, lines, my app's icons, circles and many things like that. So, it's hard to use Google static map API url such as
maps.googleapis.com/maps/api/staticmap?center=Boston,MA
&visible=77+Massachusetts+Ave,Cambridge,MA%7CHarvard+Square,Cambridge,MA&size=512x512&sensor=true_or_false
Hope everyone there suggest any solution for me! Thank you !
P/S: I used google map v3, asp.net.

Dynamicaly update Google maps with AJAX

I have a lot of addresses in my database I want to add to Google maps as markers. I only want to load and add the markers that are in the selected area on the map. If the map is zoomed or dragged, it should update the markers on the map.
How do I do that?
Thanks very much in advance!
For managing a lot of markers, you will definitely want to leverage infrastructure that has already been built to do this. There is actually a great post on the Google Developers blog that discusses the popular options.
https://developers.google.com/maps/articles/toomanymarkers
The Marker Clusterer is a very common component that I see all over the place when it comes to maps apps, and seems to fit the requirements that you are looking for. I would also take a look at Fusion Tables, as it makes building a map with thousands of locations extremely simple.
As Aristos said the markers will be showed automatically when coming into focus. BUT, if I you a bazillion of contacts, it could indeed be easier to do it only when required.
My strategy would be:
Keep track of the addresses you have added -- no point doing it twice.
From the address, get the LatLng.
get the map's current bounds (use getBounds() to get the min/max LatLng of the map currently displayed)
check whether the LatLng of the address is within the bounds.
if it is, add a marker.
Loop
If you really have a lot of addresses you might want to prefetch the LatLng and store that in an SQL table. You could then query the table with the intervals.
HTH
EDIT: some code. Assuming you have an Array() of markers, and the Northwest and Southeast boundaries, you could do this:
function filterMarkers(nw, se, myMarkers) {
var north=nw.lat();
var west=nw.lng();
var south=se.lat();
var east=se.lng();
var isInsideBounds=[];
for (var i in myMarkers) {
if(myMarkers[i].position.lat()>=north && myMarkers[i].position.lat()=<south && myMarkers[i].position.lng()>=west && myMarkers[i].position.lng()=<east) {
isInsideBounds.push(myMarkers[i]);
}
}
return isInsideBounds;
}

Google maps v3: Show multiple markers at once

I'm using Google Maps API v3 to add markers to a map.
All the markers have a custom image as the icon.
I have some filters that the users can click to hide/show the markers on the map.
Basically what I do on the filters is iterate the markers collection and call setVisible for all of them (with true/false accordingly).
The problem I'm having is that when I hide several markers they all disappear at once but when I show the icons they show up slowly (it takes a couple of seconds for 40 markers to become visible).
Is there a way to make all the markers appear at once?
I thought about using a MarkerManager, but it seems to be oriented to something different.
Thanks for your help.
Try markerclusterer.js from google. Demo example in here. Hope it helps.

Categories

Resources