kostenloser Webspace werbefrei: lima-city


Google-Maps API für Routen

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    srilankatours

    srilankatours hat kostenlosen Webspace.

    Hallo

    ich habe einen Code, der eine Google-Map (mit Route) anzeigt,
    das klappt auch grundsätzlich ganz gut, aber ich habe einige Fragen,
    zu denen ich auch nach 2 Stunden Googeln keine Antworten gefunden habe

    hier der Code:
    <!DOCTYPE html>
    <html> 
    <head>
    <title>Google-Maps - Route Example</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    
    <style type="text/css">
    <!--
    body { font-family:Arial; font-size:14px; color:#000000; } 
    -->
    </style>
    
    
    </head> 
    <body> 
    
    <h2>Google Maps JavaScript API v3 Example: Directions Complex</h2>
    
    <p>ROUTE: <i>Berlin</i> --> <i>Dresden</i> --> <i>Leipzig</i> --> <i>Hannover</i> --> <i>Paris</i> </p>
    
    <br>
    <br>
    
    
       <div id="map" style="width: 520px; height: 410px;"></div> 
       <div id="duration">Duration: </div> 
       <div id="distance">Distance: </div> 
    
    <script type="text/javascript"> 
    
       var directionsService = new google.maps.DirectionsService();
       var directionsDisplay = new google.maps.DirectionsRenderer();
    
       var myOptions = {
    
    	 zoom: 6, 
    	 
    //     mapTypeId: google.maps.MapTypeId.TERRAIN
    //     mapTypeId: google.maps.MapTypeId.ROADMAP
           mapTypeId: google.maps.MapTypeId.HYBRID
    //     mapTypeId: google.maps.MapTypeId.SATELLITE
    
       }
    
       var map = new google.maps.Map(document.getElementById("map"), myOptions);
       directionsDisplay.setMap(map);
    
       var request = {
    
    	   origin: 'Berlin', 
           destination: 'Paris',
    	   
    	   waypoints: [ 
    		{ location:'Dresden', stopover:true }, 
    		{ location:'Leipzig', stopover:true }, 
    		{ location:'Hannover', stopover:true }, 
    	   ],
    
           provideRouteAlternatives: false,
    	   travelMode: google.maps.DirectionsTravelMode.DRIVING,
    	   unitSystem: google.maps.UnitSystem.METRIC 
    //	   unitSystem: google.maps.UnitSystem.IMPERIAL
    	   
       };
    
       directionsService.route(request, function(response, status) { 
       
    
          if (status == google.maps.DirectionsStatus.OK) {
    
             // Display the distance:
             document.getElementById('distance').innerHTML += 
                response.routes[0].legs[0].distance.value + " meters" + " --- (" + response.routes[0].legs[0].distance.text + ")";
    
             // Display the duration:
             document.getElementById('duration').innerHTML += 
                response.routes[0].legs[0].duration.value + " seconds" + " --- (" + response.routes[0].legs[0].duration.text + ")";
    
             directionsDisplay.setDirections(response);
          }
       });
    
    </script> 
    
    
    <br>
    <br>
    <br>
    
    
    </body> 
    </html>



    hier die Fragen:

    a) Zoom Einstellung ... egal welchen Wert ich setze, der Zoom der Karte ist immer gleich
    der wird anscheinend automatisch angepasst, aber was, wenn ich die Route von "weiter weg" also Zoom kleiner haben will ?!

    b) Route über Stadt mit Umlaut .. wie z.B. Köln
    ... egal was ich mache, ob Köln oder utf8_encode('Köln') oder urlencode('Köln') oder K&#246;ln
    bei nichts davon bekomme ich eine Karte .... wie mache ich meine Route über Köln (über Stadt mit Umlaut) ???

    also für neuen Wegpunkt: ...
    { location:'Köln', stopover:true }
    .... aber in welcher codierung?

    c) kann ich die Map mit der Route auch einfach als Image bekommen,
    also nicht als JS (JSON) sondern als Bild jpg/png/ ... egal welches Format ?

    denn die JSON Datem-Menge ist extrem ? ... für so ne einfache route ?!
    habe mal die JSON Daten von respone als Debug ausgegeben
    das ist Wahhhhhhnsinn ... Mega-Viel ... zuuuu viel ...


    ich hoffe Ihr könnt mir helfen
    Danke !
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. g****e

    Hey

    Ich denk mal der Zoom wird automatisch angepasst, du könntest allerdings eine Zoomfunktion einbauen, indem du Buttons nimmst, welche mit
    map.zoomIn(); map.zoomOut;
    verwendest. Ich kann mir gut vorstellen, dass Google hier automatisch reguliert. Ich habe selbst mit GMaps noch nicht gearbeitet, aber wer weiß. Hast du den zoomlvl denn schonmal auf 0 gesetzt als Beispiel, um zu schauen, ob zumindest die ganze Welt angezeigt wird?
    Und statt Köln schreibt man Koeln. Du nutzt die deutsche Umschreibung für deutsche Zeichen. Da wird aus ä=>ae , ö=>oe und ü=>ue . Damit sollte es funktionieren.
    Die JSON Datenmenge ist nicht extrem, das ist nur ein einfacher Text. Aber es müssen ja auch die Bilder, also die "Tiles" geladen werden. Ohne diese kann man nichts anzeigen. Und diese dürften ein wenig traffic brauchen. Du kannst aber auch nur ein Image laden, indem du wie hier in der Doku steht vorgehst: https://developers.google.com/maps/documentation/staticmaps/
    Damit erstellst du dir einen Link, in welchem du alle Parameter mitsendest, und du kriegst dann ein Bild, welches du einfach als img-Tag source benutzen kannst.

    Ich hoffe das hilft dir weiter :)

    Liebe Grüße
  4. Sanus!
    Ich verwende das System zwar nicht für eine fix eingetragene Route, sondern lediglich um Koordinaten auszulesen, aber dennoch funktioniert es:
    anstatt myOptions zu definieren, probiers mal so:
    Deinen code
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
       directionsDisplay.setMap(map);
    ändere mal durch diesen:
    // erstellen und zentrieren der Karte und Cursor als Fadenkreuz
    var map = new GMap2(document.getElementById("map"), {draggableCursor:'crosshair', draggingCursor: 'pointer'});
    map.setCenter(new GLatLng(48.83579746243, 6.2841796875), 5);
    
    // Zoomfunktion und Navigation auf der linken Kartenseite
    map.addControl(new GLargeMapControl());
    
    // Kontrollelemente des Kartentyps (Straßenansicht, Satelit oder Hybrid)
    map.addControl(new GMapTypeControl());
    Die Zahl 5 (nach den Koordinaten, welche den Mittelpunkt der Karte ergeben) entspricht dem Zoomlevel und kann natürlich beliebig geändert werden...
  5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!