Maps API v3 clustering at different zoom levels - google-maps-api-3

I am working on a map project where I need clustering. I implemented a store locator and used MarkerClusterer which works fine. Now I have another requirement from the customer and I wonder which solution I should use to achieve these goals:
Zoom level 0: Cluster markers within 1500km distance to each other
Zoom level 1: Cluster within 1000km
Zoom level 2: Cluster within 750km
Zoom level 3: Cluster within 400km
Zoom level 4 and above: no clustering
I was thinking I should be using MarkerManager and MarkerClusterer together, but I am not sure about that. Any help to get me on the right path?
Thanks in advance!

You can only use MarkerClusterer, but you have to modify some options.
To prevent the clusterer acts after level 4, you have to use maxZoom property. It defines the max level where the clusterer can cluster marker, so in your case, you have to fix it at 4.
Then, to change the size of the grid depending the zoom level, use gridSize property. You can find a definition of all option fields on the doc.
So, your MarkerClusterer instanciation will look like something like this :
var mcOptions = {gridSize: /*Your value*/, maxZoom: 4};
var markerCluster = new MarkerClusterer(map, /*your array of markers*/ mcOptions);

Related

How to customize one of the standard Google Maps API map types

There are 2 options for base map in Earth Engine: Map (default) and Satellite. I would like to have Satellite as default base map when I press ctrl + enter (or click run button). I know that I can switch between the 2 options by clicking on the desired one, but I would like to make this automatic.
I tried:
Map.setOptions({
mapTypeId: "SATELLITE"
});
This almost does what I want expect that all labels and countries / administrative boundaries are turned off. How can I have both the satellite base map and these features?
I checked this, but I can't figure out how to achieve what I want.
Does this help:
Map.setOptions('HYBRID')
https://developers.google.com/earth-engine/apidocs/map-setoptions

Google Map API : Marker within marked polygon

I have nearly 4 to 5 thousand markers plotted on the map. I want user to allow to draw a polygon on the map and then delete those markers which are within the shaded polygon. Can anyone please guide me on how to find which markers are within the shaded area of polygon ?
Firstly you'll need to use the geometry library. Append libraries=geometry to the query string of the URL you use for loading the Maps API:
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
Then you can use the containsLocation function to check if each marker is inside the polygon.
for (var i = 0; i < markers.length; i++) {
if (google.maps.geometry.poly.containsLocation(markers[i].getPosition(), yourPolygon)) {
markers[i].setMap(null);
}
}
I'm assuming here you've got these 5k markers in an array called markers. And by 'delete those markers' you simply mean remove them from the view. You'd perhaps also want to fire off an ajax request at this point, and/or remove them from that markers array.

Google Maps api - drawing library fill polygon before closing shape

I have a google map and I am using the drawing library to let the user draw polygons on the map by clicking to add points.
As a comparison I looked at trulia.com. I don't know how the drawing library setup is being made on trulia (uses backbone and other stuff). While I draw a shape, I want it to get filled as soon as I have 3 points, even if I am still drawing, and the fill should change as I add new points (indicating what the shape/area would be if you'd close it in that moment).
On trulia.com, as soon as you have a 3rd point, the area designated by the existing points gets filled, even though you haven't finished adding points. They're using google maps api, right? But I can't find the setting for something like "fill shape as you add points". I've searched google a lot, no luck.
Does anyone know how to setup the map or the drawing library to have that behavior? I don't think that this behavior can be setup in the polygonOptions (I've looked at all the options documented on developers.google.com)... so, the setting must be somewhere else...
MrCroft, it seems #ddtpoison777 asked a similar question and found the solution among some Google Maps API samples. This is the relevant code taken from the example:
var poly;
var path = new google.maps.MVCArray;
function initialize() {
poly = new google.maps.Polygon({
strokeWeight: 3,
fillColor: '#5555FF'
});
poly.setMap(map);
poly.setPaths(new google.maps.MVCArray([path]));
google.maps.event.addListener(map, 'click', addPoint);
}
function addPoint(event) {
path.insertAt(path.length, event.latLng);
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable: true
});
markers.push(marker);
marker.setTitle("#" + path.length);
}

Google map how to display a dragable marker based on coordinates and return new coordinates

I have to write a script for Google Maps V3 which will do the following:
Place a marker on a map based on a set of coordinates and possbibly change the address after the page has been loaded
Allow the user the drag the mark to replace it elsewhere
Collect the new coordinates once the marker has been moved.
The first part is basic enough and should be fine, changing the address after the page is loaded should only be a matter of calling back the same function?
I am not sure where to start on the draggable marker and collecting hew coordinates.
Would anyone know of scripts / API's or where in the doc should I start?
Have you checked the Google Maps Javascript API V3 Reference to see whether the google.maps.Marker class has :
a draggable option
an dragend event
a getPosition method
Hint: The answer might just be "yes" to all three, and you don't need much else to solve your problem.

Google Maps Javascript API accidentally displaying view 'off the map'

I'm using the Google Maps Javascript API and I have LatLng coordinates that are dynamically generated. The problem is, sometimes I get coordinates and a zoom level that creates a map view that's 'off the chart' and this confuses users into thinking their map is not working. Is there a set of coordinates I should restrict values to in order to avoid this?
Example:
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-89.16090481395844, 59.24382269379974),
zoom: 13,
mapTypeId: 'roadmap',
scaleControl: true,
navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN }
});
Users don't know what's happening unless they zoom out:
Google Maps imagery stops at lat 85.0511 (-85.0511).
The value comes from features of spherical mercator projection that Google Maps is based on. You can find the formula used to calculate the value here: http://en.wikipedia.org/wiki/Mercator_projection#Uses

Resources