Generated 1km grid at a lower zoom level (so we cover a large ground area), this 1km grid data is saved in a DB and loaded back based on the current location the user is on, the problem is when we are loading the data back from DB and simple re-construction of the rectangles is overlapping and not properly projected into the map.
Code is below (generating 1km Grid),
var NE = self.map.getBounds().getNorthEast(); var SW = self.map.getBounds().getSouthWest(); var NLt = NE.lat(); var NW = new google.maps.LatLng(NLt, SW.lng()); var width = google.maps.geometry.spherical.computeDistanceBetween(NE, NW) / 1000; var height = google.maps.geometry.spherical.computeDistanceBetween(SW, NW) / 1000; var NS = google.maps.geometry.spherical.computeOffset(NW, 1000, 90) var SS = google.maps.geometry.spherical.computeOffset(NW, 1000, 180) for (var i = 0; i < height; i++) { NE = google.maps.geometry.spherical.computeOffset(NS, i * 1000, 180) SW = google.maps.geometry.spherical.computeOffset(SS, i * 1000, 180) for (var a = 0; a < width; a++) { var rectangle = new google.maps.Rectangle(); var rectOptions = { strokeColor: "#2C3539", strokeOpacity: 1, strokeWeight: 0.5, fillOpacity: 0, map: map, bounds: new google.maps.LatLngBounds(SW, NE) }; rectangle.setOptions(rectOptions); rectArr.push(rectangle); SW = google.maps.geometry.spherical.computeOffset(SW, 1000, 90) NE = google.maps.geometry.spherical.computeOffset(NE, 1000, 90) } }Note: Loading back from DB and drawing rectangles is pretty straight forward loop and rectangle generation.
أكثر...