Home/ Questions/Q 4596330
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T23:05:58+00:00

I am trying to create a real-time searchbox so my users can search for

  • 0

I am trying to create a real-time searchbox so my users can search for locations on my website.
I have been using JqueryUI Autocomplete function and GoogleMap API for the suggestions list.

Here’s the code:

...
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>

<body>
<div id="content">
    <h1>Google Maps Autocomplete Search Sample</h1>
    <div align="left">
        <form method="post" action="#">
            <input type="text" value="" id="searchbox" name="searchbox" style=" width:800px;height:30px; font-size:15px;">
            <input type="submit" />
            <div class="ui-widget" style="margin-top:2em; font-family:Arial">
                Result:
                <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
            </div>
        </form>
    </div>
    <div align="left" id="map" style="width:800px; height: 600px; margin-top: 10px; ">  
    </div>
</div>
<?php
include_once('inc/foot.php');
?>
<script type="text/javascript">
 $(document).ready(function(){

  var mapOptions = {
       zoom: 10,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       center: new google.maps.LatLng(41.06000,28.98700)
     };



  var map = new google.maps.Map(document.getElementById("map"),mapOptions);

  var geocoder = new google.maps.Geocoder();  

     $(function() {

         function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#log" );
            $( "#log" ).attr( "scrollTop", 0 );
        }

         $("#searchbox").autocomplete({

           source: function(request, response) {

          if (geocoder == null){
           geocoder = new google.maps.Geocoder();
          }
             geocoder.geocode( {'address': request.term }, function(results, status) {
               if (status == google.maps.GeocoderStatus.OK) {

                  var searchLoc = results[0].geometry.location;
               var lat = results[0].geometry.location.lat();
                  var lng = results[0].geometry.location.lng();
                  var latlng = new google.maps.LatLng(lat, lng);
                  var bounds = results[0].geometry.bounds;

                  geocoder.geocode({'latLng': latlng}, function(results1, status1) {
                      if (status1 == google.maps.GeocoderStatus.OK) {
                        if (results1[1]) {
                         response($.map(results1, function(loc) {
                        return {
                            label  : loc.formatted_address,
                            value  : loc.formatted_address+loc.geometry.location,
                            bounds   : loc.geometry.bounds
                          }
                        }));
                        }
                      }
                    });
            }
              });
           },
            select: function(event,ui){
                var pos = ui.item.position;
                var lct = ui.item.locType;
                var bounds = ui.item.bounds;
                log( ui.item ?
                    ui.item.value :
                    "undefined_by_google" + this.value );

      if (bounds){
       map.fitBounds(bounds);
      }
           }
         });
     });   
 });
</script>

I’d like to find a way to load the div (#log) only with the coordinates while the search input (#searchbox) keeps on showing the text value.

I hope it’s clear enough, otherwise just ask me…
Thanks for your help

EDIT

Problem solved, It was quiet easy, just needed:

$(“#log”).html(“latitude:” + lat + “longitude:” + lng);

Thanks for having a look at it Edgar

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You just have to add one line of code and then make one change:

    This will save your last location in a string:

                  lastLoc='('+lat+','+lng+')';

    and this will print it to the log:

    log( ui.item ? lastLoc : "undefined_by_google" + this.value );

    See the fiddle to see where these lines go:
    working example

    • 0