Google Карты – добавление данных пользователя

В продолжении статьи про Яндекс.Карты, подключим Google карту на свой сайт.

Для начала, получим API в Google APIs. Создадим новый проект и резервируем под него API ключ.

Так же желательно поставить ограничение на использование данного ключа. Теперь даже получив доступ к Вашему API ключу – никто не сможет им воспользоваться. Запросы будут приниматься только с вашего IP. Это безоговорочный плюс Google Карт.

Ограничения для веб-сайтов

Здесь могут возникнут проблемы с доступностью, если указать ограничения по HTTP-источники перехода (веб-сайты). Надо указывать точный путь к месту где будет использоваться карта как у меня, как и раньше ссылка либо согласно правилам: Примеры URL перехода:

  • URL с точным путем: www.example.com/path
  • Любой URL в поддомене, обозначенный звездочкой (*): sub.example.com/*
  • Любые субдомены и URL-пути, относящиеся к одному домену, с подстановочными знаками (*): *.example.com/*

Вообще следует посветить отдельный раздел теме Google Cloud Platform – там много вкусного и полезного для веб-мастера, но пока что продолжим.

Ключ добавляем к подключаемому js файлу (не забываем подставить свой YOUR_API_KEY):

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

Подключаем скрипт к странице и создаём блок под будущую карту например <div id="map"></div> и инициализируем карту:

function initMap() {
 map = new google.maps.Map(document.getElementById('map'), {
 center: {lat: 51.675637, lng: 39.203338},
 zoom: 4
});
}

Знакомые два параметра, координаты цента карты и зум.

Получаем геоданные пользователя и выводим их пока в консоль.

window.onload = function() {
  var startPos;
  var geoSuccess = function(position) {
    startPos = position;
    console.log(startPos.coords.latitude);
    console.log(startPos.coords.longitude);
  };
  navigator.geolocation.getCurrentPosition(geoSuccess);
};

Забираем список координат из готового файла target.txt

var targetFile = loadFile("target.txt");
var targetList = targetFile.split('\n');


function loadFile(filePath) {
  var result = null;
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", filePath, false);
  xmlhttp.send();
  if (xmlhttp.status==200) {
    result = xmlhttp.responseText;
  }
  return result;
}

Проходим массив с координатами, попутно убираем все не нужные символы в кое и в начале строки. Чутьё подсказывает что есть более элегантный способ обработать координаты, но пока я его не нашёл.

targetList.forEach(function(item) {
  var chars = item.split(',');
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(chars[0].slice(1), chars[1].slice(0, -2)),
    map: map
  });
});

Теперь передадим данные нашего пользователя в файл. Создадим на странице ссылку <a id='geoData' href="/maps.php">передать данные</a>. Там где мы получали геоданные пользователя добавляем строку ещё строку.

document.getElementById("geoData").href="maps.php?lat="+ startPos.coords.latitude + "&lng="+ startPos.coords.longitude;

Таким образом мы передадим через GET параметр координаты пользователя обратно на страницу. Ну и как бы не был мне приятен js но без серверного языка тут не обойтись. С помощью php собираем всё что хранится в GET и если там нужные нам параметры записываем их в наш файл.

//php
if(isset($_GET['lat']) && isset($_GET['lng'])){
  $fp=fopen("target.txt","a");  
  fwrite($fp, '['.$_GET['lat'].', '.$_GET['lng'].']'."\r\n");
  fclose($fp);
}

Отмечу, что хранение данных в файле не самая лучшая идея и в данном случае используются как пример.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *