i want to draw circle or rectangle when i search somewhere on google maps. How to do this with iframe ? Is there any program or tool or something do this ?
Try this ...
// Instantiates a new CircleOptions object and defines the center and radius
CircleOptions circleOptions = new CircleOptions()
.center(new LatLng(37.4, -122.1))
.radius(1000)); // In meters
// Get back the mutable Circle
Circle circle = myMap.addCircle(circleOptions);
Related
I have a polygon drawn on map and it has to be a specific area where ONLY THERE can be drawn a polyline (some sort of geofencing)? Is it possible to do so?
I though of editable and clickable, but its not exactly what i want to do...
I actually found out the solution.
There is the code (in case someone will need it)
function addLatLng(event) {
var path = poly.getPath();
if(google.maps.geometry.poly.containsLocation(event.latLng, bermudaTriangle)){
path.push(event.latLng);
console.log(path);
}
}
I have a circle on google maps and I have a function which increases the radius. How do I update the circle on the map?
this.markerBoundary.radius = rd; //New radius assigned
//I need to update the shape here but setMap does not work
this.markerBoundary.setMap(this.gmap);
this.bounds = this.markerBoundary.getBounds();
use the setRadius-method instead to set the radius-property:
this.markerBoundary.setRadius(rd);
We have distance search filter. It has a map viewport that allow to set base marker and a input text box that allows enter distance in kilometers.
We then add a circle to show this distance on the map.
How can I zoom the map so it fits the circle?
A google.maps.Circle has a getBounds() method which returns the LatLngBounds of the circle. You may use this bounds as argument for google.maps.Map.fitBounds()
If using a circle, you can do this:
map.fitBounds(circle.getBounds());
...at the end of the init-function.
http://jsfiddle.net/doktormolle/MHLjy/
For multiple circles use union instead of extend:
var bounds = new google.maps.LatLngBounds();
$.each(circles, function(index, circle){
bounds.union(circle.getBounds());
});
map.fitBounds(bounds);
I am working on GMap customization. I want a floating circle to move across a a Polyline. My question is that can we get all LatLng points in a Polyline after a specific interval for eg, all LatLng at interval of 100meters. My polyline code is:
/** polyline **/
var tpath = [
new google.maps.LatLng(15.508718,73.839337),
new google.maps.LatLng(15.511457,73.839165)
];
var travelPath = new google.maps.Polyline({
path : tpath,
map : map,
geodesic : true,
strokeColor : '#000',
strokeOpacity : 0.7,
strokeWeight : 1
});
i get only the end LatLng values. I want the values across the Polyline.
Thanks in advance.
You could use google.maps.geometry.spherical.computeHeading(startPoint, endPoint) to get the heading.
Then compute the distance with google.maps.geometry.spherical.computeDistanceBetween(startPoint, endPoint)
If the distance is 475m and you want to make ~100 jumps just do 475/round(475/100) to calculate the distance you want to move the circle each time. round(475/100) will give you how many times (iterations) you should move the circle.
Then you could use computeOffset(from:LatLng, distance:number, heading:number, radius?:number)
Then you can use computeOffset(circleCenter, distance, heading) to get the new cirecle center point in a for loop the amount of iterations calculated above. Don't forget to include a delay in your loop.
I don't know how to get it with google maps api but you can draw a line to get the points from a start and end manually. It's simple math for a drawing a line and calculate.
You can set On click listener on Polyline by using GoogleMap.OnPolylineClickListener, after it returns the polyline you click on.
List<LatLng> mPoints=polyline.getPoints();
be sure to make your polyline clickable by setting.
lineOptions.clickable(true);
I'm using Google maps V3, I searching for a listener to catch the movement (navigation) of the map, can I do that?
If yes, how can I do that and how can I know the size of movement in x and y ?
EDIT :
As I have a marker on the map, when I click on the marker a div is appeared in same position of the marker, but when I move the map, the maker moves in the same fashion, but the DIV is still in a fixed position, How can I move the div in the same way ?
The maps event 'bounds_changed' will help:
google.maps.event.addListener(map, 'bounds_changed', function () {
// whatsoever..., i.e.
boundsObject = map.getBounds();
});
It returns a bounds object consisting of two LatLng objects (NE and SW )whose values can be retrieved like:
neLatLngObject = boundsObject.getNorthEast();
swLatLngObject = boundsObject.getSouthWest();
// or the center of bounds:
ctrLatLngObject = boundsObject.getCenter();
To find the distance between two points look here: Calculate distance between two points in google maps V3