Menu
I have just copied the code on this question and applied my latitude and longitudes. However, the latitudes and longitudes will be dynamic, and the center of the map will change depending on the latitudes and longitudes of the locations.
The following is the code from the other question
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>Google Maps Multiple Markers</title> <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> </head> <body> <div id="map" style="width: 500px; height: 400px;"></div> <script type="text/javascript"> var locations = [ ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 151.259052, 5], ['Cronulla Beach', -34.028249, 151.157507, 3], ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], ['Maroubra Beach', -33.950198, 151.259302, 1] ]; var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(-33.92, 151.25), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker, i; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); } </script> </body> </html> So my question is, how could I know the center of the map when having dynamic locations. I've tried leaving the center blank but the map didn't load.
241
Get the coordinates of each point. Add the latitudes of each, divide by 3. Add the longitudes of each, divide by 3. The result is the lat and long of the mid point, enter it in google maps.
The geographic midpoint for three or more points on the earth's surface is the center of gravity (center of mass or average location) for all of the points.
It turns out there are many ways to find the center of geographic locations. The easiest way is to average all of the longitude points and average all of the latitude points. This can optionally be weighted by the number of people at each point by taking a weighted mean.
First you can create a LatLngBounds object by including all the dynamically generated locations. Use the extend method to include the points. Then you can get the center of the bound using the getCenter method.
UPDATE:
Code:
var bound = new google.maps.LatLngBounds(); for (i = 0; i < locations.length; i++) { bound.extend( new google.maps.LatLng(locations[i][2], locations[i][3]) ); // OTHER CODE } console.log( bound.getCenter() ); Illustration:
60
I'm doing this by averaging the latitudes and averaging the longitudes and using those averages as my center.
Example:
self.adjustPosition = function () { var lat = 0, lng = 0; if (self.nearbyPlaces().length == 0) { return false; } for (var i = 0; i < self.nearbyPlaces().length; i++) { lat += self.nearbyPlaces()[i].latitude; lng += self.nearbyPlaces()[i].longitude; } lat = lat / self.nearbyPlaces().length; lng = lng / self.nearbyPlaces().length; self.map.setCenter(new window.google.maps.LatLng(lat, lng)); }; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
