Как геокодировать несколько полей?

Я пытаюсь создать форму, которая будет геокодировать карту google. У меня есть базовый код из API карты, но он работает только с одним полем: «адрес».Как геокодировать несколько полей?

Вместо использования 'getElementByID', я использую 'getElementByClassName', чтобы он мог использовать данные из любого из полей, которые я настроил.

Это не работает. Я иду в правильном направлении, используя класс вместо ID?

Ниже приведен код, с которым я работаю. API-KEY опущен.

 <!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map-canvas { height: 100% } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?key=mykey=false"> 
    </script> 
    <script type="text/javascript"> 

var geocoder; 
var map; 
function initialize() { 
    geocoder = new google.maps.Geocoder(); 
    var latlng = new google.maps.LatLng(39.861933, -83.067746); 
    var mapOptions = { 
    zoom: 3, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
} 

function codeAddress() { 
    var address = document.getElementById('address').value; 
    address += " "+document.getElementById('street_add').value; 
    address += " "+document.getElementById('city').value; 
    address += " "+document.getElementById('state').value; 
    address += " "+document.getElementById('postcode').value; 
    address += " "+document.getElementById('country').value; 
    geocoder.geocode({ 'address': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK) { 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: results[0].geometry.location 
     }); 
    } else { 
     alert('Geocode was not successful for the following reason: ' + status); 
    } 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 


    </script> 
    </head> 
    <body> 
    <div id="panel"> 
     <form action="" name="" method="post"> 
     <input id="address" type="hidden" value=""> 
     <input id="street_add" type="textbox" value="" class="address"> 
     <input id="city" type="textbox" value="" class="address"> 
     <input id="state" type="textbox" value="" class="address"> 
     <input id="postcode" type="textbox" value="" class="address"> 
     <input id="country" type="textbox" value="" class="address"> 
     <input type="button" value="Geocode" onclick="codeAddress()"> 
     </form> 
    </div> 
    <div id="map-canvas" style="height:40%;top:30px;"></div> 
    </body> 
</html>

источник

2013-08-10 Paul Yorde

Там нет 'getElementByClassName', это' getElementsByClassName' –

Геокодер берет одну строку, представляющую адрес. Вы в настоящее время не создается, что вы передаете его неопределенное значение (нет getElementByClassName, это getElementsByClassName и возвращает массив HTML-элементов)

объединить отдельные значения в одну строку:

var address = document.getElementById('street_add').value; 
address += " "+document.getElementById('city').value; 
address += " "+document.getElementById('state').value; 
address += " "+document.getElementById('postcode').value; 
address += " "+document.getElementById('country').value;

working example

источник

2013-08-10 16:44:21 geocodezip

Я изменил код, чтобы объединить переменные (смотри выше) Кроме того, я добавил скрытое поле в форме с идентификатором «адреса». Кажется, теперь он работает нормально. –

Как геокодировать несколько полей?

ответ

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