Question

I have added an address auto complete field to my site using this:

http://ubilabs.github.io/geocomplete/examples/simple.html

exact code used (taken from the site above) is this:

<!--GeoLocation AutoComplete--->     
     <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
     <script src="http://ubilabs.github.io/geocomplete/jquery.geocomplete.js"></script>

     <script>
      $(function(){

        $("#geocomplete1").geocomplete()
          .bind("geocode:result");
     });
     </script>

<!--HTML-->
 <label class="inp2"><input id="geocomplete1" onfocus="this.value=''" onblur ="if (this.value == '') { this.value ='Enter Address from' }"  value="Enter Address from"  type="text"></label>

this works and auto completes the address just fine, but for some strange reason the "powered by google" logo that's suppose to be at the lower right corner of the suggestion box is not showing up.

to clarify, I'm not talking about the "powered by google" logo on the right Outside the search field, i'm talking about the one inside the address suggestions box that opens up once you start typing.

Was it helpful?

Solution 2

Are you looking like this?

css

form {
background: url(https://developers.google.com/maps/documentation/places/images/powered-by-google-on-white.png) no-repeat center right;
}

html

<form>
    <label class="inp2">
        <input id="geocomplete1" onfocus="this.value=''" onblur="if (this.value == '') { this.value ='Enter Address from' }" value="Enter Address from" type="text">
    </label>
</form>

OTHER TIPS

Thank you ilmk, while adding that line to my CSS directly did not achieve what i wanted, it only added the logo outside my suggestion box on the right, something that i did not require, you did however give me an idea as to where to add the line which has solved the issue,

after adding the:

background: url(https://developers.google.com/maps/documentation/places/images/powered-by-google-on-white.png) no-repeat center right;

to my .pac-container in my style.css like so:

.pac-container:after{
    content:"";
    padding:1px 1px 1px 0;
    height:16px;
    text-align:right;
    display:block;
    background: url(https://developers.google.com/maps/documentation/places/images/powered-by-google-on-white.png) no-repeat center right;
}

everything works! thanks again.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top