Verwenden von geoPosition.js mit Colobox

Question

Ich versuche, eine Colorbox-Verknüpfung zu erstellen, die den Benutzer um Erlaubnis bittet, seinen Standort zu erkennen, und wenn der Benutzer zustimmt, erhält er eine Karte mit der Richtung von seinem Standort. Jetzt habe ich es geschafft, es funktioniert aber nicht sehr gut. In der ersten Zeit, wenn der Benutzer die Erlaubnis geben muss, die Karte perfekt zu laden, aber in der zweiten Zeit, wenn die Erlaubnis bereits gegeben die Karte nicht korrekt geladen.

mein Code:

function directionMap() { 
    var position; 
    jQuery('.direction-map').colorbox({ 
    maxWidth: '100%', 
    maxHeight: '100%', 
    opacity: 0.5, 
    html: '<div id="map" style="width: 800px; height: 500px"></div>', 
    onLoad: function() { 
     var success = function(pos) { 
     var lat  = pos.coords.latitude, 
      long = pos.coords.longitude, 
      coords = {lat: lat, lng: long}; 

     var start = coords; 
     var target = {lat: 31.273257, lng: 34.797528}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: start, 
      scrollwheel: false, 
      zoom: 7 
     }); 

     var directionsDisplay = new google.maps.DirectionsRenderer({ 
      map: map 
     }); 

     // Set destination, origin and travel mode. 
     var request = { 
      destination: target, 
      origin: start, 
      travelMode: google.maps.TravelMode.DRIVING 
     }; 

     // Pass the directions request to the directions service. 
     var directionsService = new google.maps.DirectionsService(); 
     directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
      // Display the route on the map. 
      directionsDisplay.setDirections(response); 
      } 
     });  
     } 
     var error = function() { 
     alert('Can\'t find your location'); 
     } 
     if (geoPosition.init()) { 
     geoPosition.getCurrentPosition(success, error, { 
      enableHighAccuracy:true, 
      timeout: 1000 
     }); 
     } 
     return false;  
    }, 
    }); 
} 

My jsFiddle

Answer 1

fand ich die Lösung. Das Problem war, dass die Karte geladen werden sollte, nachdem die Farbbox abgeschlossen wurde, aber nur wenn die Erlaubnis für den Standort gegeben wurde. also schrieb ich es mit "onclick" -Handler und lade die colorbox in die Erfolgsvariable. Dies ist der Code:

function directionMap() { 
    document.getElementById('get_location').onclick = function() { 
    var success = function(pos) { 
     jQuery('.direction-map').colorbox({ 
     maxWidth: '100%', 
     maxHeight: '100%', 
     opacity: 0.5, 
     html: '<div id="map" style="width: 800px; height: 500px"></div>', 
     open: true, 
     onComplete: function() { 
      var lat  = pos.coords.latitude, 
       long = pos.coords.longitude, 
       coords = {lat: lat, lng: long}; 

      var start = coords; 
      var target = {lat: 31.273257, lng: 34.797528}; 

      var map = new google.maps.Map(document.getElementById('map'), { 
      center: start, 
      scrollwheel: false, 
      zoom: 7 
      }); 

      var directionsDisplay = new google.maps.DirectionsRenderer({ 
      map: map 
      }); 

      // Set destination, origin and travel mode. 
      var request = { 
      destination: target, 
      origin: start, 
      travelMode: google.maps.TravelMode.DRIVING 
      }; 

      // Pass the directions request to the directions service. 
      var directionsService = new google.maps.DirectionsService(); 
      directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       // Display the route on the map. 
       directionsDisplay.setDirections(response); 
      } 
      }); 
     } 
     }); 

    } 
    var error = function() { 
     alert('Can\'t find your location'); 
    } 

    if (geoPosition.init()) { 
     geoPosition.getCurrentPosition(success, error, { 
     enableHighAccuracy:true, 
     timeout: 1000 
     }); 
    } 
    return false; 
    } 
}