I'm trying to get the autocomplete to work on a simple input text box. I have it working for one text box, but I have a second (to and from location) which it is throwing errors.
My code isn't very streamlined I don't think and I'm wondering if there is a cleaner method to get this working. I think my repetitive code maybe part of the problem. The 'to' input box doesn't work and no errors are thrown.
<script type="text/javascript">
$(document).on("pageinit", "#map_page", function () {
initialize();
layersOFFonload();
});
$(document).on('click', '#getDirectionsSubmit', function (e) {
e.preventDefault();
calculateRoute();
});
$(document).on('click', '#getCurrentLoc', function (e) {
e.preventDefault();
findCurrentPosition();
});
var directionDisplay,
directionsService = new google.maps.DirectionsService(),
map;
var geocoder = new google.maps.Geocoder();
var transitRoutesLayerKML = [];
var placeSearch, autocomplete;
function initialize() {
// set the default center of the map
var mapCenter = new google.maps.LatLng(55.1669513, -118.8031093);
// set route options (draggable means you can alter/drag the route in the map)
var rendererOptions = { draggable: true };
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
//updateMapSize(mapCenter);
// set the display options for the map
var myOptions = {
mapTypeControl: false,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mapCenter
}
// add the map to the map placeholder
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// bind the map to the directions
directionsDisplay.setMap(map);
// point the directions to the container for the direction details
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
// add a marker to the map on the geolocated point
marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
//draggable: true,
map: map
});
var kmlOptions = {
suppressInfoWindows: false,
preserveViewport: true,
map: map
};
transitRoutesLayerKML[0] = new google.maps.KmlLayer('http://mysite/KML/transit_mobile_route1.kml', kmlOptions);
transitRoutesLayerKML[1] = new google.maps.KmlLayer('http://mysite/KML/transit_mobile_route2.kml', kmlOptions);
transitRoutesLayerKML[2] = new google.maps.KmlLayer('http://mysite/KML/transit_mobile_route3.kml', kmlOptions);
transitRoutesLayerKML[3] = new google.maps.KmlLayer('http://mysite/KML/transit_mobile_route4.kml', kmlOptions);
transitRoutesLayerKML[4] = new google.maps.KmlLayer('http://mysite/KML/transit_mobile_route5.kml', kmlOptions);
transitRoutesLayerKML[5] = new google.maps.KmlLayer('http://mysite/KML/transit_mobile_route6a.kml', kmlOptions);
transitRoutesLayerKML[6] = new google.maps.KmlLayer('http://mysite/KML/transit_mobile_route6b.kml', kmlOptions);
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(/** @type {HTMLInputElement} */(document.getElementById('from')), (document.getElementById('to')), { 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();
});
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
}
// 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 (addressType) {
var val = place.address_components[i][addressType];
document.getElementById(addressType).value = val;
}
}
}
function findCurrentPosition() {
if (navigator.geolocation) {
// when geolocation is available on your device, run this function
navigator.geolocation.getCurrentPosition(foundYou, notFound);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
} else {
// when no geolocation is available, alert this message
alert('Geolocation not supported or not enabled.');
}
}
function foundYou(position) {
// convert the position returned by the geolocation API to a google coordinate object
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// then try to reverse geocode the location to return a human-readable address
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
// if the geolocation was recognized and an address was found
if (results[0]) {
// this will update the position of the marker
marker.setPosition(latlng);
// compose a string with the address parts
var address = results[0].address_components[0].long_name + ' ' + results[0].address_components[1].long_name + ', ' + results[0].address_components[3].long_name
// set the located address to the link, show the link and add a click event handler
// onclick, set the geocoded address to the start-point formfield
//$('#from').text(address);
$('#from').val(address);
// call the calcRoute function to start calculating the route
}
} else {
// if the address couldn't be determined, alert and error with the status message
alert("Geocoder failed due to: " + status);
}
});
}
<div id="fromlocationField" data-role="my-ui-field-contain">
<input type="text" id="from" placeholder="From Address, (eg, 10205 - 98street)" value="" /><button id="getCurrentLoc" data-icon="star">Use Current Location</button>
</div>
<div id="tolocationField" data-role="my-ui-field-contain">
<input type="text" id="to" placeholder="To Destination (eg, 10205 - 98street)" value="" />
</div>
<a data-icon="search" data-role="button" href="#" id="getDirectionsSubmit">Get directions</a>
I tried a different method of populating a autocomplete but couldn't get it to resolve at all. This is the closes I've gotten it to work, it works on the 'from' input, but not the 'to' input.
Any advice would be greatly appreciated.
Thanks!
See Question&Answers more detail:
os