Google Maps Api: text directions issue

I got this code that dispaly text direction of a route from a position to another (the start position is an Ip geolocation):

var lat;
var lon;
var coords;
var directionsDisplay;
var latTrun;
var lonTrun;



function naviga(a) {
    initialize();
    navigator.geolocation.getCurrentPosition(function (position) {
        lat = position.coords.latitude;
        latTrun = lat.toFixed(3);
        lon = position.coords.longitude;
        lonTrun = lon.toFixed(3);
        coords = new google.maps.LatLng(latTrun, lonTrun);
        var directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer();
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directions-panel'));
        var control = document.getElementById('control');
        control.style.display = 'block';
        map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
        var dest = document.getElementById(a).innerText;
        directionsDisplay.setMap(map);
        var request = {
            origin: coords,
            destination: dest,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
            }

        });

    });

}

and this is my inizialize function:

var geocoder;
var map;
var markers = [];

function initialize() {
    if(navigator.geolocation) {
        browserSupportFlag = true;
        navigator.geolocation.getCurrentPosition(function(position) {
            initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
            map.setCenter(initialLocation);
            }, function() {
            handleNoGeolocation(browserSupportFlag);
        });
    }
    // Browser doesn't support Geolocation
    else {
        browserSupportFlag = false;
        handleNoGeolocation(browserSupportFlag);
    }

    function handleNoGeolocation(errorFlag) {
        if (errorFlag == true) {
            alert("Geolocation service failed.");
            initialLocation = newyork;
            } else {
            alert("Your browser doesn't support geolocation. We've placed you in Siberia.");
            initialLocation = siberia;
        }
        map.setCenter(initialLocation);
    }
    geocoder = new google.maps.Geocoder();
    //var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
        mapTypeId: google.maps.MapTypeId.HYBRID,
        zoom: 14,
        navigationControlOptions:
        {
            style: google.maps.NavigationControlStyle.SMALL //sets map controls size eg. zoom
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

My question is: when i call the first time the function “naviga()” everything works really fine, it show the visual directions and the text directions, but, the second time i call the same function the debugger gives me an error an say that my variable control is ‘null’ but the first time it isn’t ‘nul’ I spent almost two days but I can’t figure out why, probably is a simple thing but it seems that I’m not able to find a solution, can anyone please help me out? The strange things is that this behavior is not showing in this example:

Displaying text directions with setPanel()

Hope that the code posted is enough to understand. If not, ask me what is needed for a better understanding. Thanks in advance to everybody.


Source: html5

Leave a Reply