Is there a way to get all the markers on Google Maps?
If you mean "how can I get a reference to all markers on a given map" - then I think the answer is "Sorry, you have to do it yourself". I don't think there is any handy "maps.getMarkers()" type function: you have to keep your own references as the points are created:
var allMarkers = [];
....
// Create some markers
for(var i = 0; i < 10; i++) {
var marker = new google.maps.Marker({...});
allMarkers.push(marker);
}
...
Then you can loop over the allMarkers array to and do whatever you need to do.
The one way found is to use the geoXML3 library which is suitable for usage along with KML processor Version 3 of the Google Maps JavaScript API.
I'm assuming you have multiple markers that you wish to display on a google map.
The solution is two parts, one to create and populate an array containing all the details of the markers, then a second to loop through all entries in the array to create each marker.
Not know what environment you're using, it's a little difficult to provide specific help.
My best advice is to take a look at this article & accepted answer to understand the principals of creating a map with multiple markers:
Display multiple markers on a map with their own info windows
If you are using JQuery Google map plug-in then below code will work for you -
var markers = $('#map_canvas').gmap('get','markers');
For an specific cluster use:
getMarkers() Gets the array of markers in the clusterer.
For all the markers in the map use:
getTotalMarkers() Gets the array of markers in the clusterer.
Google Maps API v3:
I initialized Google Map and added markers to it. Later, I wanted to retrieve all markers and did it simply by accessing the map property "markers".
var map = new GMaps({
div: '#map',
lat: 40.730610,
lng: -73.935242,
});
var myMarkers = map.markers;
You can loop over it and access all Marker methods listed at Google Maps Reference.
Related
I need a googlemap with clusters, popup and list where you can click on.
Hoping to find a simple solution which I can easily add markers and have a marker list which points to the marker on the map.
I have successfully used markercluster.js
Just load all your markers into a json (in my example they are in the variable locations), then load them:
var markers = locations.map(function(location, i) {
var marker = new google.maps.Marker({
position: location
});
return marker;
});
If you look at the example code, it will show you how easy it is.
The Google Maps JS API documentation is as clear as it comes.
https://developers.google.com/maps/documentation/javascript/adding-a-google-map
I don't think there's an off-the-shelf solution that looks exactly like your example. Getting that list is going to require some HTML work to position/render the module, and Javascript/DOM integration to sync it with the map. Some rudimentary front-end development is involved and if that's not something you want to tackle, perhaps you could just make a custom Google Map and link to it.
https://www.google.com/maps/about/mymaps/
I am using this library to dynamically generate my markers because the dynamic icons are deprecated. Now, in this API there is not the possibility to set the markers opacity..and this is crucial for my application. Currently I am loading the markers in this way:
var marker = new StyledMarker({
styleIcon:new StyledIcon(StyledIconTypes.MARKER,
{color:generateColor()}),
position:new google.maps.LatLng(lat,lon),map:map});
I have not been able to find a solution and I think that I will have to switch to statically generated markers instead .. :(
I'm new to Google Maps API, and have been looking for ways to customize the markers. The API provided only allows me to change icons but what I actually need is to pass HTML content to the marker. I want to pass some data e.g.numbers to the marker, and when user clicks the marker, more details will show inside infoWindow. (something like this website)
At first, I thought it would be something like Instagram Photo Map, you have a summary of photos within a region. But then I realize that's more like a markerClusterer which simply counts the total number of markers within the range (correct me if I'm wrong).
I still couldn't find any way to display customized data on the marker. Is there any plugin I can use if no default API available?
P.S. first time posting a question, hope it's clear! highly appreciate your help!!!!
Basically what you see on the linked map are not real google.maps.Markers, you see Custom Overlays. With a custom overlay you may draw any HTML-content on the map, e.g. these labels.
You may either use the build-in methods to draw these overlays, or use a library like infobox
You can customise markers using styledmarker library. This library is used to create Markers that can be styled in different ways, such as changing the color or shape, or adding text labels. Below is an example of how to use this library with XML.
for (var i = 0; i < markers.length; i++) {
var text = markers[i].getAttribute("text");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var styleMaker = new StyledMarker({styleIcon:new StyledIcon(StyledIconTypes.MARKER,{color:"00ff00",text:text}),position:myLatLng,map:map});
}
I have a DEMO using this with a database of 2 tables state centroids and cities in USA using XML . The marker shows the state and number of cities in state.
Is there a way to get marker clustering (ie makerclusterer) to work with a Fusion Table layer? It seems that you have to assign markers to markerclusterer yet when using a fusion table layer, Google is handling the markers/infowindows? Still trying to figure this fusion table thing out.
Basically looking for a way to cluster large amounts of markers being provided via a Fusion Table
Fusion Table Layers render an additional png image for each tile that gets overlaid on top of the map tile, containing the data points for that tile, this is the server side rendering part. So it's multiple data points per tile that contains data points.
Generating your own markers from data, which is necessary for MarkerClusterer, doesn't overlay an image per tile, it creates an individual Marker on the map for each data point and overlays a sprite image on to that.
Based on this, it is not possible to use MarkerClusterer and a FusionTablesLayer.
This is my own code. I was trying the technique in the earlier link but it didn't work for me. So this is how i did it.
First i queried the fusion table with the regular chart api query
function initialize() {
mapMain = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(37.4, -100.1),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
mc = new MarkerClusterer(mapMain);
var queryText = encodeURIComponent("select wikipedia_article, xy from "+tableid);
var query = new google.visualization.Query("https://www.google.com/fusiontables/gvizdata?tq="+queryText);
query.send(handleQueryResponse);
}
Next, in my handleQueryResponse, I dynamically created markers and added it to the Mapclusterer
function handleQueryResponse(response){
dataTable = response.getDataTable();
for(var i=0; i< dataTable.getNumberOfRows();i++){
var hrefval = dataTable.getValue(i,0).toString();
var arr = dataTable.getValue(i,1).toString().split(" ");
var latlng = new google.maps.LatLng(arr[0], arr[1]);
var marker = new google.maps.Marker({
position: latlng,
map:mapMain
});
fn = markerClick(i, marker);
google.maps.event.addListener(marker,'click', fn);
markers.push(marker);
}
mc.addMarkers(markers);
}
In this case, the main map, the array of markers (mc in the code below) are global variables. You can see the full working example here.
I don't think you will get it work with a fusion table. IMO the fusion table is lacking the support for a spatial index. A si helps reduce the 2d complexity to a 1d complexity. It's uses in a lot of applications like heatmaps, treemaps, post code search, maps application. You want to look for Nick's hilbert curve spatial index quadtree blog.
Fusion Tables allows you to view thousands of points at once by using server side rendering (from the google servers). Marker Clusterer solves the problem by building a set of clusters from nearest points (from the clients browser). I wouldn't necessarily use them both at the same time, but it might work for your use case it's up to you.
You can read more information about how they work here:
http://code.google.com/apis/maps/articles/toomanymarkers.html
If you really wanted too you could use the Fusion Tables API to feed the data from Fusion Tables to the Marker Clusterer.
Hope this helps.
I'm wondering if it's possible to set markers to be visible in a chosen zoom level for the
Google Map API v3.
I figured it's possible in the v2 of the API using the "Marker Manager" but can't find a way for the latest API.
Example:
Marker-1 -> (max_zoom:10, min_zoom:5) //will on be shown within zoom level 5-10
Marker-2 -> (max_zoom:15, min_zoom:10) //will on be shown within zoom level 10-15
As I'm developing an jQuery-plugin I only want to use the original API without add-ons.
Thanks in advance!
Supposing map is the object instanced to manage the gmap, i'd do something like this:
var zoomLevel = map.getZoom();
if (zoomLevel>=5 && zoomLevel<=10) {
// call the setMarker function for the marker1
} else if (zoomLevel>10 && zoomLevel<=15) {
// call the setMarker function for the marker2
}
Maybe u want to handler the zoom change event, if so look at this: http://code.google.com/apis/maps/documentation/javascript/events.html
You can use Marker Manager with API v3. The examples in http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markermanager/ use the most recent Maps API and they seem to work just fine.
For other options, like Marker Clusterer and Fusion Tables, see http://code.google.com/apis/maps/articles/toomanymarkers.html.
You can also do it by checking the zoom level and adding/removing markers from the map based on that, as suggested by #lucke84 in their answer.