Слава Україні
Glory to Ukraine
Save the World
Жыве Беларусь
Live Belarus



Урок - Параметр mapTypeControlOption. Измнение внешнего вида панели навигации картой в Google Maps API 3.

Главная » Курсы » Курс Google Maps 3, примеры использования. » Урок - Параметр mapTypeControlOption. Измнение внешнего вида панели навигации картой в Google Maps API 3.

Обучающий онлайн курс
Google Maps 3, примеры использования.

Лицензия: Копирование запрещено.

Параметр navigationControlOptions указывает внешний вид для панели навигации (маштабирование и панарамирование) карты.

Параметр navigationControlOptions имеет следующие значения:

  • google.maps.NavigationControlStyle.DEFAULT - значение по умолчанию, указывает изменять панель навигации в зависимости от размеров карты и др. параметров.
  • google.maps.NavigationControlStyle.SMALL - элемент масштабирования позволяет увеличивать и уменьшать масштаб.
  • google.maps.NavigationControlStyle.ANDROID - элемент масштабирования позволяет увеличивать и уменьшать масштаб, предназначен для ОС ANDROID.
  • google.maps.NavigationControlStyle.ZOOM_PAN - элемент масштабирования позволяет увеличивать и уменьшать масштаб,имеет бегунов изменения масштаба, имеет кнопки панаромирования.

 

navigationControlOptions = DEFAULT.

Что бы увидеть разницу между тем, как меняется панель навигации картой - уменьшим размеры карты с 400px до 200px:

<div id="map" style="width:200px;height:200px"></div>

 

И весь пример целиком:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        function pageOnLoad() {
            var centerLatLng = new google.maps.LatLng(50.435132,30.55777);
            var mapOptions = {
                zoom: 10,
                center: centerLatLng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map"), mapOptions);    
        }
    </script>
</head>
<body onload="pageOnLoad()"> 
    <div id="map" style="width:200px;height:200px"></div>
</body>
</html>

Сравните внешний вид панели навигации при размерах 200х200 и 400x400x.

 

navigationControlOptions = SMALL.

Параметр navigationControlOptions представляет собой массив. В элементе 'style' массива и указывается тип:

var mapOptions = {
	zoom: 10,
	center: centerLatLng,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	navigationControlOptions: {
		style: google.maps.NavigationControlStyle.SMALL 
	}
} 

и весь пример целиком:

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
		function pageOnLoad() {
			var centerLatLng = new google.maps.LatLng(50.435132,30.55777);
			var mapOptions = {
				zoom: 10,
				center: centerLatLng,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				navigationControlOptions: {
					style: google.maps.NavigationControlStyle.SMALL 
				}
			}
			var map = new google.maps.Map(document.getElementById("map"), mapOptions);	
		}
	</script>
</head>
<body onload="pageOnLoad()"> 
	<div id="map" style="width:400px;height:400px"></div>
</body>
</html>

 

navigationControlOptions = ANDROID.

Параметр mapTypeControlOption представляет собой массив. В элементе 'style' массива и указывается тип:

var mapOptions = {
	zoom: 10,
	center: centerLatLng,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	navigationControlOptions: {
		style: google.maps.NavigationControlStyle.ANDROID
	}
} 

и весь пример целиком:

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
		function pageOnLoad() {
			var centerLatLng = new google.maps.LatLng(50.435132,30.55777);
			var mapOptions = {
				zoom: 10,
				center: centerLatLng,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				navigationControlOptions: {
					style: google.maps.NavigationControlStyle.ANDROID 
				}
			}
			var map = new google.maps.Map(document.getElementById("map"), mapOptions);	
		}
	</script>
</head>
<body onload="pageOnLoad()"> 
	<div id="map" style="width:400px;height:400px"></div>
</body>
</html>

 

navigationControlOptions = ZOOM_PAN.

Параметр mapTypeControlOption представляет собой массив. В элементе 'style' массива и указывается тип:

var mapOptions = {
	zoom: 10,
	center: centerLatLng,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	navigationControlOptions: {
		style: google.maps.NavigationControlStyle.ZOOM_PAN
	}
} 

и весь пример целиком:

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script type="text/javascript">
		function pageOnLoad() {
			var centerLatLng = new google.maps.LatLng(50.435132,30.55777);
			var mapOptions = {
				zoom: 10,
				center: centerLatLng,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				navigationControlOptions: {
					style: google.maps.NavigationControlStyle.ZOOM_PAN
				}
			}
			var map = new google.maps.Map(document.getElementById("map"), mapOptions);	
		}
	</script>
</head>
<body onload="pageOnLoad()"> 
	<div id="map" style="width:400px;height:400px"></div>
</body>
</html>