0

Хочу сделать, чтобы на простой html-странице определялась геопозиция пользователя, который на неё зашёл.
Для этого стал использовать Google Maps API. Делаю всё по этому примеру.

Вернее как делаю — просто скопировал и вставил к себе.
Файл находится в корне сайта index.html. Предварительно сгерерировал API_KEY.

В настройках указал

Ограничение для ключа — HTTP-источники перехода (веб-сайты)

HTTP-источники перехода (веб-сайты)

*.site.com/*
site.com/*
site.com

И, как ни странно, ничего не работает...
В Firefox работает. Во всех остальных браузерх, пишет ошибку (и не только у меня):

Error: The Geolocation service failed.

Подскажите, что я не так сделал? Куда копать?

6
  • У вас просто статический html файл в который вы прикрутили google maps ? или все же есть веб сервер какой-то?
    – koks_rs
    16 дек 2016 в 13:51
  • простой html файл, в нем код вставленный от сюда developers.google.com/maps/documentation/javascript/…
    – Dmitriy
    16 дек 2016 в 13:54
  • 1) - нужен веб сервер чтобы запускать страничку так localhost/простой.html 2) - добавить нужно localhost в google dev console
    – koks_rs
    16 дек 2016 в 13:55
  • хмм, ну имеется в виду что у меня веб сервер
    – Dmitriy
    16 дек 2016 в 13:57
  • то етсь так сделано site.com/index.htlm
    – Dmitriy
    16 дек 2016 в 13:57

1 ответ 1

1

Попробуйте применит следующий код для создания карты Гугл с определением текущего местоположения и созданием направления/маршрута к определённому объекту (в моём случае - это форт Екеторп в Швеции). В этом коде вы можете редактировать следующее:

  • zoom - приблежение и удаление показа карты
  • MapTypeId - типы показа карт - инфо Гугл
  • destination - координаты определённого объекта - как определить координаты (введите адрес)
  • DirectionsTravelMode - вид/средство передвижения по маршруту - инфо Гугл
  • language= обозначение языка карты (установлен в линке maps.googleapis - вверху)

<!DOCTYPE html>
<html lang=de>
<head>
<meta charset=utf-8 />
<meta name=robots content=all />
<meta name=author content=https://plus.google.com/107237366663877426287 />
<meta name=description content="Karte zu Burg Eketorp" />
<meta name=viewport content="width=device-width, initial-scale=1" />
<meta name=apple-mobile-web-app-capable content=yes />
<meta name=apple-mobile-web-app-status-bar-style content=black />
<title>Karte zu Burg Eketorp</title>
</head>
<body style=background:#e6e6fa onload=initialize()>
<main>
<header>
<h1 property=name style=text-align:center;font-size:90%;font-family:Verdana;color:#2f4f4f>Burg Eketorp</h1>
</header>
<div role=application>
<div>
<div id=map style="border:.15em ridge #708090;height:30em"></div>
<div id="panel">
<div id="directions"></div>
</div>
</div>
</div>
</main>
<script async src="https://maps.googleapis.com/maps/api/js?v=3&amp;language=de"></script>
<script>if (navigator.geolocation) { //Checks if browser supports geolocation
   navigator.geolocation.getCurrentPosition(function (position) {  //This gets the
     var latitude = position.coords.latitude;                    //users current
     var longitude = position.coords.longitude;                 //location
     var coords = new google.maps.LatLng(latitude, longitude); //Creates variable for map coordinates
     var directionsService = new google.maps.DirectionsService();
     var directionsDisplay = new google.maps.DirectionsRenderer();
     var mapOptions = //Sets map options
     {
       zoom: 15,  //Sets zoom level (0-21)
       center: coords, //zoom in on users location
       mapTypeControl: true, //allows you to select map type eg. map or satellite
       navigationControlOptions:
       {
         style: google.maps.NavigationControlStyle.SMALL //sets map controls size eg. zoom
       },
       mapTypeId: google.maps.MapTypeId.ROADMAP //sets type of map Options:ROADMAP, SATELLITE, HYBRID, TERRIAN
     };
     map = new google.maps.Map( /*creates Map variable*/ document.getElementById("map"), mapOptions /*Creates a new map using the passed optional parameters in the mapOptions parameter.*/);
     directionsDisplay.setMap(map);
     directionsDisplay.setPanel(document.getElementById('panel'));
     var request = {
       origin: coords,
       destination: '65.791238, 21.657444',
       travelMode: google.maps.DirectionsTravelMode.DRIVING
     };

     directionsService.route(request, function (response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(response);
       }
     }); 
     
   });
  
 
   
 }</script>
<a href=https://plus.google.com/107237366663877426287 rel=publisher></a>
</body>
</html>

3
  • Спасибо, вопрос решен
    – Dmitriy
    19 дек 2016 в 14:01
  • 1
    нужно защищенное соединение https
    – Dmitriy
    19 дек 2016 в 14:05
  • 1
    Да, разумеется, я забыл указать, что требуется сертификат SSL.
    – user220926
    20 дек 2016 в 16:02

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.