Урок - Параметр mapTypeControlOption. Изменение переключателя типа карты в Google Maps API 3.

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

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

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

Параметр mapTypeControlOption указывает внешний вид отображения переключателя типа карты.

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

  • google.maps.MapTypeControlStyle.DEFAULT - значение по умолчанию, указывает изменять внешний вид в зависимости от размера карты.
  • google.maps.MapTypeControlStyle.HORIZONTAL_BAR - горизонтальная панель с кнопками.
  • google.maps.MapTypeControlStyle.DROPDOWN_MENU - выпадающее меню

 

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>

 

navigationControlOptions = HORIZONTAL_BAR.

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

var mapOptions = {
	zoom: 10,
	center: centerLatLng,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	mapTypeControlOptions: {
		style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR 
	}
} 

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

<!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,
				mapTypeControlOptions: {
					style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR  
				}
			}
			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 = DROPDOWN_MENU.

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

var mapOptions = {
	zoom: 10,
	center: centerLatLng,
	mapTypeId: google.maps.MapTypeId.ROADMAP,
	mapTypeControlOptions: {
		style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
	}
} 

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

<!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,
				mapTypeControlOptions: {
					style: google.maps.MapTypeControlStyle.DROPDOWN_MENU  
				}
			}
			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>