I have a Fusion Table of about 1000 entries, and I show them on a map using a FusionTablesLayer. I want to produce a list of the five closest markers to the center of the map. Clicking a list item should produce an info window for the corresponding marker. It looks a lot like the first sample on this site:
https://developers.google.com/maps/location-based-apps
But if I remember correctly, Layers don't allow acces to individual markers. On the other hand, if I use an Overlay the rendering of the 1000 markers has to be done client-side and obviously I don't want that.
How do I do this? Make an Overlay for the 5 markers and a FusionTablesLayer for the rest?
Here is an example showing the 10 closest markers to the center of the map.
Here is an example that does the sidebar.
Here is an example that combines the two.
Related
I want to make a webpage that has two buttons. One will add one style of marker on my google map and the other will add a different styled marker. How can this be done so that the markers stay visible to all users.
My first thought was to use a kmz layer but you are limited to a certain number of them. So, how could this been done so that if 1000 users clicked the button, there would be 1000 different markers at their respective locations all over my map?
I need to select an rectangular area on a map and identify markers that fall within that area.
Ideally, rectangle should be draggable and resizeable.
I am not too particular about the mapping and Google or Mapbox or Leaflet would all work just fine.
I found location-filter for Leaflet (https://github.com/kajic/leaflet-locationfilter/), which does seem to do the job. However, I couldn't find simple example code that shows how to use it. It has been used on tripcode.com but it is hard to make anything out of what is going on.
Does anyone have any experience with location-filter? If so, can you please point me to simple example of how to use it?
Are there similar examples for other mapping services particularly google maps?
Thanks.
For my bbox page I've snatched two files: SimpleShape, Rectangle from Leaflet.draw plugin and fixed them for better usability. The code for the rectangle is simple:
var rect = L.rectangle([[59.9, 29.9], [60.1, 30.1]]);
map.addLayer(rect);
rect.editing.enable();
rect.on('edit', function() { console.log(rect.getBounds().getBBoxString()); });
For advanced things like centering the rectangle on screen, see source code for the page.
When you are drawing the markers onto the map you will need to add them to some kind of an array which will contain the lat/lng pair of each marker.
You can use Leaflet.draw to draw the rectangle and modify it to return top left and bottom right coordinates on mouse up. On mouse up you can go over the entire list and which elements fit inside that bounding box.
This solution is just an example, there are many ways you can do this.
Is it possible to create custom layers/overlays in google maps?
As an example, would it be possible to have one layer with polygons, another with circles, and a third with markers? and then hide/show these layers individually?
I tried looking at the documentation, but the layers seems to only be a fixed set of predefined layers. And overlays seems to only support image overlays.
Any help on this is appreciated.
I'm not sure if there exists a better way to do this, but I've found a workaround to a similar problem. My example utilizes markers and polylines, but it should be easy to extend the functionality to circles and polygons too.
Link to JSFiddle
Basically it works like this:
Initialize the map.
User selects an option what he would like to see on the map.
Click triggers a method (see HTML part of the fiddle) in the map object that first clears the map and then pushes new overlays on map.
The data that is currently shown on map is stored in arrays, and the map clearing method simply goes through these arrays and checks if there exists any content on map, and removes them if does.
Hope this helps. Cheers!
I have to show numerous (approx 500) numerical markers on a map, I generated 300 using
http://mapicons.nicolasmollet.com/numbers-letters/
However it only goes up to 300 - how do others show large number of numerical markers on a map?
I would recommend using the Google Charts API, with pins:
http://code.google.com/apis/chart/infographics/docs/dynamic_icons.html#pins
Or bubbles:
http://code.google.com/apis/chart/infographics/docs/dynamic_icons.html#bubbles
Here is a bubble that shows 500:
https://chart.googleapis.com/chart?chst=d_bubble_text_small&chld=bb|500|C6EF8C|000000
There are a few ways you can do it:
Generate the other images your self
Generate the images dynamically
Use a custom overlay instead of a marker and display HTML
I want to show limited numbers of markers(let's take 50 or so...) at all zoom level and in a manner that markers covers all entire Google map display.
So, If I am viewing whole world in map, it will show markers all over the world not to exceed a certain number, and the if I zoomed to USA it will only show previous number of markers only inside USA.
And then again if I moved to Canada , then the map should show markers of Canada only.
I am not able to
- put makers on visible region over the map on limited distances
i.e. all the visible markers maintaining somewhat some distance from each other.
You might want to look into 'clustering' or 'bunching' the points into one. It doesn't do exactly what you are describing, but it will effectively limit the number of markers you have when you are zoomed out, and 'uncluster' them once you zoom in.
There are quite a few ways (all third party - the Google API doesn't support it yet), you could have a look here at one called ClusterMarker: http://googlemapsapi.martinpearman.co.uk/articles.php?cat_id=1.
You should use a marker manager!
See http://code.google.com/p/gmaps-utility-library-dev/ and http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/