Latitude / Longitude Finder

Mattel rejected my idea for pre-natal Barbie.

BrettBits > Java and Javascript Programs > Latitude / Longitude Finder

Click map to view Lat/Long.

To use this Javascript for your own, copy the contents of the textbox below, and paste them into a text editor. Then, save the contents as a .htm or .html file. The JavaScript is now yours! Please ensure you give me proper credit if you repost it somewhere else.

Javascript Source Code

var map;
var marker;
function initialize() {
	var latlng = new google.maps.LatLng(40.5190,-99.2628);
	var myOptions = {
		zoom: 5,
		center: latlng,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		draggableCursor: 'crosshair',
		draggingCursor: 'move'
	};
	map = new google.maps.Map(document.getElementById("mapCanvas"),
		myOptions);

marker = new google.maps.Marker({
		position: latlng, 
		map: map,
		clickable: false
	});

google.maps.event.addListener(map, 'click', updateLatLngDisplay);
}

function updateLatLngDisplay(event) {
	var container = document.getElementById("latLngContainer");
	if(container)
	{
		var lat = event.latLng.lat().toFixed(4);
		var lng = event.latLng.lng().toFixed(4);
		container.innerHTML = "Lat/Long: " + lat + "," + lng;

marker.setPosition(event.latLng);
	} 
	else
	{
		alert("Can not find Lat/Long container.");
	}
}

window.onload=initialize;
-->
</script>
<div id="latLngFinderContainer" style="width: 600px; height: 500px; position: relative;">
	<div id="mapCanvas" style="height: 100%; width: 100%"></div>
	<div id="latLngContainer" class="latLngContainer" style="color: black; position: absolute; right: 2px; bottom: 15px; font-size: 12px; background-color: #FFFFFF; -moz-border-radius: 7px; border-radius: 7px; padding: 5px;">Click map to view Lat/Long.</div>
</div>

Alternatively, you can download the source .html file itself by right-clicking on the Download button below, and click "Save Target As..." or "Save Link As...":

Share This Page!