Геолокация goole map, как сделать автоматический масштаб карты?

Question

[Serdji]

У меня на сайте есть гугл карта, на ней я раскидал рандомно маркеры и один из маркиров показывает мое место расположение от него и пляшут другие. Но вопрос в том, как сделать так, что бы карта масштабировалась автоматический в зависимости от разброса маркеров ?

Если что то даст код то вот:

Код самой карты и маркеров:

navigator.geolocation.getCurrentPosition( function( position ) {

		var	lat           = position.coords.latitude,
		    lng           = position.coords.longitude,
		    myPos 		  = new google.maps.LatLng( lat, lng ),
		    mapOptions    = { 
				zoom        : 14,
			 	center      : myPos,
			 	mapTypeId   : google.maps.MapTypeId.TERRAIN,
			 	scrollwheel : false,
			},
		    map           = new google.maps.Map( document.getElementById( 'map' ), mapOptions );
		    myMarker 	  = new google.maps.Marker({
			    position  : myPos,
			    map       : map,
			    animation : google.maps.Animation.BOUNCE,
			    title     : 'Вы здесь :D',
			});
			console.log( lat + ' ' + lng );

		var beaches = [
			  [ '1', lat + 0.003, lng + 0.003 ],
			  [ '2', lat + 0.001, lng + 0.01] ,
			  [ '3', lat + 0.005, lng + 0.003 ],
			  [ '4', lat + 0.002, lng + 0.02 ],
			  [ '5', lat + 0.007, lng + 0.006 ],
			  [ '6', lat - 0.01, lng - 0.007 ],
			  [ '7', lat - 0.005, lng + 0.005 ],
			  [ '8', lat + 0.0015, lng - 0.0016 ],
			  [ '9', lat - 0.002, lng + 0.036 ],
			  [ '10', lat + 0.009, lng - 0.004 ]
		];

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

		    var beach  = beaches[i];
		    var marker = new google.maps.Marker({
		      position : {
		      	lat: beach[1], 
		      	lng: beach[2]
		      },
		      map       : map,
		      title     : beach[0],
		      animation : google.maps.Animation.DROP,
		      draggable : true
		    });
	  };

Еще нашел на хабре статейку про карту гугл и там в самом конце написан код, как я понял это и есть автозун, но не как не пойму как его использовать, ссылка на статью.

Сам код :

this.getZoom = function ( bounds ) {

	     var width  = $( '#map' ).width(),
	     	 height = $( '#map' ).height(),
	     	 dlat   = Math.abs( bounds.getNorthEast().lat() - bounds.getSouthWest().lat() ),
	     	 dlon   = Math.abs( bounds.getNorthEast().lng() - bounds.getSouthWest().lng() ),
	     	 max    = 0;

	     if ( dlat > dlon ) {
			max = dlat;
		} else {
			max = dlon;
		}

		var clat = Math.PI * Math.abs( bounds.getSouthWest().lat() + bounds.getNorthEast().lat() ) / 360.,
			C    = 0.0000107288,
			z0   = Math.ceil( Math.log( dlat / ( C * height ) ) / Math.LN2 ),
			z1   = Math.ceil( Math.log( dlon / ( C * width * Math.cos(clat ) ) ) / Math.LN2 );
		//18 – это максимальный zoom для google.maps
		return 18 - ( ( z1 > z0 ) ? z1 : z0 );
	};

Answer 1

[Serdji]

Друзья, кому интересно, я нашел ответ. Все легко и просто

// Область показа маркеров
		var markersBounds = new google.maps.LatLngBounds();
		 
		for (var i = 0; i < markers.length; i++) {
		    var markerPosition = new google.maps.LatLng(markers[i][1], markers[i][2]);
		 
		    // Добавляем координаты маркера в область
		    markersBounds.extend(markerPosition);
		 
		    // Создаём маркер
		    var marker = new google.maps.Marker({
		        position: markerPosition,
		        map: map,   
		        title: markers[i][0],
		    }); 
		}
		 
		// Центрируем и масштабируем карту
		map.setCenter(markersBounds.getCenter(), map.fitBounds(markersBounds));

Answer 2

[Mihai]

/var latlngbounds = new google.maps.LatLngBounds();
latlng.each(function(n){
latlngbounds.extend(n);
});
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds); /
Убрать /

Comments

[Serdji]

А Вы бы не могли прокомментировать данный код и как именно с ним работать ?