Dynamische google maps Karte

tom_tom · 26.01.2013

Hallo
Ich bastel grad an der neuen Feuerwehrhomepage und nun wollte ich beim Einsatzbericht eine Karte einbauen, die die Route vom Feuerwehrhaus zum Einsatzort anzeigt. Ich hab zwar auf der google Homepage die verschiedensten Dinge entdeckt, nur blick ich mich da überhaupt nicht durch was ich genau brauche....
Die Informationen die ich in die Karte "einspeisen" will sind:
-) Standort Feuerwehrhaus (statisch)
-) Einsatzort (dynamisch)

Herausbekommen möcht ich eben eine Route die in einer beweglichen Karte (also so wie die auf der maps.google.com Seite ist) dargestellt wird. Eine Statische Version mit zwei Punkten hab ich zusammen gebracht, doch das gefällt mir überhaupt nicht. Toll wäre es vielleicht auch, wenn man die Länge Anfahrtsstrecke herausbekommen würde.

Das Ganze würde ich mir ca. so vorstellen: http://www.feuerwehr-oberwart.at/index.php?option=com_reports2&Itemid=115&view=show&id=567

danke schon mal

thomas

PS: Das mit den Datenschutzgründen weiß ich, ich will sowieso keine genauen Adressen eingeben, nur Straßennamen etc

Duddle · 26.01.2013

AW: Dynamische google maps Karte

Die Google Maps API ist doch wunderbar (ganz unten rechts kannst du viele Seiten auf Deutsch stellen). Alle Funktionen sind detailliert beschrieben und für die meisten Anwendungsfälle gibt es Beispiele. Wo genau hängst du also gerade?

Duddle

tom_tom · 26.01.2013

AW: Dynamische google maps Karte

Also ich hab schon mal ne Map drinnen, nur wie kann ich eine Route einbauen (Start/Endpunkt setzen)? Ebenso komm ich mit dem Umwandeln in die Breiten- bzw. Längengrade nicht ganz zusammen...

Duddle · 26.01.2013

AW: Dynamische google maps Karte

Das Umwandeln erledigt der , die so erhaltenen Koordinaten fütterst du dem . Die hat zu beiden mehrere Anwendungsbeispiele, die du fast 1:1 übernehmen kannst.

Wenn du konkrete Fragen zu einem Service oder einem nicht funktionierenden Script hast, immer her damit.

Duddle

tom_tom · 27.01.2013

AW: Dynamische google maps Karte

Ok, das mit dem Umwandeln hab ich jetzt begriffen, danke

Wenn ich mir das directions-simple Beispiel runter und öffne, dann seh ich in der Ausgabe keine Map mehr...Ich hab aber nichts geändert - nur RMT-Ziel speichern unter usw

tom_tom · 27.01.2013

AW: Dynamische google maps Karte

Ok, Fehler gefunden!
Das Stylesheet hat gefehlt

Ich hab jetzt soweit eine Karte vor mir, nur wie stelle ich es nun an, einen PHP-Variable einzubauen und ohne einen Tastendruck/Formular absenden/etc. die Route angezeigt zu bekommen?

Duddle · 27.01.2013

AW: Dynamische google maps Karte

Naja, alles was du statisch schreibst (JS, HTML, etc) kannst du PHP-seitig generieren lassen. Wenn du nach "google maps api php" suchst, findest du aber auch Artikel und Klassen (Bsp.), die dir mglw. helfen können.

Das eigentliche Auslösen muss aber nicht per Knopf erfolgen, JavaScript kannst du problemlos z.B. ausführen lassen.

Duddle

pwfoto · 27.01.2013

AW: Dynamische google maps Karte

PS: Das mit den Datenschutzgründen weiß ich, ich will sowieso keine genauen Adressen eingeben, nur Straßennamen etc

Da ist es mit dem Datenschutz aber nicht weit her. Wer einmal durch die Straße fährt, wird ein abgebranntes Haus wohl schnell finden. Ob man das so darf, kann ich dir nicht sagen. Aber wenn sich die Feuerwehr beim Einsatz über Gaffer ärgert, sollte man sie nicht hinterher zu Besichtigung einladen. Für die Selbstdarstellung der Arbeit ist es ja recht unerheblich, wo es genau gebrannt hat.

tom_tom · 27.01.2013

AW: Dynamische google maps Karte

Ok, das mit dem Laden hab ich jetzt. Aber wie kann ich nun die Werte übergeben? wenn ich die Werte in die Klammern schreibe (bei der Funktion, und beim Aufruf) und unterhalb die lösche, erstellt sich keine Karte mehr...
Was hab ich daran falsch gemacht?

Das Problem ist mir durchaus bekannt, aber dann dürfte man auch keine Fotos hochladen. Denn die meisten Seitenbesucher sind Einheimische und erkennen sowieso wo sich das Haus bzw. die Einsatzstelle befunden hat. Auch spricht sich so etwas sehr schnell herum, aber dann nicht nur mit dem Straßennamen, sondern auch mit Name, Adresse, (nicht immer stimmende) Brandursache/Unfallursache und und und

Duddle · 27.01.2013

AW: Dynamische google maps Karte

Hast du das irgendwo online? Falls nicht, kannst du den relevanten Auszug hier posten?

Duddle

tom_tom · 27.01.2013

AW: Dynamische google maps Karte

Ich korrigiere mich - es erstellt sich keine Route mehr...

Also das ist mein Code, das Beispiel, ohne irgenwelche anderen Dinge, rein statisch zum Testen:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Directions Simple</title>
    <style>
		html, body {
		  height: 100%;
		  margin: 0;
		  padding: 0;
		}
		
		#map_canvas {
		  height: 100%;
		}
		
		@media print {
		  html, body {
			height: auto;
		  }
		
		  #map_canvas {
			height: 650px;
		  }
		}
	</style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;

      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var vienna = new google.maps.LatLng(48.209, 16.37);
        var mapOptions = {
          zoom:7,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: vienna
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        directionsDisplay.setMap(map);
      }

      function calcRoute(start,end) {
        //var start = document.getElementById('start').value;
        //var end = document.getElementById('end').value;
        var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
      }
    </script>
  </head>
  <body onload="initialize()">
    <div onload="calcRoute('vienna', 'graz')">
    	Karte:
    </div>
    <div id="map_canvas" style="top:30px;"></div>
  </body>
</html>

thomas

Duddle · 27.01.2013

AW: Dynamische google maps Karte

Der onload-Event ist nur für <body>- und <frameset>-Tags erlaubt. Das <div onload> macht daher nichts. Entweder rufst du im onload vom <body> beide Funktionen auf, also

HTML:

  <body onload="initialize(); calcRoute('vienna', 'graz');">

oder du wirfst den Aufruf in initialize() selbst, also

HTML:

   function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var vienna = new google.maps.LatLng(48.209, 16.37);
        var mapOptions = {
          zoom:7,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: vienna
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        directionsDisplay.setMap(map);
        calcRoute('vienna', 'graz');
      }
......
  <body onload="initialize()">

Natürlich könntest du dann dem initialize im <body> die Städte übergeben und durchreichen.

Duddle

tom_tom · 27.01.2013

AW: Dynamische google maps Karte

oh, das erklärt so einiges

Danke mal

Und wie könnt ich das noch mit der Anfahrtsstrecke machen?

Duddle · 27.01.2013

AW: Dynamische google maps Karte

Was genau meinst du? Den blauen Strich auf der Karte oder die Routenplanung? Ersteres wird bei mir automatisch eingefügt. Letzteres wird in gezeigt (Stichwort: Panel).

Duddle

tom_tom · 27.01.2013

AW: Dynamische google maps Karte

nein, ich mein die Länge..also Entfernung, so wie in dem Beispiel was ich gezeigt habe

-> klick (Der Anfahrtsweg betrug...)

Duddle · 27.01.2013

AW: Dynamische google maps Karte

Dafür hättest du direkt in den Quellcode der verlinkten Seite gucken können. Eine Suche nach "betrug" führt zu der Zeile:

HTML:

if (status == google.maps.DirectionsStatus.OK) {
    directionsDisplay.setDirections(response);
    distance = "Der Anfahrtsweg betrug ca. "+response.routes[0].legs[0].distance.text;
    document.getElementById("distance_road").innerHTML = distance;
}

In dem zurückgegebenen Objekt stecken auch noch zusätzliche Informationen als nur die oben gezeigte Distanz, falls du mehr brauchst (siehe Dokumentation).

Duddle

tom_tom · 27.01.2013

AW: Dynamische google maps Karte

Ok, stimmt

Wo bau ich den aber nun ein? Wenn ich das in calcRoute einbaue und distance mit einem div aufrufe passiert irgendwie nichts....

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Google Maps JavaScript API v3 Example: Directions Simple</title>
    <style>
		html, body {
		  height: 100%;
		  margin: 0;
		  padding: 0;
		}
		
		#map_canvas {
		  height: 400px;
		  width:650px;
		}
		
		@media print {
		  html, body {
			height: 400px;
		  }
		
		  #map_canvas {
			height: 400px;
		  }
		}
	</style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;

      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var vienna = new google.maps.LatLng(48.209, 16.37);
        var mapOptions = {
          zoom:7,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: vienna
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        directionsDisplay.setMap(map);
      }

      function calcRoute(start,end) {
        //var start = document.getElementById('start').value;
        //var end = document.getElementById('end').value;
        var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
		if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay.setDirections(response);
			distance = "Der Anfahrtsweg betrug ca. "+response.routes[0].legs[0].distance.text;
			document.getElementById("distance_road").innerHTML = distance;
		}
      }
    </script>
  </head>
  <body onload="initialize(); calcRoute('schoaderstraße 12, 7551 stegersbach', 'hauptplatz, 7551 stegersbach');">
  	<h3>Anfahrt:</h3>
   	<div id="map_canvas" style="top:30px;"></div><br><br>
   	<div style="width:100%; height:10%" id="distance_road">Anfahrtsweg</div>
  </body>
</html>

Duddle · 27.01.2013

AW: Dynamische google maps Karte

Okay, ich dachte du erkennst, dass das nur zwei neue Zeilen sind. Vorher:

HTML:

if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(response);
}

Nachher:

HTML:

if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(response);
  distance = "Der Anfahrtsweg betrug ca. "+response.routes[0].legs[0].distance.text;
  document.getElementById("distance_road").innerHTML = distance;
}

Duddle

tom_tom · 27.01.2013

AW: Dynamische google maps Karte

Jetzt komm ich nicht mehr mit... :uhm:

~~~~~~~~~~~~~~~

Ok, Zeit zum schlafen gehen, jetzt seh ichs was du meinst, klar, das es bei mir mit meiner Implementierung nicht funktioniert....

Danke

Duddle · 27.01.2013

AW: Dynamische google maps Karte

Da wo vorher (bevor du die Änderung gemacht hast) das mit "vorher" gekennzeichnete stand machst du jetzt das mit "nachher" gekennzeichnete. Danach solltest du zwei neue Zeilen im JavaScript-Teil haben.

Duddle