Anzeige

Dynamische google maps Karte

Dynamische google maps Karte | PSD-Tutorials.de

Erstellt von tom_tom, 26.01.2013.

  1. tom_tom

    tom_tom Noch nicht viel geschrieben

    Dabei seit:
    02.11.2012
    Beiträge:
    40
    Geschlecht:
    männlich
    Software:
    Adobe CS5 MC
    Kameratyp:
    Nikon D90
    Dynamische google maps Karte
    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 :D
    thomas

    PS: Das mit den Datenschutzgründen weiß ich, ich will sowieso keine genauen Adressen eingeben, nur Straßennamen etc ;)
     
    #1      
  2. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Dynamische google maps Karte
    AW: Dynamische google maps Karte

    Die Google Maps API ist doch wunderbar dokumentiert (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
     
    #2      
  3. tom_tom

    tom_tom Noch nicht viel geschrieben

    Dabei seit:
    02.11.2012
    Beiträge:
    40
    Geschlecht:
    männlich
    Software:
    Adobe CS5 MC
    Kameratyp:
    Nikon D90
    Dynamische google maps Karte
    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...
     
    #3      
  4. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Dynamische google maps Karte
    AW: Dynamische google maps Karte

    Das Umwandeln erledigt der Geocoding-Service, die so erhaltenen Koordinaten fütterst du dem Directions-Service. Die Beispiel-Seite 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
     
    Zuletzt bearbeitet: 26.01.2013
    #4      
  5. tom_tom

    tom_tom Noch nicht viel geschrieben

    Dabei seit:
    02.11.2012
    Beiträge:
    40
    Geschlecht:
    männlich
    Software:
    Adobe CS5 MC
    Kameratyp:
    Nikon D90
    Dynamische google maps Karte
    AW: Dynamische google maps Karte

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

    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
     
    #5      
  6. tom_tom

    tom_tom Noch nicht viel geschrieben

    Dabei seit:
    02.11.2012
    Beiträge:
    40
    Geschlecht:
    männlich
    Software:
    Adobe CS5 MC
    Kameratyp:
    Nikon D90
    Dynamische google maps Karte
    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?
     
    #6      
  7. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Dynamische google maps Karte
    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. beim Seitenladen ausführen lassen.


    Duddle
     
    #7      
  8. pwfoto

    pwfoto Moin!

    Dabei seit:
    11.12.2009
    Beiträge:
    694
    Geschlecht:
    männlich
    Software:
    Creativ Suite CS6, LR5 (Win10)
    Kameratyp:
    EOS 700D, G9
    Dynamische google maps Karte
    AW: Dynamische google maps Karte

    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.
     
    #8      
  9. tom_tom

    tom_tom Noch nicht viel geschrieben

    Dabei seit:
    02.11.2012
    Beiträge:
    40
    Geschlecht:
    männlich
    Software:
    Adobe CS5 MC
    Kameratyp:
    Nikon D90
    Dynamische google maps Karte
    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 ;)
     
    #9      
  10. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Dynamische google maps Karte
    AW: Dynamische google maps Karte

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


    Duddle
     
    #10      
  11. tom_tom

    tom_tom Noch nicht viel geschrieben

    Dabei seit:
    02.11.2012
    Beiträge:
    40
    Geschlecht:
    männlich
    Software:
    Adobe CS5 MC
    Kameratyp:
    Nikon D90
    Dynamische google maps Karte
    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:
    1. <!DOCTYPE html>
    2.   <head>
    3.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    4.     <meta charset="utf-8">
    5.     <title>Google Maps JavaScript API v3 Example: Directions Simple</title>
    6.     <style>
    7.         html, body {
    8.           height: 100%;
    9.           margin: 0;
    10.           padding: 0;
    11.         }
    12.        
    13.         #map_canvas {
    14.           height: 100%;
    15.         }
    16.        
    17.         @media print {
    18.           html, body {
    19.             height: auto;
    20.           }
    21.        
    22.           #map_canvas {
    23.             height: 650px;
    24.           }
    25.         }
    26.     </style>
    27.     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    28.     <script>
    29.       var directionDisplay;
    30.       var directionsService = new google.maps.DirectionsService();
    31.       var map;
    32.  
    33.       function initialize() {
    34.         directionsDisplay = new google.maps.DirectionsRenderer();
    35.         var vienna = new google.maps.LatLng(48.209, 16.37);
    36.         var mapOptions = {
    37.           zoom:7,
    38.           mapTypeId: google.maps.MapTypeId.ROADMAP,
    39.           center: vienna
    40.         }
    41.         map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    42.         directionsDisplay.setMap(map);
    43.       }
    44.  
    45.       function calcRoute(start,end) {
    46.         //var start = document.getElementById('start').value;
    47.         //var end = document.getElementById('end').value;
    48.         var request = {
    49.             origin:start,
    50.             destination:end,
    51.             travelMode: google.maps.DirectionsTravelMode.DRIVING
    52.         };
    53.         directionsService.route(request, function(response, status) {
    54.           if (status == google.maps.DirectionsStatus.OK) {
    55.             directionsDisplay.setDirections(response);
    56.           }
    57.         });
    58.       }
    59.     </script>
    60.   </head>
    61.   <body onload="initialize()">
    62.     <div onload="calcRoute('vienna', 'graz')">
    63.         Karte:
    64.     </div>
    65.     <div id="map_canvas" style="top:30px;"></div>
    66.   </body>
    67. </html>
    68.  
    thomas
     
    #11      
  12. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Dynamische google maps Karte
    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:
    1.  
    2.   <body onload="initialize(); calcRoute('vienna', 'graz');">
    3.  
    oder du wirfst den Aufruf in initialize() selbst, also
    HTML:
    1.  
    2.    function initialize() {
    3.         directionsDisplay = new google.maps.DirectionsRenderer();
    4.         var vienna = new google.maps.LatLng(48.209, 16.37);
    5.         var mapOptions = {
    6.           zoom:7,
    7.           mapTypeId: google.maps.MapTypeId.ROADMAP,
    8.           center: vienna
    9.         }
    10.         map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    11.         directionsDisplay.setMap(map);
    12.         calcRoute('vienna', 'graz');
    13.       }
    14. ......
    15.   <body onload="initialize()">
    16.  
    Natürlich könntest du dann dem initialize im <body> die Städte übergeben und durchreichen.


    Duddle
     
    #12      
  13. tom_tom

    tom_tom Noch nicht viel geschrieben

    Dabei seit:
    02.11.2012
    Beiträge:
    40
    Geschlecht:
    männlich
    Software:
    Adobe CS5 MC
    Kameratyp:
    Nikon D90
    Dynamische google maps Karte
    AW: Dynamische google maps Karte

    oh, das erklärt so einiges :p

    Danke mal :D

    Und wie könnt ich das noch mit der Anfahrtsstrecke machen?
     
    #13      
  14. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Dynamische google maps Karte
    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 diesem Beispiel gezeigt (Stichwort: Panel).


    Duddle
     
    #14      
  15. tom_tom

    tom_tom Noch nicht viel geschrieben

    Dabei seit:
    02.11.2012
    Beiträge:
    40
    Geschlecht:
    männlich
    Software:
    Adobe CS5 MC
    Kameratyp:
    Nikon D90
    Dynamische google maps Karte
    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...) ;)
     
    #15      
  16. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Dynamische google maps Karte
    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:
    1. if (status == google.maps.DirectionsStatus.OK) {
    2.     directionsDisplay.setDirections(response);
    3.     distance = "Der Anfahrtsweg betrug ca. "+response.routes[0].legs[0].distance.text;
    4.     document.getElementById("distance_road").innerHTML = distance;
    5. }
    6.  
    In dem zurückgegebenen Objekt stecken auch noch zusätzliche Informationen als nur die oben gezeigte Distanz, falls du mehr brauchst (siehe Dokumentation).


    Duddle
     
    #16      
  17. tom_tom

    tom_tom Noch nicht viel geschrieben

    Dabei seit:
    02.11.2012
    Beiträge:
    40
    Geschlecht:
    männlich
    Software:
    Adobe CS5 MC
    Kameratyp:
    Nikon D90
    Dynamische google maps Karte
    AW: Dynamische google maps Karte

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

    HTML:
    1. <!DOCTYPE html>
    2.   <head>
    3.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    4.     <meta charset="utf-8">
    5.     <title>Google Maps JavaScript API v3 Example: Directions Simple</title>
    6.     <style>
    7.         html, body {
    8.           height: 100%;
    9.           margin: 0;
    10.           padding: 0;
    11.         }
    12.        
    13.         #map_canvas {
    14.           height: 400px;
    15.           width:650px;
    16.         }
    17.        
    18.         @media print {
    19.           html, body {
    20.             height: 400px;
    21.           }
    22.        
    23.           #map_canvas {
    24.             height: 400px;
    25.           }
    26.         }
    27.     </style>
    28.     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    29.     <script>
    30.       var directionDisplay;
    31.       var directionsService = new google.maps.DirectionsService();
    32.       var map;
    33.  
    34.       function initialize() {
    35.         directionsDisplay = new google.maps.DirectionsRenderer();
    36.         var vienna = new google.maps.LatLng(48.209, 16.37);
    37.         var mapOptions = {
    38.           zoom:7,
    39.           mapTypeId: google.maps.MapTypeId.ROADMAP,
    40.           center: vienna
    41.         }
    42.         map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    43.         directionsDisplay.setMap(map);
    44.       }
    45.  
    46.       function calcRoute(start,end) {
    47.         //var start = document.getElementById('start').value;
    48.         //var end = document.getElementById('end').value;
    49.         var request = {
    50.             origin:start,
    51.             destination:end,
    52.             travelMode: google.maps.DirectionsTravelMode.DRIVING
    53.         };
    54.         directionsService.route(request, function(response, status) {
    55.           if (status == google.maps.DirectionsStatus.OK) {
    56.             directionsDisplay.setDirections(response);
    57.           }
    58.         });
    59.         if (status == google.maps.DirectionsStatus.OK) {
    60.             directionsDisplay.setDirections(response);
    61.             distance = "Der Anfahrtsweg betrug ca. "+response.routes[0].legs[0].distance.text;
    62.             document.getElementById("distance_road").innerHTML = distance;
    63.         }
    64.       }
    65.     </script>
    66.   </head>
    67.   <body onload="initialize(); calcRoute('schoaderstraße 12, 7551 stegersbach', 'hauptplatz, 7551 stegersbach');">
    68.     <h3>Anfahrt:</h3>
    69.     <div id="map_canvas" style="top:30px;"></div><br><br>
    70.     <div style="width:100%; height:10%" id="distance_road">Anfahrtsweg</div>
    71.   </body>
    72. </html>
    73.  
     
    Zuletzt bearbeitet: 27.01.2013
    #17      
  18. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Dynamische google maps Karte
    AW: Dynamische google maps Karte

    Okay, ich dachte du erkennst, dass das nur zwei neue Zeilen sind. Vorher:
    HTML:
    1.  
    2. if (status == google.maps.DirectionsStatus.OK) {
    3.   directionsDisplay.setDirections(response);
    4. }
    5.  
    Nachher:
    HTML:
    1.  
    2. if (status == google.maps.DirectionsStatus.OK) {
    3.   directionsDisplay.setDirections(response);
    4.   distance = "Der Anfahrtsweg betrug ca. "+response.routes[0].legs[0].distance.text;
    5.   document.getElementById("distance_road").innerHTML = distance;
    6. }
    7.  

    Duddle
     
    #18      
  19. tom_tom

    tom_tom Noch nicht viel geschrieben

    Dabei seit:
    02.11.2012
    Beiträge:
    40
    Geschlecht:
    männlich
    Software:
    Adobe CS5 MC
    Kameratyp:
    Nikon D90
    Dynamische google maps Karte
    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 :D
     
    Zuletzt bearbeitet: 27.01.2013
    #19      
  20. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    Dynamische google maps Karte
    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
     
    #20      
x
×
×