↑ Карты в Google Maps API 3. | ||||
Урок - Параметр mapTypeControlOption. Измнение внешнего вида панели навигации картой в Google Maps API 3. | ||||
← Предыдущий урок Урок - Параметр navigationControl. Скрытие переключения типа карт в Google Maps API 3.
|
Следующий урок → Урок - Параметр scaleControl. Скрытие переключения типа карт в Google Maps API 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>
↑ Карты в Google Maps API 3. | ||||
Урок - Параметр mapTypeControlOption. Измнение внешнего вида панели навигации картой в Google Maps API 3. | ||||
← Предыдущий урок Урок - Параметр navigationControl. Скрытие переключения типа карт в Google Maps API 3.
|
Следующий урок → Урок - Параметр scaleControl. Скрытие переключения типа карт в Google Maps API 3.
|