I have a lot of addresses in my database I want to add to Google maps as markers. I only want to load and add the markers that are in the selected area on the map. If the map is zoomed or dragged, it should update the markers on the map.
How do I do that?
Thanks very much in advance!
For managing a lot of markers, you will definitely want to leverage infrastructure that has already been built to do this. There is actually a great post on the Google Developers blog that discusses the popular options.
https://developers.google.com/maps/articles/toomanymarkers
The Marker Clusterer is a very common component that I see all over the place when it comes to maps apps, and seems to fit the requirements that you are looking for. I would also take a look at Fusion Tables, as it makes building a map with thousands of locations extremely simple.
As Aristos said the markers will be showed automatically when coming into focus. BUT, if I you a bazillion of contacts, it could indeed be easier to do it only when required.
My strategy would be:
Keep track of the addresses you have added -- no point doing it twice.
From the address, get the LatLng.
get the map's current bounds (use getBounds() to get the min/max LatLng of the map currently displayed)
check whether the LatLng of the address is within the bounds.
if it is, add a marker.
Loop
If you really have a lot of addresses you might want to prefetch the LatLng and store that in an SQL table. You could then query the table with the intervals.
HTH
EDIT: some code. Assuming you have an Array() of markers, and the Northwest and Southeast boundaries, you could do this:
function filterMarkers(nw, se, myMarkers) {
var north=nw.lat();
var west=nw.lng();
var south=se.lat();
var east=se.lng();
var isInsideBounds=[];
for (var i in myMarkers) {
if(myMarkers[i].position.lat()>=north && myMarkers[i].position.lat()=<south && myMarkers[i].position.lng()>=west && myMarkers[i].position.lng()=<east) {
isInsideBounds.push(myMarkers[i]);
}
}
return isInsideBounds;
}
Related
newcomer here, been searching through google but not finding the help i need.
Im making a website for outdoor gyms, where I have placed my markers with coords(may have to stash them in mysql) but currently in my code in a markers array.
I want the user to be able to input their adress/county to find the closest outdoor gym/ running track based on their preference. The search should search through the markers and find the closest one in that area.
Until now, i have the map, the markers, the searchfunction is a big obstacle for me atm.
I appreciate any kind of help.
you could save markers by their coordinates (longitude and latitude) on your db. Then, you could use leaflet to load googleMap or openstreet map and draw your markers.
This is an useful tutorial https://scotch.io/tutorials/making-mean-apps-with-google-maps-part-i. I think it is the good point to start.
I have an array of places in LatLng, across the US. I've pulled my current location, and I want to display the places in that aforementioned list, that are within a certain distance of my current location. This is somewhat like a places radar search, except I already have my locations, I'm just trying to display relevant ones. Any advice?
Not tied to google maps API, but it is free with a high limit of requests
I've been exploring using, but I can't figure out how to do what I'm trying to.
link 1
link 2
https://developers.google.com/maps/documentation/distance-matrix/intro?hl=en
There are plenty of Map APIs that allow you to enter two locations and calculate the distance between them. It is my understanding that LatLngs are an accepted format for the points you are calculating between.
I'm using CFGMap solution to place markers on a google map (API V3) but I want the map to always be centered on a certain long/latitude. Right now it seems to center on the last marker placed on the map so if the majority are where I want the long/lat centered then one random marker will take view miles away.
Any help on this is appreciated.
Thanks!
CFGMap is infuriating for it's lack of documentation. I don't use it myself; I only tried to track down something that might help you. On the face of it, it appears only to take a tiny subset of the full API functionality and doesn't offer much else.
From what I can glean from the testmap.js found here, it appears that you can only center the map on an existing marker in your locations array (see line 616 of the github file).
_cfGMapObj.resetCenterToLoc(index);
So, for example, in the source of the example is the line:
_cfGMapObj.resetCenterToLoc($('#locID','#printLink').val());
which grabs the number from the value of the current option in the select at the top of the page.
Now, if you chose instead to knock CFGMap on the head you could employ the Map API fully and set the center of the map using the setCenter method of the API.:
map.setCenter(new google.maps.LatLng(lat, lng));
e.g.
map.setCenter(new google.maps.LatLng(57.4419, -121.1419));
which in my mind is much easier. Plus, if you decided to do this, there are tons more articles on the API on StackOverflow than there are on CFGMap. YMMV.
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.