I need to remove the Direction paths drawn on Google map? I know how to remove markers, but when you remove markers path is not getting cleared. Is there a way to remove the direction path than creating map from the beginning again?
Yes, it's the same way as removing the markers (Google is using the setMap as a standard now).
A good practice is always define a global array variables for your markers, polylines and directions..etc:
var markers = [];
var drArr = [];
var pArr = [];
...
// whenever you set a marker, add it to the markers array
markers.push(marker);
...
// whenever you create a DirectionsRenderer instance, add it to the DirectionsRenderer array
drArr.push(directionsRenderer);
...
// whenever you create a Polyline instance, add it to the Polyline array
pArr.push(polypath);
// This is used to reset the map
function resetMap() {
// remove Markers
for(i=0; i < markers.length; i++)
markers[i].setMap(null);
// remove DirectionsRenderers
for(i=0; i < drArr.length; i++)
drArr[i].setMap(null);
// remove Polylines
for(i=0; i < pArr.length; i++)
pArr[i].setMap(null);
}
as you can see, you can seperate the resetMap function to functions (like resetMarkers..etc).
Hope this help.
Related
Is there a way to get the bounding rectangle (screen position) of Google Map API markers? I am using an Angular 2 wrapper, so I don't construct the markers like you would normally with the API (mostly irrelevant here though).
Or are they on an internal canvas with no way to pull position like you would with an html element?
I have tried something like this, but getBoundingRectangle() comes back with zero values:
var googleMapContent = document.getElementsByClassName("sebm-google-map-content")[0];
var markerList = googleMapContent.getElementsByTagName("sebm-google-map-marker");
if( markerList.length > 0 ) {
for (var i = 0; i < markerList.length; i++ ){
var marker = markerList[i];
var markerLabel = marker.getAttribute("ng-reflect-label");
var boundingRectangle = marker.getBoundingClientRect();
}
}
P.S. I have access to map center lat/lng + zoom and marker lat/lng, so I can "math" this, but that's pretty dirty.
The Marker class hasn't got either a getBoundingRectangle or
getBoundingClientRect method.
It has got getPosition() and getShape() though, which in combination might give you the information you need.
I am new to Google 3D Earth API
I would like to add multiple palcemarkers on Google Earth?
This is my sample code can any one suggest me where I am going to wrong to add multiple markers?
var ge;
var placemaker = new Array();
var point = new Array();
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_HIDE);
for(var i = 0; i < data.length; i++ )
{
// Set the placemark's location.
point[i] = ge.createPoint( data[i].content );
point[i].setLatitude( data[i].lat );
point[i].setLongitude( data[i].log );
placemark[i].setGeometry(point[i]);
// Add the placemark to Earth.
ge.getFeatures().appendChild(placemark[i]);
}
}
function failureCB(errorCode) {}
google.setOnLoadCallback(init);
Here data is an array of object(s) has lat, log and content.
I will not seen any of the placemarker on the earth.
If i push one single placemarker will working fine but not working if i go with loop.
In Google Map V there is options for bounds.
is there any options available for 3D earth?
You need to create a Placemark object using createPlacemark().
You probably don't need to create an array of Placemarks since the google earth API keeps the list of placemarks from which you can iterate using ge.getFeatures().getChildNodes().
for(var i = 0; i < data.length; i++ )
{
// Create the Placemark
var placemark = ge.createPlacemark('');
// Set the placemark's location.
point[i] = ge.createPoint('');
point[i].setLatitude( data[i].lat );
point[i].setLongitude( data[i].lon );
placemark.setGeometry(point[i]);
// Add the placemark to Earth.
ge.getFeatures().appendChild(placemark);
}
Also, probably won't need array of points since have the array of data.
Can simplify this to the following:
for(var i = 0; i < data.length; i++ )
{
// Create the Placemark
var placemark = ge.createPlacemark('');
// Set the placemark's location.
var point = ge.createPoint('');
point.setLatitude( data[i].lat );
point.setLongitude( data[i].lon );
placemark.setGeometry(point);
// Add the placemark to Earth.
ge.getFeatures().appendChild(placemark);
}
If you want to compute the center bounds of a bunch of generic KML features you can use an Google Earth API extension: https://code.google.com/p/earth-api-utility-library/wiki/GEarthExtensionsDomReference#computeBounds(object)
But if you just have an array of points then you can easily compute the center manually then set the LookAt to the computed center view point.
The final initCB() would look like this:
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
ge.getNavigationControl().setVisibility(ge.VISIBILITY_HIDE);
var latSum = 0.0;
var lonSum = 0.0;
for(var i = 0; i < data.length; i++ )
{
// Set the placemark's location.
var point = ge.createPoint('');
point.setLatitude( data[i].lat );
point.setLongitude( data[i].lon );
latSum += data[i].lat;
lonSum += data[i].lon;
var placemark = ge.createPlacemark(data[i].content);
placemark.setGeometry(point);
// Add the placemark to Earth.
ge.getFeatures().appendChild(placemark);
}
// Create LookAt at the center view point
var lookAt = ge.createLookAt('');
lookAt.set(latSum / data.length, lonSum / data.length, 0,
ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 0, 20000);
ge.getView().setAbstractView(lookAt);
}
My app shows two kinds of markers: locations and items. I would like to be able to drag and drop items onto locations.
But when a marker is dragged, the mouseover event on the markers it is dragged over are not triggered.
If someone know a way to create this effect, I'd be eternally greatfull :-)
I think your best bet would be to implement it based on distance to the target, either real world distance in meters or screen distance in pixels.
For example:
var locations = Array();
var items = Array();
and then:
var itemMarker = new google.maps.Marker(opts);
google.maps.event.addListener(itemMarker, 'drag', function(){
for( var n = 0; n < locations.length; n++){
var d = google.maps.geometry.spherical.computeDistanceBetween(this.getPosition(),locations[n].getPosition());
if (d < 5){
// do something when below a given threshold.
}
}
});
items.push(itemMarker);
Demo here:
http://maps.forum.nu/v3/gm_template_simple.html
(Drag the Omaha marker towards Chicago.)
Remember to load the geometry library when you load the API.
I am having a map with some polylines with the distance [api v3]. I want that when someone drag the polyline at the same time the distance also get updated but dont know how to do. Please help me, any good tutorial or another threads are most welcome
Thanks for helping me
Naveen
This page describes using draggable markers and updating the distance when a marker is moved.
http://exploregooglemaps.blogspot.com.br/2012/02/measuring-distance-with-markers.html
There is a attribute which makes your polyline editable.
polyPath.setEditable(true);
Now use a listener to check the editing.
google.maps.event.addListener(polyPath, 'capturing_changed', function() {
var array = polyPath.getPath(); //getPath() gives u array of current markers latlng over map
var tempDistance = 0;
var tempPathArray = [];
for(i = 0; i < array.length; i++){
tempPathArray.push(array.getAt(i));
}
for(k = 1; k < tempPathArray.length; k++)
{
var calculateNewDistance=google.maps.geometry.spherical.computeDistanceBetween(tempPathArray[k-1],tempPathArray[k]);
tempDistance += calculateNewDistance;
}
}
// make sure to add the following script to compute the distance between two latlngs
I have a google maps app which plots markers as it loads. One of the new requirment is to to add a Polygon overlay encompassing a selection of markers by the user. I was able to achieve that using the Geometry Controls of the GMaps Utility Library
Now, the next step is to form a group of the selected markers for which I would need to determine if the lat lngs of the markers falls within the lat lngs of the polygon? Is there a way to determine the lat lngs of a polygon and compute if the marker's lat lng is within its boundaries?
I have never directly messed around with Google Maps, but you can store the points that make up the polygon and then use the Point-In-polygon Algorithm to check if a given longitude and latitude point is within a polygon or not.
// Create polygon method for collision detection
GPolygon.prototype.containsLatLng = function(latLng) {
// Do simple calculation so we don't do more CPU-intensive calcs for obvious misses
var bounds = this.getBounds();
if(!bounds.containsLatLng(latLng)) {
return false;
}
// Point in polygon algorithm found at http://msdn.microsoft.com/en-us/library/cc451895.aspx
var numPoints = this.getVertexCount();
var inPoly = false;
var i;
var j = numPoints-1;
for(var i=0; i < numPoints; i++) {
var vertex1 = this.getVertex(i);
var vertex2 = this.getVertex(j);
if (vertex1.lng() < latLng.lng() && vertex2.lng() >= latLng.lng() || vertex2.lng() < latLng.lng() && vertex1.lng() >= latLng.lng()) {
if (vertex1.lat() + (latLng.lng() - vertex1.lng()) / (vertex2.lng() - vertex1.lng()) * (vertex2.lat() - vertex1.lat()) < latLng.lat()) {
inPoly = !inPoly;
}
}
j = i;
}
return inPoly;
};
Following npinti's suggestion, you may want to check out the following point-in-polygon implementation for Google Maps:
Check if a polygon contains a coordinate in Google Maps
This has been updated in v3. You can do this calculation via the google.maps.geometry.poly namespace API Documentation