Google मानचित्र स्वत: पूर्ण खोज बॉक्स को कैसे जोड़ें?

मैं एक वेबसाइट पर एक Google स्वत: पूर्ण खोज बॉक्स जोड़ने की कोशिश कर रहा हूं ताकि उपयोगकर्ता आसानी से एक पते की खोज कर सकें।Google मानचित्र स्वत: पूर्ण खोज बॉक्स को कैसे जोड़ें?

मेरी समस्या यह है कि मैंने यहां और इसके बारे में Google मानचित्र जावास्क्रिप्ट एपीआई v3 के बारे में कई प्रश्नों को देखा है और कुछ ट्यूटोरियल्स अभी तक वे सभी एक एम्बेडेड Google मानचित्र पर मैपिंग के साथ स्वत: पूर्ण कार्यक्षमता को एक साथ जोड़ते हैं।

मुझे दृष्टि से स्थान को मैप करने की आवश्यकता नहीं है, मुझे अभी के लिए स्वत: पूर्ण बॉक्स की आवश्यकता है, दुर्भाग्य से मैं यह नहीं कर सकता कि एपीआई के कौन से हिस्से इस के लिए प्रासंगिक हैं और मैंने जो भी उदाहरण देखा है, उनमें बहुत सारे जेएस शामिल हैं मानचित्रण।

क्या कोई ऐसे संसाधन के बारे में जानता है जो स्वत: पूर्ण इनपुट कार्यक्षमता को जोड़ने के साथ ही व्यवहार करता है।

वेबसाइट here है।

यदि आप 'उद्धरण कैलकुलेटर' >>> 'परिवहन' >>> 'संग्रह' पर क्लिक करते हैं तो आपको इनपुट बॉक्स दिखाई देगा जहां मैं यह कार्यक्षमता जोड़ना चाहता हूं।

मैं किसी के लिए अपना काम करने के लिए नहीं कह रहा हूं, बस मुझे जो चाहिए उसे ढूंढने में मदद करने के लिए।

अग्रिम में धन्यवाद।

स्रोत

2012-12-03 Dom

के संभावित डुप्लिकेट [Google मानचित्र JavaScript API v3 में SearchBox एकीकृत करने के लिए कैसे?] (Http://stackoverflow.com/questions/12745469/how-to-integrate-searchbox-in-google- मानचित्र-जावास्क्रिप्ट-एपीआई-वी 3) – givanse

इस कोड का एक महत्वपूर्ण हिस्सा समाप्त किया जा सकता है।

एचटीएमएल अंश:

<head> 
    ... 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
    ... 
</head> 
<body> 
    ... 
    <input id="searchTextField" type="text" size="50"> 
    ... 
</body>

जावास्क्रिप्ट:

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

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

आप http://www.redwoodtransit.org पर एक उदाहरण देख सकते हैं।

स्रोत

2013-05-08 22:38:45

हाय, क्या आप इस उदाहरण के लिए स्रोत कोड साझा कर सकते हैं .... धन्यवाद –

इससे पोस्टर के समान समस्या के साथ मुझे बहुत मदद मिली। धन्यवाद! –

आपको बहुत बहुत धन्यवाद :) –

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Place Autocomplete Address Form</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script> 
    <script> 
// This example displays an address form, using the autocomplete feature 
// of the Google Places API to help users fill in the information. 

var placeSearch, autocomplete; 
var componentForm = { 
    street_number: 'short_name', 
    route: 'long_name', 
    locality: 'long_name', 
    administrative_area_level_1: 'short_name', 
    country: 'long_name', 
    postal_code: 'short_name' 
}; 

function initialize() { 
    // Create the autocomplete object, restricting the search 
    // to geographical location types. 
    autocomplete = new google.maps.places.Autocomplete(
     /** @type {HTMLInputElement} */(document.getElementById('autocomplete')), 
     { types: ['geocode'] }); 
    // When the user selects an address from the dropdown, 
    // populate the address fields in the form. 
    google.maps.event.addListener(autocomplete, 'place_changed', function() { 
    fillInAddress(); 
    }); 
} 

// [START region_fillform] 
function fillInAddress() { 
    // Get the place details from the autocomplete object. 
    var place = autocomplete.getPlace(); 

    for (var component in componentForm) { 
    document.getElementById(component).value = ''; 
    document.getElementById(component).disabled = false; 
    } 

    // Get each component of the address from the place details 
    // and fill the corresponding field on the form. 
    for (var i = 0; i < place.address_components.length; i++) { 
    var addressType = place.address_components[i].types[0]; 
    if (componentForm[addressType]) { 
     var val = place.address_components[i][componentForm[addressType]]; 
     document.getElementById(addressType).value = val; 
    } 
    } 
} 
// [END region_fillform] 

// [START region_geolocation] 
// Bias the autocomplete object to the user's geographical location, 
// as supplied by the browser's 'navigator.geolocation' object. 
function geolocate() { 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position) { 
     var geolocation = new google.maps.LatLng(
      position.coords.latitude, position.coords.longitude); 
     var circle = new google.maps.Circle({ 
     center: geolocation, 
     radius: position.coords.accuracy 
     }); 
     autocomplete.setBounds(circle.getBounds()); 
    }); 
    } 
} 
// [END region_geolocation] 

    </script> 

    <style> 
     #locationField, #controls { 
     position: relative; 
     width: 480px; 
     } 
     #autocomplete { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     width: 99%; 
     } 
     .label { 
     text-align: right; 
     font-weight: bold; 
     width: 100px; 
     color: #303030; 
     } 
     #address { 
     border: 1px solid #000090; 
     background-color: #f0f0ff; 
     width: 480px; 
     padding-right: 2px; 
     } 
     #address td { 
     font-size: 10pt; 
     } 
     .field { 
     width: 99%; 
     } 
     .slimField { 
     width: 80px; 
     } 
     .wideField { 
     width: 200px; 
     } 
     #locationField { 
     height: 20px; 
     margin-bottom: 2px; 
     } 
    </style> 
    </head> 

    <body onload="initialize()"> 
    <div id="locationField"> 
     <input id="autocomplete" placeholder="Enter your address" 
      onFocus="geolocate()" type="text"></input> 
    </div> 


    </body> 
</html>

स्रोत

2015-06-23 05:14:49

आप इसके संदर्भ के बिना इसे कॉपी करने के बजाय एपीआई दस्तावेज को लिंक क्यों नहीं भेजते? – dft

बस नीचे दिए गए कोड को कॉपी और पेस्ट करें।

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://maps.googleapis.com/maps/api/jsvv=3.exp&sensor=false&libraries=places"></script> 
    </head> 
    <body> 
     <label for="locationTextField">Location</label> 
     <input id="locationTextField" type="text" size="50"> 

     <script> 
      function init() { 
       var input = document.getElementById('locationTextField'); 
       var autocomplete = new google.maps.places.Autocomplete(input); 
      } 

      google.maps.event.addDomListener(window, 'load', init); 
     </script> 
    </body> 
</html>

अच्छी तरह से स्वरूपित कोड इस लिंक से पाया जा सकता है। http://jon.kim/how-to-add-google-maps-autocomplete-search-box/

स्रोत

2015-11-06 21:11:43 shupacanucks

वेबपृष्ठ में Google मानचित्र स्वत: पूर्ण खोज बॉक्स को लागू करने के लिए स्थान लाइब्रेरी के साथ Google मानचित्र जावास्क्रिप्ट API का उपयोग करें।

एचटीएमएल

<input id="searchInput" class="controls" type="text" placeholder="Enter a location">

जावास्क्रिप्ट

<script> 
function initMap() { 
    var input = document.getElementById('searchInput'); 
    var autocomplete = new google.maps.places.Autocomplete(input); 
} 
</script>

पूरा गाइड, स्रोत कोड, और लाइव डेमो

यहां से पाया जा सकता है - Google Maps Autocomplete Search Box with Map and Info Window

स्रोत

2016-06-21 07:07:09 JoyGuru

// Bias the autocomplete object to the user's geographical location, 
// as supplied by the browser's 'navigator.geolocation' object. 
function geolocate() { 
    if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(poenter code heresition) { 
     var geolocation = { 
     lat: position.coords.latitude, 
     lng: position.coords.longitude 
     }; 
     var circle = new google.maps.Circle({ 
     center: geolocation, 
     radius: position.coords.accuracy 
     }); 
     autocomplete.setBounds(circle.getBounds()); 
    }); 
    } 
}

स्रोत

2016-10-18 07:23:07 user7035091

अब Google मानचित्र/स्थान API का उपयोग करने के लिए, आपको एक एपीआई कुंजी का उपयोग करने की आवश्यकता है।तो एपीआई यूआरएल

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

स्रोत

2016-10-26 14:18:50

को

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>

से बदल जाएगा मैं jQuery का उपयोग कर रहा यहां दर्ज किए गए पाठ पाने के लिए और $ (दस्तावेज़) में सभी कोड लपेटकर .ready()। सुनिश्चित करें कि आपके पास Google स्थल API वेब सेवा के लिए आपकी एपीआई कुंजी तैयार है। इसे नीचे लिपि फ़ाइल में बदलें।

<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); 
}

स्रोत

2017-11-13 18:46:28

<input id="autocomplete" placeholder="Enter your address" type="text"/> 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script type="text/javascript" src="https://mapenter code heres.googleapis.com/maps/api/js?key=AIzaSyC7vPqKI7qjaHCE1SPg6i_d1HWFv1BtODo&libraries=places"></script> 
<script type="text/javascript"> 
    function initialize() { 

     new google.maps.places.Autocomplete(
     (document.getElementById('autocomplete')), { 
      types: ['geocode'] 
     }); 
    } 

    initialize(); 

</script>

स्रोत

2017-11-20 10:30:56

Google मानचित्र स्वत: पूर्ण खोज बॉक्स को कैसे जोड़ें?

उत्तर

संबंधित मुद्दे