I am using Google Maps v2 in my application. When the user pans or zooms on the screen I would like to get the area of the map based on which I want to fetch the POI only in the screen view part.
I went through the documentation but could not find any help.
You need to use Projection and VisibleRegion classes in order to get visible LatLng region.
So your code would look something like:
LatLngBounds curScreen = googleMap.getProjection()
.getVisibleRegion().latLngBounds;
In Android(Kotlin) you can find LatLng this way, in every time zoom or. gesture detect
private var mMap: GoogleMap? = null
..........
mMap?.setOnCameraMoveStartedListener { reasonCode ->
if (reasonCode == GoogleMap.OnCameraMoveStartedListener.REASON_GESTURE) {
val curScreen: LatLngBounds = mMap!!.getProjection().getVisibleRegion().latLngBounds
var northeast=curScreen.northeast
var southwest=curScreen.southwest
var center=curScreen.center
Log.v("northeast LatLng","-:"+northeast)
Log.v("southwest LatLng","-:"+southwest)
Log.v("center LatLng","-:"+center)
}
}
Related
I am trying to build an application with google direction API on Android.
I want apply direction mode as driving but when there is no route available, I want to apply dot polylines like Google Map App.
Bellow is sample code for apply polylines pattern for route from atabouraya's answer but it is opposite of what I want to apply.
public static final int PATTERN_GAP_LENGTH_PX = 20;
public static final PatternItem DOT = new Dot();
public static final PatternItem DASH = new Dash(PATTERN_DASH_LENGTH_PX);
public static final PatternItem GAP = new Gap(PATTERN_GAP_LENGTH_PX);
public static final List<PatternItem> PATTERN_POLYGON_ALPHA = Arrays.asList(GAP, DASH);
private void drawDashedLeg(GoogleMap googleMap, Route route) {
PolylineOptions polyOptions = new PolylineOptions();
polyOptions.color(ContextCompat.getColor(getContext(), R.color.coolgrey));
polyOptions.addAll(route.getPoints());
polyOptions.pattern(PATTERN_POLYGON_ALPHA);
Polyline polyline = googleMap.addPolyline(polyOptions);
polylines.add(polyline);
}
And here is another reference for how to draw curved dashed line on Google Map as they focus only how to draw curved line from one location to another.
My purpose is how to draw route from one location to another as driving route and apply walking mode when there is no route available.
Anyone who have any idea on this please help to share it. Thank you.
For my temporary solution, I just separate polyline to 3 parts:
From origin (driver's current location) to first route (available driving route)
From first available driving route until the last of driving route
From last available driving route to destination (store's location)
Here is my sample code after decode polylinePoint
if (routeList.size > 0) {
val polylineOptionsWalkingStart = getPolylineOptionsConfig(routeI)
val polylineOptionsWalingEnd = getPolylineOptionsConfig(routeI)
val polylineOptionsDriving = getPolylineOptionsConfig(routeI)
// Add walking route from origin to first driving route
polylineOptionsWalkingStart.add(origin, routeList[0]!!)
.pattern(MapUtil.PATTERN_POLYGON_ALPHA)
// Add walking route from last driving route to destination
polylineOptionsWalingEnd.add(
routeList[routeList.size - 1]!!,
destination
).pattern(MapUtil.PATTERN_POLYGON_ALPHA)
// Add driving route from origin to destination
polylineOptionsDriving.addAll(routeList)
// Adding route for driving and walking mode on the map
polylineWalkingStart = mMap.addPolyline(polylineOptionsWalkingStart)
polylineWalkingEnd = mMap.addPolyline(polylineOptionsWalingEnd)
polylineDriving = mMap.addPolyline(polylineOptionsDriving)
}
and here is my PolylineOptions configuration
private fun getPolylineOptionsConfig(mainRoute: Int): PolylineOptions {
val polylineOptions = PolylineOptions().width(18f).geodesic(true)
return when (mainRoute) {
0 -> {
polylineOptions.color(Color.parseColor("#B1C001"))
}
1 -> {
polylineOptions.color(Color.parseColor("#0099D8"))
}
2 -> {
polylineOptions.color(Color.parseColor("#1777EB"))
}
else -> {
polylineOptions.color(Color.parseColor("#515C6F"))
}
}
}
And here is polyline pattern
private val DOT: PatternItem = Dot()
val PATTERN_POLYGON_ALPHA = listOf(DOT)
If you have another better solution please share your answer here.
Anyway, I hope my answer can help you in this situation.
In the map below I have three markers, the red one is the users current position while the green ones are the clickable markers.
Clicking the bottom one is not a problem. But clicking the one the user is close to is a different matter as the position marker is in the way. So for that one the user usually has to click 2 - 8 times before the green one is touched.
Is there a way to define that some markers are not clickable so they dont trigger the onMarkerClickListener?
I am aware that I can change the z-index and put the position marker below but it wont be nice for the user if he can't see his own position when close to another marker.
Another solution can think of but dont like is to intercept the click for the user marker and then go through a list of the other markers and find possible matches and trigger a click myself. I'd prefer an existing solution.
So what I have ended up doing is adding the object the marker represents to its tag. Then in onMarkerClickListener I check the marker type by the tag object. Like so (kotlin):
map.setOnMarkerClickListener { marker ->
val mapEvent: MapEvent?
mapEvent =
if (marker.tag is MapEvent) {
marker.tag as MapEvent?
} else {
val clickedMarker = getClickedMarker(from = map)
if (clickedMarker != null)
clickedMarker.tag as MapEvent?
else
return#setOnMarkerClickListener false
}
markerClicked(this#MainActivity, mapEvent)
true
}
If the object is of type MapEvent I call markerClicked() if the clicked marker is not of type MapEvent I go through a list of all markers to see if the clicked marker is inside the radius of any of the MapEvent markers. If so I use that marker and call markerClicked().
This is how I sort through the list of markers:
fun getClickedMarker(from: GoogleMap): Marker? {
if (!::userMarker.isInitialized)
return null
var clickWidth = ContextCompat.getDrawable(App.context, R.drawable.ic_map_permanent)!!.intrinsicWidth
clickWidth += (clickWidth / 3)
val g0 = from.projection.fromScreenLocation(Point(0, 0))
val g1 = from.projection.fromScreenLocation(Point(clickWidth, clickWidth))
val latRadius = (g1.latitude - g0.latitude) / 2
val lonRadius = (g1.longitude - g0.longitude) / 2
return try {
eventMarkers.single {
it.position!!.latitude - latRadius > userMarker.position.latitude && // west
it.position!!.latitude + latRadius < userMarker.position.latitude && // east
it.position!!.longitude + lonRadius > userMarker.position.longitude && // north
it.position!!.longitude - lonRadius < userMarker.position.longitude // south
}
} catch (e: Exception) {
null
}
}
Please comment if anything is unclear. I hope this might help anyone else!
I have a list of addresses and I want to mark this places all in google maps(nearly 1k), getting maybe its cordinates to save them.
Actually I am not programming an app, but I know both lenguages (Android and PHP) and I think it is possible to do this with both. Any idea ? Thank in advance!
Have you tried the google maps api?
https://developers.google.com/maps/documentation/geocoding/intro
https://developers.google.com/maps/documentation/geocoding/intro#ReverseGeocoding
This is what you are looking for I think.
EDIT: to mark stars on map
// In the following example, markers appear when the user clicks on the map.
// Each marker is labeled with a single alphabetical character.
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
var labelIndex = 0;
function initialize() {
var bangalore = { lat: 12.97, lng: 77.59 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: bangalore
});
// This event listener calls addMarker() when the map is clicked.
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng, map);
});
// Add a marker at the center of the map.
addMarker(bangalore, map);
}
// Adds a marker to the map.
function addMarker(location, map) {
// Add the marker at the clicked location, and add the next-available label
// from the array of alphabetical characters.
var marker = new google.maps.Marker({
position: location,
label: labels[labelIndex++ % labels.length],
map: map
});
}
I'm using MapQuest (since Google Map API will be down in september) and I'd like to add a point at an exact coordinates position.
I've created a movieClip named geoPoint and traced a circle in it.
Now, I've managed to display the coordinates in a text field like that :
if (Geolocation.isSupported){
var my_geo:Geolocation = new Geolocation();
my_geo.addEventListener(GeolocationEvent.UPDATE, onGeoUpdate);
my_geo.setRequestedUpdateInterval(50);
var my_txt:TextField = new TextField();
my_txt.wordWrap=true;
addChild(my_txt);
}
function onGeoUpdate(e:GeolocationEvent):void{
my_txt.text = "My Latitude is "+e.latitude+" and my Longitude is "+e.longitude;
}
Now is it possible to add my movieClip at the e.latitude and e.longitude point ?
I've tried :
var geo:MovieClip;
geo = new geoPoint;
addChild(geo(new LatLng(e.latitude, e.longitude)));
but it doesn't work.
Someone knows how can I do it ?
Thanks !
It should be
geo = new geoPoint();
You should also probably figure how to translate latitude and longitude to x and y coordinates, because I'm doubtful the next line will work. You're calling a MovieClip constructor that takes a LatLng argument.
For what you need to achive, you may have to use a class provided by the MapQuest Api, like PolygonOverlay or CircleOverlay. There is an example here under "Shape Collections" http://developer.mapquest.com/content/as3/v7/7.0.6_MQ/samples/samplesexplorer/index.html#
I am creating a Phonegap App (using jQuery and Google Maps API V3) related to travelling and would like to show the user the distance he/she has travelled since starting the app.
Is there any Google function for this? Or can anyone recommend what I can do to get the total distance travelled?
It can be done easily. You have to understand, by using a Google Maps API for jQuery you have all needed tools to do it by yourself.
First, you need to define a time period (lets say 1 minute). We will need it to create a reference point of our movements. Next step is to use phonegap/cordova geolocation API to calculate our position (latitude and longitude):
http://docs.phonegap.com/en/1.0.0/phonegap_geolocation_geolocation.md.html
At this point choose do you want to:
Store a position (latitude and longitude) every 1 minute in some js array
Or do the same thing like in point 1 and also show it on the map with gmap addMarker ability.
At the end you need to calculate a distance. Loop through the position array and use latitude and longitude to calculate a distance between every available point. Here you will find function used for a such calculation (with a js example):
http://www.movable-type.co.uk/scripts/latlong.html
Or you can use Google Maps APi function:
google.maps.geometry.spherical.computeDistanceBetween (latLngA, latLngB);
EDIT:
Here's a working example for you: http://jsfiddle.net/Gajotres/6YpAG/
Code:
$(document).ready(function(){
// Chicago
var coordinateObject= new Object();
coordinateObject.lat = '41.83682786072714';
coordinateObject.lng = '-87.626953125';
geoLocationHandler.addLocation(coordinateObject);
// New York
var coordinateObject= new Object();
coordinateObject.lat = '40.58058466412761';
coordinateObject.lng = '-74.00390625';
geoLocationHandler.addLocation(coordinateObject);
// Toronto
var coordinateObject= new Object();
coordinateObject.lat = '43.70759350405294';
coordinateObject.lng = '-79.365234375';
geoLocationHandler.addLocation(coordinateObject);
var len = geoLocationHandler.arrLocations.length;
for (var i = 0; i < len; i++) {
if(i == 1){
geoLocationHandler.distance += geoLocationHandler.calcDistance(geoLocationHandler.arrLocations[i-1].lat,geoLocationHandler.arrLocations[i-1].lng,geoLocationHandler.arrLocations[i].lat,geoLocationHandler.arrLocations[i].lng);
}
}
alert(geoLocationHandler.distance);
});
var geoLocationHandler = {
arrLocations : [],
distance : 0,
addLocation:function(obj){
geoLocationHandler.arrLocations.push(obj);
},
calcDistance:function(fromLat, fromLng, toLat, toLng) {
return google.maps.geometry.spherical.computeDistanceBetween(new google.maps.LatLng(fromLat, fromLng), new google.maps.LatLng(toLat, toLng));
}
};
Final result is a distance expressed in meters.
Every time you have a new coordination use this to create a new object and add it to the array:
var coordinateObject= new Object();
coordinateObject.lat = '41.83682786072714'; // Change with your latitude
coordinateObject.lng = '-87.626953125'; // Change with your longitude
geoLocationHandler.addLocation(coordinateObject);