I have created a very basic web site and would like to create one page that will display a Google Earth map and somehow allow the user to enter GPS coordinates and then have the map go to that location. I have been led to believe that it's meant to be easy to do this but I don't know enough about HTML and Java Script to do it.
Below is some code that creates a page with Google maps. And I've found some code that is supposed to do the lookup I want, but I don't know how to marry the two together. Can anyone help me or is this a big ask?
The following code does the lookup
if (!window.geocodeLocation) {
window.geocodeLocation = 'City name, country, latitude and longitude, etc';
}
window.geocodeLocation = prompt('Enter a location', window.geocodeLocation);
var geocoder = new google.maps.ClientGeocoder();
geocoder.getLatLng(window.geocodeLocation, function(point) {
if (point) {
var lookAt = ge.createLookAt('');
lookAt.set(point.lat(), point.lng(), 10, ge.ALTITUDE_RELATIVE_TO_GROUND,
0, 60, 20000);
ge.getView().setAbstractView(lookAt);
}
});
The following code creates the map in a web page:
<!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>
<title>Tracker</title>
<meta name="description" content="Locate & track"/>
<meta name="Keywords" content="Track" />
<link href="StyleSheet.css"rel="stylesheet" type="text/css" />
<script src="http://www.google.com/jsapi?key=My_Key"
type="text/javascript">
</script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
<body>
<div id="map3d" style="height: 500px; width: 926px;"></div>
</body>
</html>
|
