Главная » Полезные статьи » Язык PHP » 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>

Источник:  loco.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи