[js] Google maps js api met routebeschrijving werkend maken

maandag 28 maart 2011 20:27

Acties:

0 Henk 'm!

Alweer 16 jaar hier

Topicstarter

Hallo,

Ik zit de kl*ten met Google Maps' JS API V3. Ik heb alles al werkend, alleen nu nog een routebeschrijving. De code is juist, maar waar de fout is kan ik _niet_ ontdekken. Ik wil dus een verplaatsbare route, maar die komt pas beschikbaar nadat ik in mijn inputs begin en eind heb ingevuld (eind staat er al). Ook wil ik dan een totale afstand + beschrijving. De hele code volgens http://code.google.com/in....html#DraggableDirections overgenomen, maar het wil gewoon niet.

Mijn code's:

Javascript (vanuit de head_include waarin eerst vars worden omgezet in google-taal)

JavaScript:

var rendererOptions = {   
        draggable: true 
    };    
    var geocoder;
    var map;
    var directionDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
    var directionsService = new google.maps.DirectionsService();  
    function initialize() {  
        var latlng = new google.maps.LatLng('.$locatie.');     
        var myOptions = {       
            zoom: '.$zoomniveau.',       
            center: latlng,       
            mapTypeId: google.maps.MapTypeId.'.$mapsoort.'     }     
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        directionsDisplay.setMap(map); 
        directionsDisplay.setPanel(document.getElementById("directionsPanel"));    
        google.maps.event.addListener(directionsDisplay, \'directions_changed\', function() {     
            computeTotalDistance(directionsDisplay.directions);   
        });    
        calcRoute();
    } 
    function calcRoute() {  
        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);     
            }   
        }); 
    }
    function computeTotalDistance(result) {   
        var total = 0;   
        var myroute = result.routes[0];   
        for (i = 0; i < myroute.legs.length; i++) {     
            total += myroute.legs[i].distance.value;   
        }   
        total = total / 1000.   
        document.getElementById("total").innerHTML = total + " km"; 
    }

Mijn php:

PHP:

<?php $navsection = 'route'; $mapsoort = 'satelliet'; $zoomniveau = '16'; $locatie = '43.990344, 7.774651'; ?>
<!DOCTYPE html>
<html>
 <head>
  <title>Route</title>
  <base href="http://www.casastella.nl/">
  <?php include("../includes/head_include.php") ?>
 </head>
 <body onload="initialize()">
  <div class="content">
   <?php include("../includes/header_include.php") ?>
<div id="map_canvas" style="width: 500px; height: 500px"></div>
   <input id="start" type="textbox" value="Molini di Triora, Itali&euml;">
   <input id="end" type="textbox" value="Molini di Triora, Itali&euml;">     
   <input type="button" value="Geef beschrijving" onclick="calcRoute()">
   <span id="total"></span>
   <div id="directionsPanel" width="200px" height="500px" style="overflow-y: scroll"></div>
  </div>
 </body>
</html>

Wat is hier fout, ik krijg het niet werkend. (de kaart doet het, wil geen routebeschrijving doen, dus ook geen afstand ed -> kaart is zelfde)

edit: met de volgende code krijg ik de route, maar zonder beschrijving:

JavaScript:

var rendererOptions = {   
        draggable: true 
    };    
    var geocoder;
    var map;
    var directionDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
    var directionsService = new google.maps.DirectionsService();  
    function initialize() {  
        geocoder = new google.maps.Geocoder();
        directionsDisplay = new google.maps.DirectionsRenderer();
        var latlng = new google.maps.LatLng('.$locatie.');     
        var myOptions = {       
            zoom: '.$zoomniveau.',       
            center: latlng,       
            mapTypeId: google.maps.MapTypeId.'.$mapsoort.'     }     
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        directionsDisplay.setMap(map); 
    } 
    function codeAddress() {     
        var address = document.getElementById("address").value;     
        geocoder.geocode( { \'address\': address}, function(results, status) {       
            if (status == google.maps.GeocoderStatus.OK) {         
                map.setCenter(results[0].geometry.location);         
                var marker = new google.maps.Marker({             
                    map: map,              
                    position: results[0].geometry.location        
                });       
            } else {
                alert("Geocode was not successful for the following reason: " + status);       
            }     
        });   
    }
    function calcRoute() {  
        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(result, status) {     
            if (status == google.maps.DirectionsStatus.OK) {       
                directionsDisplay.setDirections(result);     
            }   
        }); 
    }

[ Voor 23% gewijzigd door F.West98 op 28-03-2011 20:40 ]

2x Dell UP2716D | R9 7950X | 128GB RAM | 980 Pro 2TB x2 | RTX2070 Super
.oisyn: Windows is net zo slecht in commandline als Linux in GUI

maandag 28 maart 2011 21:17

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

Zoals je best weet: ga debuggen. Devschuur® Beleid - Help, mijn script werkt niet (goed). Met deze bult aan code kunnen we al niet veel, zeker nu onze glazen bol stuk is. De foutmelding houden we nog van je tegoed.

[ Voor 34% gewijzigd door MueR op 28-03-2011 21:18 ]

Anyone who gets in between me and my morning coffee should be insecure.

Dit topic is gesloten.

Onderwerpen