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

almix — 17 ноября 2011 (обновлял 11 декабря 2011 в 22:06)
Комментарии (3) Категории: PHP, Общие вопросы | Тэги: maps Google Maps версия для печати

Хотим на одной карте отображать несколько меток (полилиний, полигонов) и нужно расположить карту так, чтобы все объекты были видны и отцентрированы.

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

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>

Источник: webmap-blog.ru/google-maps/6-poleznyx-reshenij-dlya-raboty-s-api-google-maps-v3

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

Я хочу разместить несколько маркеров с радиусами. Необходимо, что бы при выборе масштаба, учитывались границы радиусов. Как реализовать?

Пн	Вт	Ср	Чт	Пт	Сб	Вс
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

КОДИНГ

ДИЗАЙН

CMS и CMF

SEO И ПРОДВИЖЕНИЕ

ЖИЗНЬ

СОФТ

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

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

Календарь

Тэги