Google Maps: Часть 1. Масштабируем карту с несколькими метками и располагаем эту область по центру карты.

Google Maps: Часть 1. Масштабируем карту с несколькими метками и располагаем эту область по центру карты. Хотим на одной карте отображать несколько меток (полилиний, полигонов) и нужно расположить карту так, чтобы все объекты были видны и отцентрированы.

Это делается с помощью кода

var latlngbounds = new google.maps.LatLngBounds();
for ( var i=0; i<points.length; i++ ){
     latlngbounds.extend(points[i]);
}
map.setCenter( latlngbounds.getCenter(), map.fitBounds(latlngbounds));

points — массив координат меток на карте. 

Посмотрите как это выглядит, а дальше мы приведём код примера.

Посмотреть пример.

Масштабируем карту с несколькими метками и располагаем эту область по центру карты

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

Вот код страницы

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Пример 1. Масштабирование и центрирование нескольких маркеров на карте - API Google Maps v3</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">

  function initialize() {
    var latlng = new google.maps.LatLng(56.323678, 44.0);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
		
		setMarkers(map, places);
  }  
  
  var places = [
            ['Ираклион',35.333332,25.133333],
            ['Каламбака',39.704445,21.626944],
    ];    
 
    function setMarkers(map, locations) {
		//Определяем область показа маркеров
		var latlngbounds = new google.maps.LatLngBounds();	 
         
         for (var i = 0; i < places.length; i++) {
            var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
			//Добавляем координаты маркера в область
			latlngbounds.extend(myLatLng);
            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,   
                title: locations[i][0],
            }); 
         }
	//Центрируем и масштабируем карту
	map.setCenter( latlngbounds.getCenter(), map.fitBounds(latlngbounds));	 
    };

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:800px; height:600px"></div>
</body>
</html>

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (3)     Подпишитесь на RSS комментариев к этой статье.

3 комментариев

#775
Дмитрий говорит:
February 7, 2013 at 11:13 pm
после долгого поиска нашел таки дельный способ вставки несколько меток на google maps! спасибо огромное!
#858
Вячеслав говорит:
April 28, 2013 at 06:06 pm
Спасибо большоей, очень помогли
#914
Юра говорит:
July 11, 2013 at 03:42 pm
Я хочу разместить несколько маркеров с радиусами. Необходимо, что бы при выборе масштаба, учитывались границы радиусов. Как реализовать?