Google मानचित्र api के साथ स्वत: पूर्ण पता फ़ील्ड कैसे बनाएं?

Question

Google मानचित्र API और JQuery का उपयोग करके मैं एक पता फ़ील्ड रखना चाहता हूं कि जब इसे टाइप किया जाए तो वहां दर्ज पते को स्वतः पूर्ण कर दिया जाएगा। यह कैसे प्राप्त किया जा सकता है?

Answer 1

ठीक है, कभी भी बेहतर नहीं है। Google मानचित्र API v3 अब पता स्वत: पूर्णता प्रदान करता है।

एपीआई डॉक्स यहां हैं: http://code.google.com/apis/maps/documentation/javascript/reference.html#Autocomplete

एक अच्छा उदाहरण यहाँ है: http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html

Answer 2

मुझे वास्तव में संदेह है - Google मानचित्र एपीआई ज्ञात पते geocoding के लिए बहुत अच्छा है, लेकिन यह आम तौर पर स्वत: पूर्ण शैली संचालन के लिए उपयुक्त डेटा लौटाता है। अपनी जिओकोडिंग क्वेरी सीमा को बहुत तेज़ी से खाने के लिए एपीआई को मारने की चुनौती को कभी भी न करें।

Answer 3

थोड़ी सी बहती है, लेकिन जब उपयोगकर्ता लुकअप टेबल का उपयोग करके अपना पोस्टल कोड दर्ज करता है तो यह यूएस शहर/राज्य या सीए सिटी/प्रोवेंस को ऑटोफिल करना अपेक्षाकृत आसान होगा।

1. उपयोगकर्ता में प्रवेश करती है: डाक (ज़िप) कोड

   आप को भरने: राज्य, शहर

   यहाँ कैसे आप इसे कर सकता है अगर आप अपने इच्छा के मोड़ के लिए लोगों को मजबूर कर सकता है (कनाडा, कनाडा के लिए)

2. उपयोगकर्ता प्रवेश करना शुरू कर देता है: सड़क नाम

   आप: स्वत: भरण

3. आप प्रदर्शन: अनुमति पता संख्या

   उपयोगकर्ता की एक सीमा: संख्या

हो गया प्रवेश करती है।

1. उपयोगकर्ता में प्रवेश करती है: पता संख्या

   आप: कुछ भी नहीं

2. उपयोगकर्ता कर प्रवेश करने के लिए शुरू होता है

   यहां लोगों को यह करने के लिए कि यह कैसे प्राकृतिक है: सड़क का नाम

   आप: स्वत: भरण, देश में हर सड़क के एक बड़े पैमाने पर सूची से ड्राइंग

3. उपयोगकर्ता में प्रवेश करती है: शहर

   आप: स्वत: भरण

4. उपयोगकर्ता में प्रवेश करती है: राज्य/प्रावधान

   आप: क्या यह wort है एच कुछ chars autofilling?

5. आप: ऑटोफिल डाक (ज़िप) कोड, यदि आप कर सकते हैं (क्योंकि कुछ कोड शहरों को झुकाते हैं)।

---

अब आप जानते हैं कि लोगों को चार्ज $$$ यह करने के लिए। :)

सड़क के पते के लिए, मान लें कि वहां दो भाग हैं: संख्यात्मक और सड़क का नाम। यदि आपके पास ज़िप कोड है, तो आप उपलब्ध सड़कों को कम कर सकते हैं, लेकिन अधिकांश लोग पहले संख्यात्मक भाग दर्ज करते हैं, जो बैकवा

Answer 4

Below I split all the details of formatted address like City, State, Country and Zip code. 
So when you start typing your street name and select any option then street name write over street field, city name write over city field and all other fields like state, country and zip code will fill automatically. 
Using Google APIs. 
------------------------------------------------ 
<script type="text/javascript" 
src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> 
<script type="text/javascript"> 
google.maps.event.addDomListener(window, 'load', function() { 
    var places = new google.maps.places.Autocomplete(document 
      .getElementById('txtPlaces')); 
    google.maps.event.addListener(places, 'place_changed', function() { 
     var place = places.getPlace(); 
     var address = place.formatted_address; 
     var value = address.split(","); 
     count=value.length; 
     country=value[count-1]; 
     state=value[count-2]; 
     city=value[count-3]; 
     var z=state.split(" "); 
     document.getElementById("selCountry").text = country; 
     var i =z.length; 
     document.getElementById("pstate").value = z[1]; 
     if(i>2) 
     document.getElementById("pzcode").value = z[2]; 
     document.getElementById("pCity").value = city; 
     var latitude = place.geometry.location.lat(); 
     var longitude = place.geometry.location.lng(); 
     var mesg = address; 
     document.getElementById("txtPlaces").value = mesg; 
     var lati = latitude; 
     document.getElementById("plati").value = lati; 
     var longi = longitude; 
     document.getElementById("plongi").value = longi;    
    }); 
}); 

Answer 5

ऐसे Select2 के रूप में कुछ भयानक पुस्तकालय हैं, लेकिन यह मेरी जरूरत से मेल नहीं खाता । मैंने एक साधारण इनपुट टेक्स्ट का उपयोग करने के लिए स्क्रैच से नमूना बनाया है।

मैं केवल बूटस्ट्रैप और JQuery का उपयोग करता हूं।

आशा है कि यह उपयोगी

`https://jsfiddle.net/yacmed/yp0xmdf5/` 

Answer 6

यह आसान है होगा, लेकिन गूगल एपीआई उदाहरण आप कैसे आप नक्शे में प्रवेश स्थान प्रदर्शित करने के लिए प्राप्त कर सकते हैं के साथ विस्तृत विवरण दे। केवल स्वत: पूर्ण सुविधा के लिए, आप ऐसा कुछ कर सकते हैं।

सबसे पहले, Google स्थल API वेब सेवा सक्षम करें। एपीआई कुंजी प्राप्त करें। आपको इसे HTML फ़ाइल में स्क्रिप्ट टैग में उपयोग करना होगा।

<input type="text" id="location"> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[YOUR_KEY_HERE]&libraries=places"></script> 
<script src="javascripts/scripts.js"></scripts> 

उपयोग स्क्रिप्ट फ़ाइल स्वत: पूर्ण वर्ग लोड करने के लिए। आपकी scripts.js फ़ाइल इस तरह कुछ दिखाई देगी।

// scripts.js custom js file 
$(document).ready(function() { 
    google.maps.event.addDomListener(window, 'load', initialize); 
}); 

function initialize() { 
    var input = document.getElementById('location'); 
    var autocomplete = new google.maps.places.Autocomplete(input); 
}