leekiernan · April 19, 2013 23:42
diff --git a/Gmaps location control b/Gmaps location control
 <!DOCTYPE html>
 <html>
 <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map-canvas { height: 100% }
  form { position:absolute; top:0; z-index:50; width:100%; }
  input { width:100%; height:40px; border:none; padding:1px 10px; }
  span { position:absolute; height:34px; width:25%; right:10px; top:3px; background:white; padding:1px; color:black; line-height:34px; text-align:right; }
  </style>

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB59jg0BTk3X_VVTuiHouCFQ3hzrQvrszg&sensor=false"></script>
  <script type="text/javascript">
  var coordinates;
  var marker;

  function initialize() {
    geocoder = new google.maps.Geocoder();

    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(51.779976,-1.6480970999999727),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    marker = new google.maps.Marker({
      map: map,
      draggable:true,
      position: new google.maps.LatLng(51.779976,-1.6480970999999727)
    });

    google.maps.event.addListener(marker, 'position_changed', update);
  }

  function codeAddress() {
    var address = document.getElementById('address').value;

    geocoder.geocode( {'address': address}, function(results, status) {

      if (status == google.maps.GeocoderStatus.OK) {
        coordinates = results[0].geometry.location;

        map.setCenter( coordinates );
        marker.setPosition(coordinates);

        // var bounds = new google.maps.LatLngBounds( marker.getPosition() );
        $('#coords').html( coordinates.jb +","+ coordinates.kb );
      } else {
        // alert('Geocode was not successful for the following reason: ' + status);
        $('#coords').html("");
      }

    });
  }

  function update() {
    // marker.getPosition();
    // var bounds = new google.maps.LatLngBounds( marker.getPosition() );
    // map.fitBounds(bounds);

    coordinates = marker.position;

    $('#coords').html( coordinates.jb +","+ coordinates.kb );
  }

  function loadScript() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyB59jg0BTk3X_VVTuiHouCFQ3hzrQvrszg&sensor=false&callback=initialize";
    document.body.appendChild(script);
  }

  window.onload = loadScript;
  </script>

 </head>
 <body onload="initialize()">
  <div class="form">
    <form action="">
      <input type="text" id="address" />
      <span id="coords"></span>
    </form>
  </div>
  <div id="map-canvas"/>

  <script>
  $('#address').on('keyup', function() {
    codeAddress();
  })
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	html { height: 100% }
	body { height: 100%; margin: 0; padding: 0 }
	#map-canvas { height: 100% }
	form { position:absolute; top:0; z-index:50; width:100%; }
	input { width:100%; height:40px; border:none; padding:1px 10px; }
	span { position:absolute; height:34px; width:25%; right:10px; top:3px; background:white; padding:1px; color:black; line-height:34px; text-align:right; }
	</style>

	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB59jg0BTk3X_VVTuiHouCFQ3hzrQvrszg&sensor=false"></script>
	<script type="text/javascript">
	var coordinates;
	var marker;

	function initialize() {
	geocoder = new google.maps.Geocoder();

	var mapOptions = {
	zoom: 8,
	center: new google.maps.LatLng(51.779976,-1.6480970999999727),
	mapTypeId: google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
	marker = new google.maps.Marker({
	map: map,
	draggable:true,
	position: new google.maps.LatLng(51.779976,-1.6480970999999727)
	});

	google.maps.event.addListener(marker, 'position_changed', update);
	}

	function codeAddress() {
	var address = document.getElementById('address').value;

	geocoder.geocode( {'address': address}, function(results, status) {

	if (status == google.maps.GeocoderStatus.OK) {
	coordinates = results[0].geometry.location;

	map.setCenter( coordinates );
	marker.setPosition(coordinates);

	// var bounds = new google.maps.LatLngBounds( marker.getPosition() );
	$('#coords').html( coordinates.jb +","+ coordinates.kb );
	} else {
	// alert('Geocode was not successful for the following reason: ' + status);
	$('#coords').html("");
	}

	});
	}

	function update() {
	// marker.getPosition();
	// var bounds = new google.maps.LatLngBounds( marker.getPosition() );
	// map.fitBounds(bounds);

	coordinates = marker.position;

	$('#coords').html( coordinates.jb +","+ coordinates.kb );
	}

	function loadScript() {
	var script = document.createElement("script");
	script.type = "text/javascript";
	script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyB59jg0BTk3X_VVTuiHouCFQ3hzrQvrszg&sensor=false&callback=initialize";
	document.body.appendChild(script);
	}

	window.onload = loadScript;
	</script>

	</head>
	<body onload="initialize()">
	<div class="form">
	<form action="">
	<input type="text" id="address" />
	<span id="coords"></span>
	</form>
	</div>
	<div id="map-canvas"/>

	<script>
	$('#address').on('keyup', function() {
	codeAddress();
	})
	</script>
	</body>
	</html>