• Главная
  • WEB студия
    • Услуги и Цены
    • Домены
    • Хостинг и Почта
    • Сайт-Визитка
    • Интернет-магазин
    • Поддержка сайта
    • Портфолио
  • Продвижение сайта
    • Контекстная реклама
    • Семантическое ядро
    • SEO продвижение сайта
  • Социальные сети
    • SMO/SMM-продвижение
    • Создание и ведение групп
    • Автопостинг новостей
  • Парсинг сайтов
    • Зачем нужен парсинг?
    • Зачем нужен парсинг?
    • Анализ цен конкурентов
  • Журнал о Web
    • Поисковые системы
    • Все о SEO
    • Все о SMM
    • jQuery скрипты
    • Малый бизнес
  • Справочники
    • HTML
    • CSS
    • PHP
    • MySQL
    • jQuery
  • Информация
    • Кто МЫ!?
    • Контакты
    • Оплата услуг
    • Спасибо Вам
  • Инструменты
  • SEOker
  • SIZEr
  • HTML редактор
  • Наши проекты
  • W1CMS.ru
  • DiiF.ru
  • MinURL.ru

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

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

  1. Главная
  2. Все про JS : jQuery, Node, AngularJS

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

Image 233Этим небольшим примером я хочу показать Вам как это можно быстро сделать используя 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>

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

Рекомендуем

Теги

SEO HTML CSS JavaScript

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

Веб-студия

  • Услуги и Цены
  • Аренда сайтов
  • Реклама на наших проектах
  • Журнал о Web технологиях

Сделаем

  • Сайт-Визитку
  • Интернет-магазин
  • Landing Page
  • Поддержка сайта

Заполним

  • Написание статей
  • Обмен данными
  • Парсинг сайтов

Продвинем

  • Контекстная реклама
  • Продвижение сайта
  • Социальные сети
  • Автопостинг новостей

Наши контакты

W1C : Первый Веб-Консультант
mail@w1c.ru
Пн - Пт: 10:00 - 20:00

Дизайн и разработка сайта - W1C на W1CMS
W1C : Web First Consultant - Intelligence everywhere ©