Get All Records from MySQL Database That Are Within Google Maps .Getbounds

Get all records from MySQL database that are within Google Maps .getBounds?

if from Google: ( (a, b), (c, d) )

SELECT * FROM tilistings WHERE lat > a AND lat < c AND lng > b AND lng < d

Googlemaps search with mongodb geospatial best strategy

According to the mongo docs, you can query within a bounding box like so

box = [[40.73083, -73.99756], [40.741404,  -73.988135]]
db.places.find({"loc" : {"$within" : {"$box" : box}}})

The key point here is the use of within to query within a bounding box.

In order to get the values for your box, just get the bounds of the google map like so

map.getBounds()

Where map is your google maps object. getBounds will return a LatLngBounds object from which you can build your box to query mongo.

As for ensureIndex, you should do that once as far as I know.

Maps - Pixel to Latitude Longitude calculation

Managed to get it working with viewport-mercator-project:

<script>module = {}</script><script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script><script src="https://unpkg.com/viewport-mercator-project@4.1.0/src/flat-mercator-viewport.js"></script><div id="map_canvas"></div><script>  var mapEl = document.getElementById('map_canvas');  var map;  var mapHeight = 200;  var mapWidth = 500;  var mapZoom = 10;  var mapCenter = [47.376887, 8.541694];
  mapEl.style.width = mapWidth + 'px';  mapEl.style.height = mapHeight + 'px';
  var FlatMercatorViewport = module.exports  var f = FlatMercatorViewport({  longitude: mapCenter[1],  latitude: mapCenter[0],  zoom: mapZoom - 1,  width: mapWidth,  height: mapHeight})
  var [east, south] = (f.unproject([mapWidth, mapHeight]))  var [west, north] = (f.unproject([0, 0]))
  var marker1 = [north, west];  var marker2 = [south, east];
  function initialize() {    var mapOptions = {      zoom: mapZoom,      center: new google.maps.LatLng(mapCenter[0], mapCenter[1]),      mapTypeId: google.maps.MapTypeId.ROADMAP    };    map = new google.maps.Map(document.getElementById('map_canvas'),      mapOptions);    new google.maps.Marker({      map: map,      position: new google.maps.LatLng(marker1[0], marker1[1])    });    new google.maps.Marker({      map: map,      position: new google.maps.LatLng(marker2[0], marker2[1])    })  }
  google.maps.event.addDomListener(window, 'load', initialize);  console.warn = () => {};
</script>

---

Related Topics