Hallo, nach tagelangem Kampf und probieren, habe ich folgendes gefunden. Funktioniert soweit ganz schön. Ich möchte aber gern, dass das Eingabefeld gar nicht auftaucht, sondern sofort die Karte mit eingezeichneter Route erscheint. Ziel von mir festgelegt und Start per geolocation (function (position) steht zwar drin, aber irgendwie...???) Bin über jede Hilfe dankbar, da ich kein js beherrsche.
Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"/> <title>HTML5 Geolocation Beispiel mit Hilfe von Google Maps</title> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> </head> <body> <div id="wrapper"> <div id="map_canvas"></div> <div id="map_direction"><h4>Your direction: <span id="total"></span></h4></div> <!-- STARTING MAP DEFINITION --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=de"></script> <script type="text/javascript"> var rendererOptions = { draggable: true }; var map_direction = new google.maps.DirectionsRenderer(rendererOptions); var direction_service = new google.maps.DirectionsService(); var map; var start = new google.maps.LatLng(0.0, 0.0); var geocoder; geocoder = new google.maps.Geocoder(); // Initalize your map function initialize() { var myOptions = { zoom:zoom, mapTypeId: google.maps.MapTypeId.TERRAIN, center: start }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); map_direction.setMap(map); map_direction.setPanel(document.getElementById("map_direction")); } // Collect entered data and open Google Maps in a new browser tab function showRoute() { var start = document.getElementById("address").value; var dest_url = { origin:start, destination: destination, travelMode: google.maps.DirectionsTravelMode.DRIVING }; direction_service.route(dest_url, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { map_direction.setDirections(response); } }); } </script> <script> // Define infobox widget function codeAddress() { var address = destination; geocoder.geocode( { 'address': address }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var coordInfoWindow = new google.maps.InfoWindow({ content: "<h2>Route planning</h2><p>Enter your address<br>and press the Start button</p><input id='address' type='textbox' value='' style='border: 1px solid #f0f0f0;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;'> <input type='button' value='Start' onClick='showRoute();'>", map: map, position: results[0].geometry.location }); } else { alert("Geocode not available: " + status); } }); } // Automatic geo localisation function codeLatLng() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); geocoder.geocode({'latLng': pos}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { if (results[1]) { document.getElementById("address").value = results[1].formatted_address; } else { // alert("No results found"); } } else { // alert("Geocoder failed due to: " + status); } }); }, function() { // }); } } </script> <script> // DO NOT CHANGE CODE ABOVE! // Change custom parameters starting from here: var zoom = 13; // map zoom var destination = "Alexanderplatz 7, Berlin"; // destination, your address document.getElementById('map_canvas').style.width = '400px'; // map width document.getElementById('map_canvas').style.height = '400px'; // map height initialize(); codeAddress(); codeLatLng(); </script> <!-- END OF MAP DEFINITION --> </div></body> </html>