javascript - How to return Latitude and Longitude to multiple text input fields with Google map API -
i have search form 2 search google places autocomplete inputs.
i trying return valued of new position respective input field. success had able output position values both text fields. while need show on text field through location searched.
also don't know why though ids different both fields still values return on both of them.
code:
function initmap() { var map = new google.maps.map(document.getelementbyid('map'), { center: {lat: -33.8688, lng: 151.2195}, zoom: 13, type: ['geocodes'] }); var card = document.getelementbyid('pac-card'); var input1 = document.getelementbyid('pac-input1'); map.controls[google.maps.controlposition.top_right].push(card); var autocomplete1 = new google.maps.places.autocomplete(input1); autocomplete1.bindto('bounds', map); var marker = new google.maps.marker({ icon: base_url + 'includes/images/pointer.png', icon: 'http://www.cabmate.co.in/includes/images/pointer.png', map: map }); google.maps.event.addlistener(marker, 'dragend', function () { map.setcenter(this.getposition()); // set map center marker position updateposition1(this.getposition().lat(), this.getposition().lng()); }); google.maps.event.addlistener(map, 'drag', function () { marker.setposition(this.getcenter()); // set marker position map center updateposition1(this.getcenter().lat(), this.getcenter().lng()); }); google.maps.event.addlistener(map, 'dragend', function () { marker.setposition(this.getcenter()); // set marker position map center updateposition1(this.getcenter().lat(), this.getcenter().lng()); }); function updateposition1(lat, lng) { document.getelementbyid('pac-input1').value = lat.tofixed(4) + ','+ lng.tofixed(4); } autocomplete1.addlistener('place_changed', function() { marker.setvisible(false); var place = autocomplete1.getplace(); if (!place.geometry) { window.alert("no details available input1: '" + place.name + "'"); return; } if (place.geometry.viewport) { map.setcenter(place.geometry.location); map.setzoom(17); } else { map.setcenter(place.geometry.location); map.setzoom(17); } marker.setposition(place.geometry.location); marker.setvisible(true); var address = ''; if (place.address_components) { address = [ (place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '') ].join(' '); address.open(map, marker); } }); ///////////////////////////////////////////////////// *********************************second search box var input2 = document.getelementbyid('pac-input2'); var autocomplete2 = new google.maps.places.autocomplete(input2); autocomplete2.bindto('bounds', map); var marker1 = new google.maps.marker({ draggable: true, icon: base_url + 'includes/images/pointer.png', map: map }); google.maps.event.addlistener(marker1, 'dragend', function () { map.setcenter(this.getposition()); // set map center marker position updateposition2(this.getposition().lat(), this.getposition().lng()); }); google.maps.event.addlistener(map, 'drag', function () { marker1.setposition(this.getcenter()); updateposition2(this.getcenter().lat(), this.getcenter().lng()); }); google.maps.event.addlistener(map, 'dragend', function () { marker1.setposition(this.getcenter()); // set marker position map center updateposition2(this.getcenter().lat(), this.getcenter().lng()); }); function updateposition2(lat, lng) { document.getelementbyid('pac-input2').value = lat.tofixed(4) + ','+ lng.tofixed(4); } autocomplete2.addlistener('place_changed', function() { marker1.setvisible(false); var place1 = autocomplete2.getplace(); if (!place1.geometry) { window.alert("no details available input2: '" + place1.name + "'"); return; } if (place1.geometry.viewport) { map.setcenter(place1.geometry.location); map.setzoom(17); } else { map.setcenter(place1.geometry.location); map.setzoom(17); } marker1.setposition(place1.geometry.location); marker1.setvisible(true); var address1 = ''; if (place1.address_components) { address1 = [ (place1.address_components[0] && place1.address_components[0].short_name || ''), (place1.address_components[1] && place1.address_components[1].short_name || ''), (place1.address_components[2] && place1.address_components[2].short_name || '') ].join(' '); address1.open(map, marker1); } }); }
input fields are:
<div id="pac-container"> <input id="pac-input1" type="text" name="start" placeholder="origin" /> <input id="pac-input2" type="text" name="end" placeholder="destination" /> </div>
wiki
Comments
Post a Comment