Gmap3 - Forum

Gmap3 exchange platform

You are not logged in.

Ads
(server costs 27.50€ per month)


#1 2012-07-10 09:57:30

max2601
Member
Registered: 2012-07-10
Posts: 3

AutoComplete Restrictions

hello jean-baptiste, 
your gmap3-plugin does a great job in our project! we're using the plugin together with your autocomplete plugin in order to search for locations. i wanted to know if there's a possibility to constrain/restrict the completion list (we want the plugin to display only locations in austria). would be great if you could help us! 
greetings from austria

Offline

Ads
(server costs 27.50€ per month)


#2 2012-07-10 18:43:22

jbdemonte
Administrator
From: Pourrières, France
Registered: 2011-11-21
Posts: 574

Re: AutoComplete Restrictions

Hi,

You may use the region in the call, but i'm not sure google restrict fine, i never used it,
there is a new api from google places, i'm going to have a deeper look on it for the next version,
you may use it instead of the code of the example with autocompletion,

JB

Offline

#3 2012-07-11 12:13:11

max2601
Member
Registered: 2012-07-10
Posts: 3

Re: AutoComplete Restrictions

Hey JB,
thanks a lot for your quick reply! we took a look at the initialization of the autocomplete section. we tried to filter the results with a for-loop that splices the results-array if the if-statement doesn't match. but the autocomplete stops to work after the first time i try to enter something in the autocomplete input-box. we don't know what could be wrong..

$('#address').autocomplete({
source: function () {
$("#map").gmap3({
action: 'getAddress',
address: $(this).val(),
callback: function (results) {
if (!results) return;
for (var i = 0; i < results.length; i++) {
if (results\[i\].address_components\[4\].short_name != "AT") {
results.splice(i, 1);
i--;
}
}
$('#schadenort').autocomplete(
'display',
results,
false
);
}
});
},
cb: {
cast: function (item) {
return item.formatted_address;
},
select: function (item) {
$("#map").gmap3(
{ action: 'clear', name: 'marker' },
{ action: 'addMarker',
latLng: item.geometry.location,
map: { center: true }
}
);
}
}
}); 

Last edited by max2601 (2012-07-11 12:28:02)

Offline

#4 2012-07-12 05:38:58

jbdemonte
Administrator
From: Pourrières, France
Registered: 2011-11-21
Posts: 574

Re: AutoComplete Restrictions

Hi,

1) you fixed address_components[4] but it can be less or more than 4, in my code, i check each one to look for AT and to create a new result array

2) if #address is your text input, you have to re-use it in the dropdown list instead of #schadenort

This code works :

<html>    
  <head> 
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript" src="gmap3.min.js"></script>
    <script type="text/javascript" src="jquery-autocomplete.min.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery-autocomplete.css"/>
    <style>
      *{
        font-family: verdana;
        font-size: 12px;
      }
      body{
        text-align:center;
      }
      .gmap3{
        margin: 20px auto;
        border: 1px dashed #C0C0C0;
        width: 1000px;
        height: 500px;
      }
      .ui-menu .ui-menu-item{
        text-align: left;  
        font-weight: normal;
      }
      .ui-menu .ui-menu-item a.ui-state-hover{
        border: 1px solid red; 
        background: #FFBFBF; 
        color: black;
        font-weight:bold;
      }
    </style>
    
    <script type="text/javascript">
      $(function(){
          
          $('#test').gmap3();

          $('#address').autocomplete({
            source: function () {
              $("#map").gmap3({
                action: 'getAddress',
                address: $(this).val(),
                callback: function (results) {
                  if (!results) return;
                  var data = [];
                  $.each(results, function(i, result){
                    for(var j=0; j<result.address_components.length; j++){
                      if (result.address_components[j].short_name == "AT") {
                        data.push(result);
                        console.log("push");
                        return;
                      }
                    }
                  });
                  if (data.length){
                    $('#address').autocomplete(
                      'display',
                      data,
                      false
                    );
                  }
                }
              });
            },
            cb: {
              cast: function (item) {
                return item.formatted_address;
              },
              select: function (item) {
                $("#map").gmap3(
                  { action: 'clear', name: 'marker' },
                  { action: 'addMarker',
                    latLng: item.geometry.location,
                    map: { center: true }
                  }
                );
              }
            }
          });
      });
    </script>
  <body>
    <input type="text" id="address" size="60">
    <div id="map" class="gmap3"></div>
  </body>
</html>

Offline

#5 2012-07-12 11:36:12

max2601
Member
Registered: 2012-07-10
Posts: 3

Re: AutoComplete Restrictions

man, you're a true genius!! it works perfectly! thanks so so so much for your time and help!
in our code, it was #schadenort but I wanted to replace it with #address so it fits your regular example 'coding conventions' wink

I hope someone else can profit from this solution!

all the best and keep that amazing work up!

max

Offline

#6 2012-07-18 21:54:31

rationalthinker1
Member
Registered: 2012-07-17
Posts: 1

Re: AutoComplete Restrictions

Wow, thank you. Was trying to solve this for a long while. Although it doesn't properly well with Canada as it shows some US locations, but about 90% are good.

Offline

Board footer

Powered by FluxBB