I use MarkerClustererPlus for clustering markers on google map (v3)
Is there a way to toggle clustering with a function.
Namely I dont wont to effect markers, but only toggle visibility of cluster icons.
For showing it we have property - repaint, but I couldnt find the property to hide clusters.
set the map-option of the markerClusterer
clustererObject.setOptions({map:null});//hides the clusterIcons
clustererObject.setOptions({map:mapObject});//restores the clusterIcons
Note: when you set the map to null all clustered markers will appear as markers, I'm not sure if this is the desired behaviour
If you're looking to just hide all clusters, then Dr. Molle's answer works great. If you're looking to hide just a sub-group/sub-section of your maps markers, then a refresh/rebuild will be needed.
Here's an advanced example that may help others finding this page thru Google Search.
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.1.1/examples/advanced_example.html
Related
I'm running into an issue. I'm trying to rewrite an old flash/xml map using CSS. I have a big jpg of the map, which is the background. I'm able to lay the icons out, where they need to be.
The problem I'm having is centering the whole thing on the page. Ideally, the map would be centered and the user would be able to click and drag the background image to look at the various sections, the way Google Maps or something works.
How can I do this, or what is this effect called, so I can google it more in depth. Searching "map" at all gives results about customizing Google Maps. Which isn't what I'm trying to do. I'm thinking it'll involve absolute positioning and and viewports, but I don't know exactly how to code it.
Should I just make a frame?
It looks like Leaflet will probably solve the problem. http://leafletjs.com/
I got a bit of a problem. I want to display a route between two points and give custom markers to both points. It is working.
I set suppressMarkers = true
I call directionsService.route to display the route.
The map's center is correct, the whole route fits into my map's canvas beautifully.
Then I add custom markers to both origin and destination.
Then comes the problem: When I add the custom markers, the map's center jumps to the last added marker. I want to keep the map's center on the route, that was originally generated by the directionsService.route function.
PS: Weirdly if I add the markers before displaying the route, the map still centers on the last added marker.
Thanks,
Pál Terebess
One option to try would be save the Bounds (using getBounds) of the map after generating the route and reapply it after adding the markers (using setBounds).
Edit: setBounds isn't a function. Maybe try either fitBounds or getting the zoom and center and resetting those.
My bad, sorry. I just found the bug this morning. I used setcenter when adding the markers. It works perfectly now. Thank you for your time guys! I am greatful nevertheless.
Can anyone advise me on how to select layers from a checkbox overlay the selected layer on google maps?
JavaScript Version:
Please consult the Google Maps API documentation.
https://developers.google.com/maps/documentation/javascript/layers#TrafficLayer
Here's a good example of adding and removing overlays.
https://developers.google.com/maps/documentation/javascript/examples/overlay-remove
Java Version:
Here's a nice example for Java. It even has a radio box to switch between layers.
http://demo.gwt-openlayers.org/gwt_ol_showcase/GwtOpenLayersShowcase.html?example=Basic%20Google%20V3%20example
Your question is not really clear to me.
Like in the previous answer : this is an example on how to use google v3 --> http://demo.gwt-openlayers.org/gwt_ol_showcase/GwtOpenLayersShowcase.html?example=Basic%20Google%20V3%20example
Overlay layers can be realized using setIsBaseLayer(false) method.
Base layers are drawn add the bottom, and can be switched using a radio button.
Overlay layers are drawn on top of the base layer, and can be switched using checkboxes (and thus multiple overlay layers can be enabled at once).
Or are you reffering to the specific google overlays (like traffic layer) ?
I am plotting some markers on a google map (API v3). If there are, say, 3-4 markers together at one place and somebody does a mouseover I want to spread them out. This way it becomes easy for anybody to click on a specific marker.
Note: I do not want to show use marker-cluster and then zoom the map on clicking the cluster.
Here is an example of what I want to achieve:
Try doing a mouse over on this map: http://www.austria.info/uk/interactive-austria-map wherever you see some markers together. How it has been implemented? Any library / sample code for this?
Thanks for your time!
Himanshu
I have not used this but it says it does what you're looking for:
https://github.com/jawj/OverlappingMarkerSpiderfier
Based on the design below, is it possible to create the map just using CSS? If so, how?
So as you can see, when you hover over a state the name will appear and change the color of the state. On clicking it will info below the map per state.
UPDATE 1:
Can it be done using absolute positioning, z-index and hover states on a button?
UPDATE 2:
With a slight tweak to the design, would it be possible to have a flat image for the map and plotting dot's on it for each state that would include a hover (using the same tab style as the image example)? Each dot being an image. Am I right in saying that the complication of the design is to highlight the right area when hovered? Therefore, just having a dot would solve it right?
I was interested in this too and found this example (USA) MAP if you look into the source code there is area for each state that look like <area onmouseover="show(this)" onmouseout="hide()" onclick="fform.tg.checked=false;togl()" shape="poly" coords="179,33,174,66,230,67,225,35,179,33,179,33" href="us-nd.html">. You can read more about and tags in W3C link. I think its the only way how to do this without flash or something... But it cant be done without a little JS. To get the coords, I would asume you just open your image in some editor that shows coords(gimp or something) and manually find them out...
No. If it had rectangular shapes yes but with a lot of work.
You really need javascript on this one.
You might want to try a Javascript mapping library - www.openlayers.org is the market leader (and free and open source).
You get your US state map in the right format (GML for example) then you can pretty much cut n paste from one of the openlayers examples. Hovering and clicking are handled by event functions. They can then do things like updating your info box below the map.
Note that if you want Alaska and Hawaii as in the picture and all you can find is a geographic state map, you might have to use a GIS to shift the features around. Quantum GIS is a free and open-source GIS that can do this for you. Help for that can be found on gis.stackexchange.com!
If you're willing to use javascript, jQuery more specifically, here is a nice plug-in/tutorial on how to do what it seems like you'd like to. http://playground.mobily.pl/jquery/mobily-map.html. It won't do the states exactly, but it will allow you to drop pins and such.
Update: This seems to be exactly what you're looking for: http://playground.mobily.pl/tutorials/building-an-interactive-map-with-raphael.html. It includes a rather indepth tutorial as well.
Here is another interactive US map I found myself: http://www.fla-shop.com/products/html5/united-states/us/ It is purely javascript with customizable popups.