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>
Выглядит это примерно так: