Problem mit Google Maps API v3

Question

Ich versuche, die folgenden mit der Google Maps API zu erreichen:

• Anzeige to_address als Markierung auf der Karte
• Benutzer Holen Lage
• Richtungen erzeugen und anzuzeigen auf der Grundlage der Informationen von gps/Benutzer-Eingabe

Ich habe die letzten beiden, um gut zu funktionieren bekommen. Das Problem, das ich jetzt habe, zeigt die to_address als eine Markierung auf der Karte, wenn der Standort nicht zur Verfügung gestellt wird.

Dies ist der Code, den ich verwende. Beachten Sie, dass die letzten 2 Schritte wie erwartet funktionieren. Ich weiß, dass ich dies mit Hilfe von Latlng erreichen kann, aber das ist keine Option für mich. Ich muss ihm eine Adresse geben.

var geocoder; 
var directionDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var to_pos; 
var to_address = '11161 84th ave delta bc'; 

function initialize() { 

    directionsDisplay = new google.maps.DirectionsRenderer(); 


    geocoder = new google.maps.Geocoder(); 

    geocoder.geocode({ 
     'address': to_address 
    }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      to_pos = results[0].geometry.location; 
     } 
    }); 

    var myOptions = { 
     zoom: 7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: to_pos 
    }; 
    var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); 

    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById('directions')); 

    var control = document.getElementById('d_options'); 

    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function (position) { 
      var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

      var infowindow = new google.maps.Marker({ 
       position: pos, 
       map: map, 
       title: "You" 
      }); 

      map.setCenter(pos); 
      $('#from').val(pos); 
      $('#d_options').trigger('collapse'); 
      calcRoute(); 

     }, function() { 
      handleNoGeolocation(true); 
     }); 
    } 
} 

function calcRoute() { 
    var start = document.getElementById('from').value; 
    var end = to_address; 
    $('#results').show(); 
    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); 
     } 
    }); 
} 


google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

Geocodierung verwendet eine asynchrone Anforderung. Sie müssen die Markierung innerhalb des Rückrufs von Geocode()

geocoder.geocode({ 
     'address': to_address 
    }, function (results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      var to_pos = results[0].geometry.location; 

      new google.maps.Marker({ 
       position: new google.maps.LatLng(to_pos.lat(),to_pos.lng()), 
       map: map, 
       title: "Destination" 
      }); 
     } 
    }); 

erstellen