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.
Related
Just like leaflet and Arcgis JS Api have support for printing and exporting map to image files, how to do it in here maps? I explored here API and searched web but found nothing.
You have to take a look at our Map Image REST API.
https://developer.here.com/documentation/map-image/topics/what-is.html
What Is the Map Image API?
The HERE Map Image API is a REST API that allows you to request static map images for all regions in the world. The map images show conventional map views, but can also include points of interest, routes (for example, with turning points and junction views), statistics and heat maps.
In addition, the API offers a variety of supplementary services for displaying location-based data. For example, it is possible to present roadsigns.
You can also request the map images in different formats:
0 PNG
1 JPEG (default)
2 GIF
3 BMP
4 PNG8
-5 SVG (only for companylogo)
If this is not given, JPEG is used as default.
Within JavaScript, you can configure a MapTileService to request tiles of the map.
https://developer.here.com/documentation/maps/topics_api/h-service-maptileservice.html
There is a capturing functionality in HERE javascript API.
I made a quick draft how you can easily export the captured canvas element of the map with anything rendered on top of it:
// overlay element containing captured canvas element
var captureBackground = document.createElement('div'),
bgStyle = captureBackground.style;
bgStyle.width='100%';
bgStyle.position='absolute';
bgStyle.top='0';
bgStyle.bottom='0';
bgStyle.background='rgba(0,0,0,0.7)';
bgStyle.padding='30px';
bgStyle.zIndex=1000;
captureBackground.addEventListener('click', function(e) {
document.body.removeChild(this);
});
// capture the map:
map.capture(function(capturedCanvas) {
// remove previously added canvas from the overlay
captureBackground.innerHTML = '';
captureBackground.appendChild(capturedCanvas);
document.body.appendChild(captureBackground);
}, [], 50, 50, 700, 700);
For more information see https://developer.here.com/documentation/maps/topics_api/h-map.html#h-map__capture
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);
}
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.
I have a google map component in my application that allows the user to draw polygons, lines, and marker. Now I want to implement a button that allows the user to export a kml file of the stuff that he/she draw in the map.
Any suggestion for the best approach to do so.
Your comments and contribution is highly appreciated
I'll summarize my idea as storing coordinates as the user draws, then when the "Output KML" button is clicked, format the saved coordinate data and place it in a textarea to be copied (unless there's a way to prompt as a download?).
Here's how I save data when the user completes a drawing element:
http://jsfiddle.net/8bwG2/
(I don't know a good way of detecting edits.)
First, add event listeners for each drawing type (line, polygon, marker), to fire when it is complete. You need a separate event listener for each type. Here's one for Polylines, and each listener will return the type of drawing element that was just completed.
google.maps.event.addDomListener(drawingManager, 'polylinecomplete', function(line) {
path = line.getPath();
document.getElementById("action").value += "#polyline\n";
for(var i = 0; i < path.length; i++) {
document.getElementById("action").value += path.getAt(i) + "\n";
}
});
I am placing the coordinates straight into a shared textarea but they should instead go into an array of arrays variable, with one variable for polygons, one for polylines and one for markers.
When reading from these internal variables, convert the Google Maps LatLngs to KML format long,lat,altitude. You will have to get creative with each element's name and description.
Finally, when the KML is requested, loop through the markers, line, and polygon variable to generate KML formatted elements, such as Point-coordinates, LineString, and Polygon-outerBoundaryIs
I've an array of locations: {'place1', 'place2', 'place3'} *// these are addresses
Now assume that there is a new location: 'place4'.
I want to detect which one is nearest to 'place4'....comparing from above array of locations....
i.e. tracking nearest location of a point from array of locations...(By using Google Map APIs)..
psuedo code:
foreach(var item in array)
{
var i = TrackNearestLocationByGoogleMapAPIs(item);
if(i is nerest)
{
print(i); and go out of loop...
}
}
There is no API-call to do what you want. You have to calculate the distance yourself with the Haversine formula as seen here: http://www.movable-type.co.uk/scripts/latlong.html
I don't think Google Maps API v3 provides a simple mechanism to do this. You might be able to retrieve the latitude and longitude of each location and figure out which point is the closest from that data.