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) {
    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();
        var control = document.getElementById('control'); = 'block';
        var dest = document.getElementById(a).innerText;
        var request = {
            origin: coords,
            destination: dest,
            travelMode: google.maps.DirectionsTravelMode.DRIVING

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




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);
            }, function() {
    // Browser doesn't support Geolocation
    else {
        browserSupportFlag = false;

    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;
    geocoder = new google.maps.Geocoder();
    //var latlng = new google.maps.LatLng(-34.397, 150.644);
    var mapOptions = {
        mapTypeId: google.maps.MapTypeId.HYBRID,
        zoom: 14,
            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