Auto complete Google map in form input type using geocomplete Jquery

Here i'm going to tell you one of the interesting thing regarding web development. now a days most of the website need google map location while we are entering location name, for that we have one solution. When we are entering the location name in input type you will get map for that particular location by using Jquery, let see the code for that.

DOWNLOAD                        LIVE DEMO

HTML CODE

<form>
  <input id="geocomplete" type="text" placeholder="Type in an address" size="90" />
</form>
<br>
<div class="map_canvas"></div>

JQUERY SCRIPT

<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/
                               geocomplete/1.6.5/jquery.geocomplete.js"></script>    
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/
                                  js?sensor=false&amp;libraries=places"></script>
<script type='text/javascript'>
$(function(){
        var options = {
          map: ".map_canvas",
          location:"london"
        };
        $("#geocomplete").geocomplete(options);        
      });
</script>

CSS

<style type='text/css'>
#geocomplete { 
    width: 200px;
    }

.map_canvas { 
    width: 500px; 
    height: 500px; 
    margin: 0 auto; 
    }
</style>

I hope this concept is really helpful for all developer and this reduce works, and this will helps for all the e commerce site, pages site to know the google map location. thanks for visiting. keep visiting for more tutorial.

RELATED POSTS :

Floating menu using Jquery

Full screen API using JQuery

Simple blinking effect using css3 and Jquery

Animated background Color changer using Jquery UI

Google Doodles style animation using Jquery

Peeling style on top corner of browser using peelback jquery

Simple form validation using validate.js with jquery

Gird and List style view onclick by using Jquery

Web camera snap using snap.js Jquery