Lat/Long

by aaronk85

HTML

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map"></div>
<table>
    <tbody id="myMap">
     <tr>
         <td class="label"><label for="Lat">Lat</label>:</td>
         <td class="value"><input type="text" size="20" id="Lat" value="" name="Lat">
    </td>
    </tr>
    <tr>
       <td class="label"><label for="Long">Long</label>:</td>
       <td class="value"><input type="text" size="20" id="Long" value="" name="Long">
    </td>
    </tr>
     </tbody>
</table>

CSS

#map {
  height: 768px;
  width: 768px;    
  border: 1px solid #000;
}

JavaScript

window.onload = function() {
    var latlng = new google.maps.LatLng(-31.944515137084274, 115.83009660243988);
    var map = new google.maps.Map(document.getElementById('map'), {
        center: latlng,
        zoom: 19,
        zoomControl: false, 
        scrollwheel: false, 
        disableDoubleClickZoom: true,
        streetViewControl: false,
        mapTypeControl: false,
        overviewMapControl: false,
        panControl: false,
        scaleControl: false,
        draggable: false,     
        mapTypeId: google.maps.MapTypeId.SATELLITE
    });

var marker;

function placeMarker(location) {
  if ( marker ) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
  }
}

google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
    var lat = event.latLng.lat();
    var lng = event.latLng.lng();
    $("#Lat").val(lat);
    $("#Long").val(lng);
});
};