<!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>