2010-10-22 3 views
0

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

ответ

0

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

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

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

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

2

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

Тогда то, что вы описали, очень просто. Вы можете использовать Geocoding Services, предоставляемый API JavaScript Карт Google. Нет необходимости использовать Server-side Geocoding Services, так как это можно сделать полностью на стороне клиента в 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

Смежные вопросы