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
Related
I am using Google Maps, and want to be able to detect if a user is in the radius of a Marker (placed on map), using the users current location. I have the users current location coordinates (latitude and longitude) and the marker's coordinates, but do not know how to calculate whether the user is in the area. The picture below might best describe what I want to do.
I have an algorithm like this:
map.OnInfoWindowClickListener(new OnInfoWindowClickListener()){
public void isUserInArea(Marker marker){
float[] distance = new float[2];
//users current location
Location.distanceBetween(currentLocation.getLatitude(),currentLocatiocation.getLongitude(),
marker.getPosition().latitude, marker.getPosition().longitude, distance);
}
Which doesn't find if the current location is within marker region because I can't get hold of the markers circle. It's the closest i've got to it however. Would appreciate help.
To help, I add a circle to a map like this
// adding circle to map
circleOptions = new CircleOptions();
circleOptions.center(new LatLng(locationlist.get(i)
.getLatitude(), locationlist.get(i).getLongitude()));
circleOptions.radius(20);
circleOptions.strokeColor(Color.BLUE);
circleOptions.fillColor(Color.BLUE);
map.addCircle(circleOptions);
//check that all tasks are in circle radius
Marker locationMarker = map.addMarker(markerOp);
locationMarker.showInfoWindow();
I use this:
Location.distanceBetween(mMarker.getPosition().latitude,
mMarker.getPosition().longitude, mCircle.getCenter().latitude,
mCircle.getCenter().longitude, distance);
if (distance[0] > mCircle.getRadius()) {
//Do what you need
}else if (distance[0] < mCircle.getRadius()) {
//Do what you need
}
Why don't you use proximity alerts?
This is what you can do: instead of drawing a circle, place a Marker on the map like so:
map.addMarker(new MarkerOptions()
.title(name)
.icon(BitmapDescriptorFactory.fromResource(R.drawable.gpsmap))
.position(coordinates)
.flat(true)
.rotation(90));
and then add a proximity alert to it calling the following method:
// Proximity alert
private void addProximityAlert(double lat, double lng, int id){
Intent intent = new Intent(PROX_ALERT_INTENT);
PendingIntent proximityIntent = PendingIntent.getBroadcast(this, id, intent, Intent.FLAG_ACTIVITY_NEW_TASK);
locationManager.addProximityAlert(lat, lng, POINT_RADIUS, EXPIRATION, proximityIntent);
}
where EXPIRATION = -1 (so the proximity alert doesn't expire) and POINT_RADIUS takes the values of the radius of your previous circle.
Then you need to add a proximity alert listener to the map:
IntentFilter filter = new IntentFilter(PROX_ALERT_INTENT);
registerReceiver(new ProximityIntentReceiver(), filter);
where PROX_ALERT_INTENT = "yourProjectPackageName.ProximityActivity";
Hope this helps
This tutorial can help your requirement.
User entry exit proximity alert
all the best.
I'm working on a WordPress plugin where users can build a route map and show it on their site. In the admin panel it shows a preview of the existing route on the map, and also a marker they can drag to a new location that they want to add to the map.
The default zoom location for the map is set in Europe. But if they for example add a few stops in Australia, then only that part of the world is visible and you won't see the draggable icon anymore that is used to specify new locations, and that is a problem.
So I thought of fixing it with fitbounds, so it would always make the draggable marker and the already created route fit on the screen. The code I have does show all the locations on the map, but because I draw polylines between the visited locations, it somehow also draws a line to the draggable marker in Europe, which it shouldn't do because it's not part of the route.
You can see an example here -> http://jsfiddle.net/tijmen/HctvT/1/
Part of the code:
/* Draw lines between the markers */
function drawFlightPlan( flightPlanCoordinates ) {
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: "#ad1700",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap( map );
fitBounds( flightPlanCoordinates );
}
/* Zoom the map so that all markers fit in the window */
function fitBounds( flightPlanCoordinates ) {
var bounds = new google.maps.LatLngBounds ();
/* Include this latlng value in europe, but I dont want a line going to that latng... */
var defaultLatlng = new google.maps.LatLng('52.378153', '4.899363');
flightPlanCoordinates.push( defaultLatlng );
for ( var i = 0, flightPlanLen = flightPlanCoordinates.length; i < flightPlanLen; i++ ) {
bounds.extend ( flightPlanCoordinates[i] );
}
map.fitBounds( bounds );
}
The lines between the markers in Australia are fine, but the line to Europe shouldn't be there (normally there would just be a different colored marker in Europe).
I don't really understand why there is a line going to Europe in the first place. The flightPath.setMap( map ); is run inside the drawFlightPlan function. And it's not untill the fitBounds function is that I add the latlng value for Europe to the flightPlanCoordinates array.
I searched for a way to remove a partial polyline, but I can't find anything about it that works. I know how to remove all the markers or polylines, but not a single polyline part. Is that even possible?
Any ideas or suggestion how to fix this, or is this something that cannot be fixed the way I want to?
initialize bounds with the LatLng in europe instead of pushing this LatLng into flightPlanCoordinates
http://jsfiddle.net/doktormolle/HctvT/4/
When you use a reference to an array as path for a polyline any changes to the array will affect the polyline.
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);
There are about 100 markers on a google map plus there is one special marker that needs to be visible. Currently, the markers around it hide it totally or partially when the map is zoomed out. I need that marker to be fully visible and I think keeping it on top of all other markers should do the trick. But I cannot find a way to modify its stacking order (z-index).
This is for Google Maps API 2.
For Google Maps API 3 use the setZIndex(zIndex:number) of the marker.
See:
http://code.google.com/apis/maps/documentation/javascript/reference.html#Marker
Use the zIndexProcess option in GMarkerOptions when you create the marker that you want on top. For example:
var pt = new GLatLng(42.2659, -83.74861);
var marker = new GMarker(pt, {zIndexProcess: function() { return 9999; }});
map.addOverlay(marker);
I believe the default is to have a z-index that is the latitude of the point of the marker, so this should be fairly safe at bringing a single marker to the front. Further, this was just a simple example; you can set the z-index of all your markers in whatever simple or complex way you want. Another example is to have two functions: one for special markers and one for the rest.
var pt1 = new GLatLng(42.2659, -83.74861);
var pt2 = new GLatLng(42.3000, -83.74000);
var marker1 = new GMarker(pt1, {zIndexProcess: specialMarker});
var marker2 = new GMarker(pt2, {zIndexProcess: normalMarker});
map.addOverlay(marker1);
map.addOverlay(marker2);
function specialMarker() {
return 9999;
}
function normalMarker() {
return Math.floor(Math.random()*1000);
}
Adding on to jhanifen's answer, if you want to get your one special marker to be on top of all the rest, set it's zIndex to google.maps.Marker.MAX_ZINDEX + 1. This will make sure that it is on top of any marker on the map.