Google map: определение местонаходжения и отображение на карте

В последнее время все чаще и чаще на сайтах приходится делать отображение карты и текущего местонахождения пользователя. Этим небольшим примером я хочу показать Вам как это можно быстро сделать используя google maps...

В последнее время все чаще и чаще на сайтах приходится делать отображение карты и текущего местонахождения пользователя.

Этим небольшим примером я хочу показать Вам как это можно быстро сделать используя google maps

<!DOCTYPE html>
<html>
    <head>
        <title>Определение местоположения</title>
        <meta charset="utf-8"/>
        <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
        <script type="text/javascript">
            //определить поддержку геолокации
            if (navigator.geolocation)
            {
            //найти позицию
            navigator.geolocation.getCurrentPosition(displayPosition, errorFunction);
             }
            else
            {
            alert('Пожалуйста, используйте браузер, который поддерживает геолокацию.');
            }
            //Функция обратного вызова 
            function displayPosition(pos)
            {
                var mylat = pos.coords.latitude;
                var mylong = pos.coords.longitude;
                var thediv = document.getElementById("infa");
                thediv.innerHTML = "<p>Ваша долгота: <strong>"+mylong+"</strong> и Ваша широта: <strong>"+mylat+"</strong></p>";
                //загрузить карту
                var latlng = new google.maps.LatLng(mylat, mylong);
                    var myOptions = {
                      zoom: 15,
                      center: latlng,
                      mapTypeId: google.maps.MapTypeId.HYBRID
                    };
                var map = new google.maps.Map(document.getElementById("kartinko"), myOptions);
                //добавить маркер
                var marker = new google.maps.Marker({
                         position: latlng, 
                         map: map, 
                         title:"Вы здесь"
                     });    
             }
            //функция вызова ошибки
            function errorFunction(pos)
            {
                alert('Ошибка!');
            }
        </script>
        <style type="text/css">  
            html, body {width:100%;height:100%;padding:1%;}
            #kartinko {height:85%;width:98%;}  
        </style>
    </head>
    <body>
        <div id="infa"></div>
        <div id="kartinko"></div>
</body>
</html>

Выглядит это примерно так:

Google map: определение местонаходжения и отображение на карте

Рекомендуем

Теги

Смотрите также