Про YA Maps можно глянуть тут http://api[dot]yandex[dot]ru/maps/jsapi/[dot][dot][dot]information[dot]html
Теперь перейду к коду.
CODE (html):
скопировать код в буфер обмена
скопировать код в буфер обмена
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
- <script src="http://maps.google.com/maps/api/js?sensor=false&language=ru" type="text/javascript"></script>
- <script type="text/javascript">
- //<![CDATA[
- /* Функция принимает строку с координатами и возвращает массив
- * string(coords) = (30.0, 50.0)
- * return array
- */
- function selectPoint(coords) {
- var d = parent.document;
- var coords_clean = coords.replace(/(\(|\)|\s)/g, '');
- var coords_arr = coords_clean.split(',');
- return coords_arr;
- }
- // Объявляем переменные
- var geocoder, map, infowindow, marker;
- // Выполняется при onload документа
- function init() {
- // Объявляем геокодер
- geocoder = new google.maps.Geocoder();
- // Передаем ему параметры (адрес может быть полным либо частичным)
- geocoder.geocode({'address': "Ukraine"}, function(results, status){
- if (results && results.length > 0) {
- // Задаем параметры карты
- var opts = {
- zoom: 6, // Увеличение
- mapTypeId: google.maps.MapTypeId.ROADMAP, // Тип карты
- mapTypeControl: true, // Элементы управления
- mapTypeControlOptions: { // Тип элементов управления
- style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
- },
- scaleControl: true, // Шкала масштабирования
- streetViewControl: false // Эдакий пыцык Вправо/влево и т.д.
- }
- // Объявляем саму карту
- map = new google.maps.Map(document.getElementById("map"), opts);
- // Ставим центр на точку (попадает всегда на строку с названием объекта)
- map.setCenter(results[0].geometry.location);
- // Вешаем обработчик на клик по карте
- google.maps.event.addListener(map, 'click', function(point){
- // Передаем координаты в функцию
- addMarker(point.latLng);
- });
- } else {
- alert("Ошибка геокодирования: "+status);
- }
- });
- }
- // Ставит маркер в указанном месте
- function addMarker(loc) {
- // Проверяем активна ли "кнопка" "Информация"
- if (document.getElementById("chk_info").checked) {
- // Если маркеров на карте нет то,
- if (marker == null) {
- // Создаем новый маркер по указанным координатам на объекте map и делаем таскабельным :)
- marker = new google.maps.Marker({
- position: loc, map: map, draggable: true
- });
- // Передаем координаты в функцию для показа балуна
- geocodePosition(marker.getPosition());
- // Удаляем обработчик клика по карте (можно не удалять если нужно ставить несколько маркеров)
- google.maps.event.clearInstanceListeners(map);
- // Вешаем обработчик клика по маркеру для показа балуна
- google.maps.event.addListener(marker, 'click', function(){
- geocodePosition(marker.getPosition());
- });
- // Вешаем обработчик события когда мы перетянули маркер и отпустили кнопку мыши. Также показывает балун
- google.maps.event.addListener(marker, 'dragend', function(){
- geocodePosition(marker.getPosition());
- });
- }
- }
- }
- // Функция показывает балун в указанной позиции
- function geocodePosition(pos) {
- // Тут все точно также только вместо адреса передаем координаты
- geocoder.geocode({'latLng': pos}, function(responses){
- if (responses && responses.length > 0) {
- var html = '<span class="geoInfo">'+responses[0].formatted_address+'<br />Координаты'+pos+'<br /><a href="javascript:void(0);" onclick="selectPoint(\''+pos+'\');">Выбрать точку</a></span>';
- infowindow = new google.maps.InfoWindow({content: html});
- infowindow.open(map, marker);
- } else {
- infowindow = new google.maps.InfoWindow({content: "Ошибка геокодирования"});
- infowindow.open(map, marker);
- }
- });
- }
- // Функция получает координаты объекта по адресу и перемещает центр карты к этим координатам
- function codeAddress() {
- var address = document.getElementById("address").value;
- geocoder.geocode({'address': address}, function(results, status){
- if (status == google.maps.GeocoderStatus.OK) {
- map.setCenter(results[0].geometry.location);
- var marker = new google.maps.Marker({
- map: map, position: results[0].geometry.location
- });
- } else {
- alert("Ошибка геокодирования: "+status);
- }
- });
- }
- // Тупейший обработчик события чтобы было видно что чекбокс активен
- // Использовал JQ, но что мешает заменить чистым JS
- function switchState(obj) {
- var $ = parent.jQuery;
- if (!$("#chk_info").attr("checked")) {
- $(obj).css("font-weight", "bold");
- } else {
- $(obj).css("font-weight", "normal");
- }
- }
- // Собстно вешаем обработчик на DOM
- google.maps.event.addDomListener(window, 'load', init);
- //]]>
- </script>
- <style type="text/css">
- html, #map {
- width: 100%;
- height: 100%;
- }
- body {
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- }
- .toolbar {
- margin: 5px 5px 5px 29%;
- position: absolute;
- right: 100px;
- top: 0;
- z-index: 10001;
- }
- #geosearch {
- float: right;
- }
- #geosearch #button {
- border: 1px solid rgb(169, 187, 223);
- color: black;
- font-family: Arial,sans-serif;
- font-size: 12px;
- min-width: 50px;
- -moz-user-select: none;
- background: -moz-linear-gradient(center top , rgb(254, 254, 254), rgb(243, 243, 243)) repeat scroll 0% 0% transparent;
- -moz-border-radius: 0pt 2px 2px 0pt;
- -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.35);
- padding: 2px 6px 1px 6px;
- text-align: center;
- line-height: 160%;
- font-weight: normal;
- }
- #geosearch #button:hover {
- border: 1px solid #678AC7;
- cursor: pointer;
- }
- #address {
- border: 1px solid rgb(169, 187, 223);
- color: black;
- font-family: Arial,sans-serif;
- font-size: 12px;
- height: 18px;
- min-width: 150px;
- }
- .geoInfo {
- font-family: Arial,sans-serif;
- font-size: 11px;
- }
- </style>
- </head>
- <body>
- <div class="toolbar">
- <div id="geosearch">
- <input type="checkbox" id="chk_info" autocomplete="off" style="display:none;" /><label for="chk_info" id="button" onclick="switchState(this);">Информация</label>
- <input type="text" name="address" size="50" id="address" value="" />
- <input type="button" id="button" value="Поиск" onclick="codeAddress()" />
- </div>
- </div>
- <div id="map"></div>
- </body>
- </html>