Geoloaction in form input type

Pritty October 27, 2015 HTML, Javascript, jQuery, Web Development Leave a comment 579 Views

Here I’m going to tell you interesting topic regarding google map application in web development. Most of the website need googlemap location while we are entering location name, for that we have one solution. Here I explain,when we are entering the location name in input type you will get the map for that particular location by using jquery. It’s very simple and can use in your web development application, this will helps for all the e-commerce site.I hope this concept is really helpful for all developer.

CODE

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Geo location</title>  
<style type='text/css'>
body {
	padding: 0px;
	margin: 0 auto;
	width: 80%;
	text-align: center;
color: #333;
}

#geocomplete { 
	width: 300px;
	}

.map_canvas { 
		width: 500px; 
		height: 500px; 
		margin: 0 auto;	
		}
</style>
</head>
<body>
	<h2 align="center"> <a href=""> Geoloaction in form input type </a> </h2><br>
<form>
  <input id="geocomplete" type="text" placeholder="Type in an address" size="90" />
</form>
<br>
<div class="map_canvas"></div>
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.0.js'></script>
<script type='text/javascript' src="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:"Ernakulam"
        };
        $("#geocomplete").geocomplete(options);        
      });
</script>   
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Geo location</title>

body {

padding: 0px;

margin: 0 auto;

width: 80%;

text-align: center;

color: #333;

}

#geocomplete {

width: 300px;

}

.map_canvas {

width: 500px;

height: 500px;

margin: 0 auto;

}

</style>

</head>

<body>

<h2 align="center"> <a href=""> Geoloaction in form input type </a> </h2><br>

<form>

</form>

<br>

$(function(){

var options = {

map: ".map_canvas",

location:"Ernakulam"

};

$("#geocomplete").geocomplete(options);

});

</script>

</body>

</html>

If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.