CODEWITHSUNDEEP
javascriptgoogle-mapszooming
Justin
Justin

Reputation: 137

Google Maps Zoom Show All Markers

Right now I have an array of locations and one of those locations will be a marker. The second marker will be based on the location a user searches.

Right now the code is this:

function find_closest_marker( lat1, lon1 ) {

  var pi = Math.PI;
  var R = 6371; //equatorial radius
  var distances = [];
  var closest = -1;

  var markers = allMyLocations;


  for( i=0;i<markers.length; i++ ) {

    var lat2 = markers[i][1];
    var lon2 = markers[i][2];

    var chLat = lat2-lat1;
    var chLon = lon2-lon1;


    var dLat = chLat*(pi/180);
    var dLon = chLon*(pi/180);

    var rLat1 = lat1*(pi/180);
    var rLat2 = lat2*(pi/180);

    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(rLat1) * Math.cos(rLat2); 
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
    var d = R * c;


    distances[i] = d;
    if ( closest == -1 || d < distances[closest] ) {
        closest = i;

    }



   var closestMarker = markers[closest];
   var newLat = markers[closest][1]
   var newLon = markers[closest][2]
   var b = new google.maps.LatLng(newLat, newLon);
   map.setCenter(b);
   map.setZoom(10);

   google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
     ShowHideMenu();

      if($('#newPos').length==0){
    $('div.gmnoprint').last().parent().wrap('<div id="newPos" />');
     }
     //showInfoWindow(map, closest);    

    });
  }
}

Right now this code gets the closest location from where a user searches and centers that on the page. What I'm trying to do is make it zoom so that the the location searched is centered and the location in the array is within the area of the maps. The map isn't a normal size, it is 790px by 400px.

Can someone please help me with the logic of zoom and how I could make this possible?

Upvotes: 2

Views: 2159

Answers (1)

rlcrews
rlcrews

Reputation: 3562

Have you tried the LatLngBounds function This function will construct a viewable are based upon the soutwest and north east corners. As a result the pins will be centered in the map. You can use zoom if you want but you could omit it to see if it gives you the desired result.

A sample of the code would be:

make your declaration 

var mybounds = new google.maps.LatLngBounds();

then within your event listener where you create the markers add 

mybounds.extend(b);

then finally outside of the event listener

map.fitBounds(mybounds)

Upvotes: 6

Related Questions