javascript - Google Maps V3 autocomplete input jquery Mobile

Question

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!

Answer 1

I changed my approach. Since I already have all the geocode information in the application I really just wanted to populate the text boxes. I added this code to the initialize function which does as I would like.

 var inputStart = document.getElementById('from');
        var inputDestination = document.getElementById('to');
        var options = {componentRestrictions: {country: 'ca'}};                 
        new google.maps.places.Autocomplete(inputStart, options);
        new google.maps.places.Autocomplete(inputDestination, options);