I have a gmap with direction line displayed on it (2 or more points). Is there any way to get all points from map depending viewport (zoom level), only those that user can see ?
I won't give you the tea spoon version, but here is how you do it. First of all, make sure you have all your markers available in an array.
Get the bounds from your map: map.getBounds(). This will return a LatLngBounds object, which contains the coordinates of the bottom left point of your viewport as well as the top right part.
Iterate through all your markers. Get their positions: marker.getPosition() and check if they are above and to the right of the map bounds south west point, as well as below and to the left of the map bounds north east point.
If they are, add these points to an array.
That array now contains all the points in your viewport. Repeat as necessary.
More information can be found in the Google Maps API v3 reference
Related
My map allows a user to draw circles around a clicked marker. To keep it in bounds of the furthest marker I need to know where that furthest marker is. How do I find the furthest marker from a clicked marker? But to complicate things I need to read the furthest marker title information to make sure it's the correct type of marker. It would have a special 3 letter code in the title to test if it's the correct marker to use. I can only check if it's there not what it says.
The simplest answer was to calculate the furthest distance in all directions at the get go. I did this by first finding a bounding box by calculating the:
$minLat = $rowCorners[minLat]-0.25;
$maxLat = $rowCorners[maxLat]+0.25;
$minLng = $rowCorners[minLng]+0.25;
$maxLng = $rowCorners[maxLng]-0.25;
In this case I gave myself a little room to work in, exact distance were not that critical. By using that information it was easy to draw the circles needed by the users.
I have a very strange requirement from my client and I am not sure if it is achievable.
Here's the requirement:
The client wants to display a Map zoomed to a country level having 4 filters:
1. Drop down based state filter which should populate the cities in the city filter and the map should zoom to state level
2. Drop down based city filter which should populate the area filter and the map should zoom to city level
3. Drop down based area filter which would zoom the map to the area level.
This is where it gets tricky:
Once the map is zoomed at area level, it should display all the markers in that area and none of the markers have coordinates or address. They are only attributed to that area boundaries and are randomly/evenly spread out in that area so that all the markers are visible.
A marker clustering should be fine here but I don't know how the markers themselves can be placed in that area without coordinates or addresses, just based on area boundary coordinates.
Now comes the fourth filter:
4. A search box filter which will search the data only within those area markers and whichever matches, is shown and the rest are hidden
I believe I can still take care of the 4th filter, but it's the 3rd filter which is driving me crazy.
Is there any mechanism by which we can place multiple markers (with no coordinates or address, only associated to an area boundary), inside a highlighted area boundary and randomly/evenly distributed within that area so that all the markers are visible?
Thanks in advance.
One way of solving this comes to mind is using the getCenter from LatLngBounds class from google maps. This does require getting the polygon coordinates from somewhere else.
let coords = [{lat: -34, lng: 151},{lat: -34.5, lng: 151.5},etc]
let bounds = new google.maps.LatLngBounds();
coords.forEach(LatLng => bounds.extend(LatLng));
let center = bounds.getCenter(); //returns LatLng variable
This can also be used to center your google maps on an area with the function fitBounds:
map.fitBounds(bounds);
Using this would solve 2 of your challanges, the zoom and center
I'm trying to find out which is the currently centered tile in OpenLayers 3.
I can get the current position as latitude/longitude with map.getView().getCenter(), and the zoom level as map.getView().getZoom().
Am I supposed to convert this to map tiles manually, or does OpenLayers 3 provide a functionality to easily calculate the correct tile x/y indices (the one in which the center lat/lon is located), or am I supposed to calculate this by myself?
you can convert the center position with
center = ol.proj.transform(center, 'EPSG:900913', 'EPSG:4326');
Given a ol3 tile source, you can get the TileGrid by source.getTileGrid().
Then use the getTileCoordForCoordAndResolution method, to get the tile coordinates from a given map coordinate and resolution.
I have below inputs to achieve polygon with different points on google map.
Center point: for ex: London new google.maps.LatLng(51.8100844,-0.02911359999995966)
Lat: for ex: 51.8100844
Lng: for ex: -0.02911359999995966
Distance(Miles): for ex: 10 miles
output same like this.
Map should be zoom out/in dynamically so the whole polygon can be visible within Map area.
if distance gets high then it will shown like this.
suppose distance i have entered 100 miles then
ultimately zoom level not reset even though distance changed.
Create a LatLngBounds-object of the polygon-path and pass it as argument to the fitBounds-method of the map.
I am trying to create a location based search application. I need to display search results using marker. By using the Marker code sample from google map javascript API, the marker is displayed at the center of the map div. I need to point the marker at the bottom of the map so that i can show the search result above the marker.
Check this url http://www.groupon.com/now#/categories?address=denver&hint=47.5615%2C-52.7127&lat=39.7391536&lng=-104.9847034 . It shows marker to the bottom if the map. I need to disply like this.
Placing the marker doesn't force the map to center on it - the map itself is being set so its centerpoint is the same as the marker. You need to set the center of the map to be 'above' (in latitude) the center of the marker. use .setCenter(LatLng) on the map object.
Google map API has function to set the center point of view. If you don't provide it centers the marker lat/long you provide. You need to add/subtract lat/long accordingly to set center position. From this I mean you should take the current lat/long of the marker in separate variables, add/subtract values to adjust centre point and set the map center point with those.
Hope this help. :)
Based on the reply from Oliver (thanks), here is what i did to solve this issue.
In https://developers.google.com/maps/documentation/javascript/reference we see that we have to add map.setCenter({lat: -34, lng: 151}); - i have place it after this line var myLatlng = new google.maps.LatLng(your latitude, your longitude);
To get the values i have opened the google map and i clicked on my area, the pointer shows at the bottom of the page and i see the latitude and longitude (we need them for the line var myLatlng = new google.maps.LatLng(your latitude, your longitude); ).
Than i dragged the map down and clicked again in the middle of the map to see the latit. and longit. of that area and these two will be added in the line that you have to add - map.setCenter({lat: new latitude value, lng: new longitude value});