API геолокации Google

Я учусь использовать Google Geolocation API. У меня есть ключ, и я просто пытаюсь создать простую форму, которая принимает название города и возвращает мне широту и долготу с помощью API геолокации.

Простая форма:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<form>
    <fieldset>
        <ul>

            <li>
                <label for="city-search">City Name</label>
                <input type="text" id="city-search" placeholder="e.g. Rochester, NY">
            </li>

        </ul>

    </fieldset>

    <input type="button" id="sub" value="Submit" onclick="geolocation()">


</form>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="geolocation.js"></script>

</body>
</html>

Может ли кто-нибудь сказать мне, как использовать API геолокации таким образом, чтобы я мог получить широту и долготу введенного города.


google-maps javascript jquery google-geolocation
person Akshay    schedule 28.06.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ежедневный лимит без ключа API составляет 2500. Вы можете прочитать мой вопрос - Где разместить ключ API для Google Geocoding API?

Если вы просто используете геокодирование в клиентском браузере, вам не нужен ключ Google API. Вы все равно можете передать ключ, если ваш клиент является активным пользователем и вы хотите платить от имени своего клиента.

Вот рабочая демонстрация - https://jsfiddle.net/uj5qcqx0/

$(function() {
  $('#sub').click(function() {
    var city = $('#city-search').val();
    if (city.length) {
      var url = "https://maps.googleapis.com/maps/api/geocode/json?sensor=false&address=" + city;
      $.get(url, function(data) {      	
        $("#result").text(JSON.stringify(data));        
      });
    } else {
      alert("Please enter city.");
    }
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="city-search">City Name</label>
<input type="text" id="city-search" placeholder="e.g. Rochester, NY">

<input type="button" id="sub" value="Submit">

<div id="result"></div>

person Win    schedule 28.06.2017