<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<link href="screen.css" rel="stylesheet" type ="text/css" />
<script type="text/javascript">
  function initialize(address) {
	var geoCoder = new google.maps.Geocoder(address)
	var request = {address:address};
	geoCoder.geocode(request, function(result, status){
		var latlng = new google.maps.LatLng(result[0].geometry.location.lat(), result[0].geometry.location.lng());
		var myOptions = {
		  zoom: 15,
		  center: latlng,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		};
        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
		var marker = new google.maps.Marker({position:latlng,map:map,title:'Direccion'});
	})
  }
</script>

<script>
    $(document).ready(function(){
        initialize($('#address').val());
    })
</script>

<!-- <input id="address" placeholder="Enter your Address" type ="text" /> <script>
    $(document).ready(function(){
        initialize('Cuautitlan Izcalli, Mexico');
        $('#search').bind('click',function(){
            initialize($('#address').val());    
        })
    })
</script> -->
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 5px; padding: 0px;}
  #map_canvas {
      width:529px; 
      height:400px;
  }
</style>
<title>jQueryLoad.com</title>
</head>
    <body>
    <input id="address" value="jardin de invierno, hacienda del jardin, tultepec, mexico" type ="text" />
	<div id="map_canvas"></div>
    </body>
</html>