Создание формы поиска для создания карты Google - PullRequest
Новая
       8

Создание формы поиска для создания карты Google

0 голосов
/ 22 октября 2010

Мне нужно создать форму, которая принимает в качестве соответствующего параметра название итальянского города.После отправки значение формы должно быть отправлено в службу Google Maps, которая, в свою очередь, должна вернуть полную карту с указанием местоположения этого города.Я довольно новичок в Google Maps, поэтому я не знаю точно, как это можно сделать.У меня уже есть ключ API и вся соответствующая документация Google, но, черт возьми, я не нашел хорошего учебника, который бы четко объяснял все шаги, необходимые для его работы.Я знаю, что где-то должно быть преобразование в геокоды (широта и долгота, я полагаю), но я не очень много знаю об этом.Спасибо всем, кто найдет время, чтобы ответить на мой вопрос.

Ответы [ 2 ]

2 голосов
/ 22 октября 2010

Прежде всего, я бы предложил использовать v3 API вместо v2 API , так как последний не рекомендуется в пользу новой версии.API v3 не требует ключа API.

Тогда то, что вы описываете, очень просто.Вы можете использовать Службы геокодирования , предоставляемые API JavaScript Карт Google.Нет необходимости использовать Службы геокодирования на стороне сервера , поскольку это может быть сделано полностью на стороне клиента в JavaScript.Рассмотрим следующий пример: 

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps Geocoding Demo</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 400px; height: 300px;"></div> 

   <input type="text" id="search">
   <input type="button" onclick="geocode();" value="Search">

   <script type="text/javascript"> 
     var map = new google.maps.Map(document.getElementById('map'), { 
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        center: new google.maps.LatLng(42.49, 18.46),
        zoom: 6
     });

     var geocoder = new google.maps.Geocoder();

     function geocode () {
        geocoder.geocode({
           'address': document.getElementById('search').value
        }, 
        function(results, status) {
           if(status == google.maps.GeocoderStatus.OK) {
              new google.maps.Marker({
                 position: results[0].geometry.location,
                 map: map
              });
              map.setCenter(results[0].geometry.location);
           }
        });
     }   
   </script> 
</body> 
</html>

Снимок экрана:

alt text

0 голосов
/ 22 октября 2010

Лучшая документация находится на сайте Google здесь: http://code.google.com/apis/maps/index.html

Здесь на сайте Google есть конкретные примеры: http://code.google.com/apis/maps/documentation/javascript/examples/index.html

И рабочий пример геокодирования здесь (используйте View Source, чтобы увидеть реализацию): http://code.google.com/apis/maps/documentation/javascript/examples/geocoding-simple.html

Если вы используете JavaScript API, я рекомендую вам использовать версию 3, для которой не требуется ключ API.

...