javascript - Google Maps Address Autocomplete doesn't work in ASP.NET MVC -
i trying add google maps autocomplete address form in app. below example: [enter image description here][1]
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform
<!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> /* set map height explicitly define size of div * element contains map. */ #map { height: 100%; } /* optional: makes sample page fill window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=roboto:300,400,500"> <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> <div id="locationfield"> <input id="autocomplete" placeholder="enter address" onfocus="geolocate()" type="text"></input> </div> <table id="address"> <tr> <td class="label">street address</td> <td class="slimfield"><input class="field" id="street_number" disabled="true"></input></td> <td class="widefield" colspan="2"><input class="field" id="route" disabled="true"></input></td> </tr> <tr> <td class="label">city</td> <!-- note: selection of address components in example typical. may need adjust locations relevant app. see https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform --> <td class="widefield" colspan="3"><input class="field" id="locality" disabled="true"></input></td> </tr> <tr> <td class="label">state</td> <td class="slimfield"><input class="field" id="administrative_area_level_1" disabled="true"></input></td> <td class="label">zip code</td> <td class="widefield"><input class="field" id="postal_code" disabled="true"></input></td> </tr> <tr> <td class="label">country</td> <td class="widefield" colspan="3"><input class="field" id="country" disabled="true"></input></td> </tr> </table> <script> // example displays address form, using autocomplete feature // of google places api users fill in information. // example requires places library. include libraries=places // parameter when first load api. example: // <script src="https://maps.googleapis.com/maps/api/js?key=your_api_key&libraries=places"> 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 initautocomplete() { // create autocomplete object, restricting search geographical // location types. autocomplete = new google.maps.places.autocomplete( /** @type {!htmlinputelement} */(document.getelementbyid('autocomplete')), {types: ['geocode']}); // when user selects address dropdown, populate address // fields in form. autocomplete.addlistener('place_changed', fillinaddress); } function fillinaddress() { // place details autocomplete object. var place = autocomplete.getplace(); (var component in componentform) { document.getelementbyid(component).value = ''; document.getelementbyid(component).disabled = false; } // each component of address place details // , fill corresponding field on form. (var = 0; < 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; } } } // bias autocomplete object user's geographical location, // supplied browser's 'navigator.geolocation' object. function geolocate() { if (navigator.geolocation) { navigator.geolocation.getcurrentposition(function(position) { 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()); }); } } </script> <script src="https://maps.googleapis.com/maps/api/js?key=your_api_key&libraries=places&callback=initautocomplete" async defer></script> </body> </html> i created api key , copy implementation. it's ok.
in .html file autocomplete working correctly when try implement in mvc view doesn't work.
anybody knows cause?
mvc source:
<!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> /* set map height explicitly define size of div * element contains map. */ #map { height: 100%; } /* optional: makes sample page fill window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=roboto:300,400,500"> <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> <div id="locationfield"> <input id="autocomplete" placeholder="enter address" onfocus="geolocate()" type="text"></input> </div> <table id="address"> <tr> <td class="label">street address</td> <td class="slimfield"> <input class="field" id="street_number" disabled="true"></input> </td> <td class="widefield" colspan="2"> <input class="field" id="route" disabled="true"></input> </td> </tr> <tr> <td class="label">city</td> <!-- note: selection of address components in example typical. may need adjust locations relevant app. see https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform --> <td class="widefield" colspan="3"> <input class="field" id="locality" disabled="true"></input> </td> </tr> <tr> <td class="label">state</td> <td class="slimfield"> <input class="field" id="administrative_area_level_1" disabled="true"></input> </td> <td class="label">zip code</td> <td class="widefield"> <input class="field" id="postal_code" disabled="true"></input> </td> </tr> <tr> <td class="label">country</td> <td class="widefield" colspan="3"> <input class="field" id="country" disabled="true"></input> </td> </tr> </table> <script> // example displays address form, using autocomplete feature // of google places api users fill in information. // example requires places library. include libraries=places // parameter when first load api. example: // <script src="https://maps.googleapis.com/maps/api/js?key=your_api_key&libraries=places"> 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 initautocomplete() { // create autocomplete object, restricting search geographical // location types. autocomplete = new google.maps.places.autocomplete( (document.getelementbyid('autocomplete')), {types: ['geocode']}); // when user selects address dropdown, populate address // fields in form. autocomplete.addlistener('place_changed', fillinaddress); } function fillinaddress() { // place details autocomplete object. var place = autocomplete.getplace(); (var component in componentform) { document.getelementbyid(component).value = ''; document.getelementbyid(component).disabled = false; } // each component of address place details // , fill corresponding field on form. (var = 0; < 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; } } } // bias autocomplete object user's geographical location, // supplied browser's 'navigator.geolocation' object. function geolocate() { if (navigator.geolocation) { navigator.geolocation.getcurrentposition(function(position) { 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()); }); } } </script> <script src="https://maps.googleapis.com/maps/api/js?key=**********************u&libraries=places&callback=initautocomplete" async defer></script> <!-- visual studio browser link --> <script type="application/json" id="__browserlink_initializationdata"> {"appname":"chrome","requestid":"c04e736e3191480b80cb519fb61aa300"} </script> <script type="text/javascript" src="https://localhost:44390/29ed0204b7274dbeaf7531dd7d342990/browserlink" async="async"></script> <!-- end browser link --> </body> </html>
Comments
Post a Comment