Erledigt / Habe eine andere Lösung gefunden
Ich möchte meinen Lesern eine Google Map anbieten, auf der sie ihren Längengrad und Breitengrad finden.
Das Script; siehe unten. Möchte ich in einem Artikel einbinden.
Ich bekomme zwar die Eingabemöglichkeit für die Strasse und Ort, aber die Map ist nicht zu sehen. API Key habe ich bereits.
Was mache ich falsch!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Geocoding</title>
<script src="http://maps.google.com/maps?file=api&…Vl1GKgcA23DpJQg" type="text/javascript"></script>
<script type="text/javascript">
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(53.5495867, 9.9624358), 13 );
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl());
geocoder = new GClientGeocoder();
showAddress("Reeperbahn, Hamburg");
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " nicht gefunden");
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml("<br \/>Längengrad: <strong>"+point.lng()+"<\/strong><br \/>Breitengrad: <strong>"+point.lat()+"<\/strong>");
GEvent.addListener(map, "click", function(markersetzen, point) {
map.clearOverlays();
marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml("<br \/>Längengrad: <strong>"+point.lng()+"<\/strong><br \/>Breitengrad: <strong>"+point.lat()+"<\/strong>");
});
}
}
);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()" style="font-family:Verdana;font-size:0.8em;">
<form action="#" onsubmit="showAddress(this.address.value); return false">
<p>
<input type="text" size="60" name="address" value="Reeperbahn, Hamburg" />
<input type="submit" value="Go!" />
</p>
<div id="map_canvas" style="width: 550px; height: 500px"></div>
</form>
</body>
</html>