<?PHP
$DirMapEn ="JARDIN DE INVIERNO, HACIENDA DEL JARDIN, TULTEPEC, MEXICO, MEXICO";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<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:'title'});
	})
  }
</script>

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

<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px;}
  #map_canvas {
      /*width:529px;*/
      /*height:400px;*/
	  width:auto;
      height:400px;
  }
</style>
</head>

<body>
<input id="address" value="<?PHP echo $DirMapEn; ?>" />
<div id="map_canvas"></div>
</body>
</html>