I am using google maps api to insert a map in my page and inside of it I insert a rectangle. Everything works fine but I have this question: if the users zooms in or zooms out, I would like to "capture" the real width/height of the map (latitude/longitude left top and latitude/longitude bottom right) so I can select the points in my database that should be inside the viewport of the map.
I can easily select from my databas all the points that are inside a well defined rectangle, so how do I know the real with/height of the map that is being displayed (considering always the zoom applied)?
You're not looking for width and height, you're looking to get the bounds of the map which, conveniently enough is available via the [getBounds][1] method on the map object.
You probably want to do something like this:
google.maps.event.addListener(map,'idle',function() {
//make some ajax request with map.getBounds()
});
Every time the user moves the map (pans/zooms) you can use the getBounds() method to get the lat/lng at the corners of the map.
Related
I have a list of geojson polygons that i am showing on my map, i am trying to determine, based on the current bounds of the map, if any part of the polygon is on the map. Any ideas as far as functions in the api to determine this?
I have tried the bounds.contains() method but it looks like that needs a specific point rather than an area.
Eric, I think you can get a center point of each polygon and set marker to it. So you can use it to represent a polygon.
I am loading 10,000 polygons using map.data.addGeoJson technique in a map all at once — so obviously it takes a while to load them based on the RAM of the computer.
How can I make them load based on the viewport of the computer screen? And load the rest when bounds_changed event is fired?
Depends for example if you have also stored the center of the poligon you can query the polygon with the center inside of the bounds of the viewport of the computer screen.
Get the bounds is not a problem you can use
map.getBounds();
The real problem is how you can query the polygon who satisfied the condition for a correct select.
I am using google maps in order to give some directions from one point to another.
Although, I have set the zoom of the map to 15 the zoom changes after the response of the direction request in order probably to fit the directions into the map.
Does anyone nows how to keep the zoom constant at 15. and focus at the first point?
See the documentation for the DirectionsRenderer
preserveViewport: true
will prevent the DirectionsRenderer from changing the zoom.
To center the map on the first point use the map.setCenter function. You will need to parse the response from the directions service and create a google.maps.LatLng object for the first point.
This example shows one way to parse the response:
http://www.geocodezip.com/v3_directions_custom_iconsC.html
(you don't need everything, just the location of the point you want to center on)
The closest example of what I'm trying to accomplish is a store locator. I have 6,000+ locations that need to be plotted onto a map of Canada.
My original plan was to use Google maps to place markers on each location, but it doesn't make sense to plot them all every time someone attempts to view the map, or various parts of the map.
How does one only put markers on the locations in view? Do I have to send the geo data of all 6000 locations to the client each time they load the map?
Is this doable with maps? (I'm sure it's got to be) Or is there a better service for this kind of thing?
Definitely do not draw all the locations at the same time if they are not all visible. Consider using MarkerManager (article here) or MarkerLight (code: http://gmaps-samples.googlecode.com/svn/trunk/manymarkers/, demo: http://gmaps-samples.googlecode.com/svn/trunk/manymarkers/randommarkers.html). If your initial map and data is such that all the markers would be visible initially, this is definitely the way to go.
You can also use the GEvent object (docs) to detect a "move" event, then check the current display coordinates, draw any that are in bounds. This is the best route if your initial map is too zoomed or small, and/or your marker set is too large to fit on the map's initial view. Your user will be moving the map around, so you can react to that movement and only draw the relevant markers. Take a look at http://econym.org.uk/gmap/gevent.htm for a list of other GEvent events (couldn't find an official list on the API), you might also want to watch "zoom" events.
The two methods can also be combined.
You can use getBounds() to determine the viewable portion of the map. I'd use this data to request from the server all locations within those bounds. Use the bounds_changed event to monitor changes to the viewport and request additional locations as necessary. You'll probably want to set either a minimum zoom level, or maximum number of results to avoid displaying too many locations than is reasonable. Eg, when the map is zoomed out to display all of Canada in a single view.
I have a store locator that displays stores as markers on the map and lists them in a sidebar. There are ~600 stores and they are all loaded at once on the page load via AJAX. So I have access to all them in an array at all times. Now, the functionality I want is that when the user moves/zooms around in the viewport, I get the bounds of the current area being displayed and filter the results in the sidebar (the array of locations, each location has a lat and long) based on whether or not they would be in that area being displayed. Then I would draw the markers of the relevant locations. Basically, whatever locations would be viewable in the viewport would also be listed in the sidebar, staying in sync.
Could someone point me in the right direction to implement this? Does this even sound like an efficient way of handling this functionality?
You need to write a handler for bounds_changed event (more documentation here)
google.maps.event.addListener(map, 'bounds_changed', function(){
// your logic here - map.getBounds() will give you the updated bounds
});
As for efficiency, loading everything at once is probably not the most scalable approach. What if you have 6000 stores next year or you add additional data for every store? A better approach is to pass the bounds back to the server using an AJAX call and only return stores that fall into the area.
You can attach moves/zooms event to the map and basically do a bound check to hide/show markers within the viewing bound. You can achieve this using LatLngBounds(sw?:LatLng, ne?:LatLng) and check the markers LatLng against the map's current bounds using getBounds();. Furthermore within LatLngBounds there's a method to check to see if the LatLtn is within Bounds contains(latLng:LatLng). So you would loop through your markers' LatLng and check against it.
Google Map API LatLngBounds
and
Google Map API Map
As far as the sidebar goes, if you have markers saved then you can just remove or hide the associated locations on the sidebar.