Язык
Контакты
GitHub
Поддержка
Регистрация
Войти
Логин: Пароль: Запомнить:
Пользователи
Голосование

    Какую CMS Вы предпочитаете

    AtomX
    Fapos CMS
    Drunya CMS
Последние комментарии
Топ пользователей
Drunya
Репутация: 110
Сообщений: 3527
Сашка_из_Шебекино
Репутация: 87
Сообщений: 1803
boriska
Репутация: 65
Сообщений: 846
ARMI
Репутация: 46
Сообщений: 1858
BAH0
Репутация: 26
Сообщений: 544
Хотите иметь у себя на сайте карту, которую можно масштабировать, ставить метки и прочее? Нет проблем. Google предоставляет доступ к своим картам посредством maps API. Для использования карт гугл, вам необходимо подключить JavaScript библиотеку у себя на странице.

1
2
<script type="text/javascript" src="js/jquery-ui/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>


Так же мы подключили библиотеку JQuery. Она очень упрощает работу с JavaScript, беря на себя массу ненужной и рутинной работы. Еще хотелось бы заметить, что для работы с картами гугл необходим некий API key - ключ для доступа. Так вот, в приведенном мной варианте, этот ключ не требуется. Отобразить карту у себя на странице можно так:
1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
$(document).ready(function() {
        var latlng = new google.maps.LatLng(47.3782, 8.53406);
        var myOptions = {
                zoom: 13, // Устанавливаем зум
                center: latlng, // Начальные координаты
                mapTypeId: google.maps.MapTypeId.ROADMAP // Тип карты(карта дорог)
        };
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
});
</script>
<div id="map" style="width:500px;height:500px;"></div>



Теперь наша карта расположена в блоке map. Так же у нас есть возможность расставлять на карте свои маркеры. Это можно делать даже с использованием своих иконок.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
$(document).ready(function() {
        var latlng = new google.maps.LatLng(47.3782, 8.53406);
        var myOptions = {
                zoom: 13, // Устанавливаем зум
                center: latlng, // Начальные координаты
                mapTypeId: google.maps.MapTypeId.ROADMAP // Тип карты(карта дорог)
        };
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        
        marker = new google.maps.Marker({
                position: new google.maps.LatLng(40.3242342, -39.32423423),
                map: map,
                icon: 'images/icon.png',
                title: 'Заголовок маркера'
        });
});
</script>
<div id="map" style="width:500px;height:500px;"></div>


Как видите все довольно просто. Однажды я потратил не мало времени, пытаясь получить наименование улицы или города(в общем, места) по координатам. Так вот как это делается:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
$(document).ready(function() {
 
        var lng = -40.344353;
        var lat = 40.3443434;
        var geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng(lat, lng);
        geocoder.geocode({'latLng': latlng}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                        if (results[0]) {
                                var place = results[0].formatted_address;
                                return place;
                        }
                } else {
                        return false;
                }
        });
        
});
</script>

На самом деле в ответе($results) есть не только нулевой ключ, а некоторое множество. Как бы массив мест, подходящих по заданным координатам. Стоит обратить внимание, что geocoder позволяет совершить только один запрос в определенную единицу времени. Так что, учитывая этот фактор, если надо получить название некоторого множества мест, по множесту координат, нужно использовать setTimeout() и в цикле получать названия через промежуток времени.
Использование google maps API

Теги: multiplt geocoder;
Автор: Drunya
Категория: Общие терки
Просмотров: 5812
Комментариев: 0

Сейчас online: 7. Зарегистрированных: 0. Гостей: 7.
-->