var map;
var directionDisplay;
var directionsService;
var stepDisplay;
var infowindow = new google.maps.InfoWindow();
var markerArray = [];

    function CreateRoad(address) {
      
        if (address == '') {
            createMap(address);
        }

        //try to get the latitude and langitude for a client address
        //if google map can't find the address we create the map in the old style
        //else we create a road between client address and infonavigator.nl address
        geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                try {
                    var latlang = results[0].geometry.location.toString();
                    createMap(latlang);
                    
                } catch (err) {
                    createMap('');
                }
            } else {
                createMap('');
            }
        });
      
    }

    function initialize(address) {
        //create the road between the client and infonavigator.nl
        directionsService = new google.maps.DirectionsService();

        // Create a map and center it on leusden.
        var leusden = new google.maps.LatLng(52.131486, 5.428941);
        var myOptions = {
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            center: leusden, 
            language: 'nl' 
        }
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        // Create a renderer for directions and bind it to the map.
        var rendererOptions = {
            map: map,
            suppressMarkers: true 
        }
        directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
        for (i = 0; i < markerArray.length; i++) {
            markerArray[i].setMap(null);
        }

        // Now, clear the array itself.
        markerArray = [];
        var end = leusden.toString(); //'infonavigator,Leusden,+Utrecht';
        var start = address;

        var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING,
            optimizeWaypoints: true,
            provideRouteAlternatives: false

        };

        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                var myRoute = response.routes[0].legs[0];

                var marker = new google.maps.Marker({
                    position: myRoute.start_location,
                    map: map,
                    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|cc5500|000000'
                });

                attachInstructionText(marker,  
                    '<div style="font-family: arial,helvetica,sans-serif;font-size:10px;height:100px;">'
                    + '<h2 style="color:#2200C1; margin:0px;">Uw adres</h2><br/>'                 
                    + '<p style="width:150px;">' + myRoute.start_address + '</p>'
                    + '</div>');
                markerArray[0] = marker;

                marker = new google.maps.Marker({
                    position: myRoute.end_location,
                    map: map,
                    icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=B|cc5500|000000'
                });

                attachInstructionText(marker, 
                    '<div style="font-family: arial,helvetica,sans-serif;font-size:10px;height:120px;">'
                    + '<h2 style="margin:0px;"><a href="http://maps.google.nl/maps/place?cid=5348995456397454784&q=infonavigator+leusden&hl=nl&cd=1&cad=src:ppiwlink&ei=htiHTaCQBMG__gbx9oCyCQ" style="cursor: pointer; color:#2200C1; text-decoration:none;font-weight:bold;">Infonavigator B.V.</a></h2><br/>'                  
                    + '<p style="width:150px;">De Mulderij 4<br/>'
                    + '3831 NV Leusden<br/>'
                    + '033 4960660</p>'
                    + '<p><a href="http://www.infonavigator.nl" style="cursor: pointer; color:#0E774A;font-size:13px;text-decoration:none;">infonavigator.nl‎</a></p>' 
                    + '</div>');
                // markersArray.push(marker);myRoute.end_address
                markerArray[1] = marker;
            }            
        });
    }

    function attachInstructionText(marker, text) {
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.setContent(text);
            infowindow.open(map, marker);
        });
    }

    function createMap(address) {
        var parrent = document.getElementById('mapaddrress')        
        if (address == '') {
            parrent.innerHTML = '<div id="map_canvas_default" style="width:500px;height:400px;"><iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.nl/maps?f=q&amp;source=s_q&amp;hl=nl&amp;geocode=&amp;q=Infonavigator+B.V.,+De+Mulderij,+Leusden,+NL&amp;aq=&amp;sll=52.469397,5.509644&amp;sspn=4.129706,11.634521&amp;ie=UTF8&amp;hq=infonavigator+bv&amp;hnear=De+Mulderij,+Leusden,+Utrecht&amp;ll=52.132948,5.428791&amp;spn=0.00461,0.00912&amp;z=16&amp;iwloc=A&amp;output=embed"></iframe></div>';
        }
        else {
            parrent.innerHTML = '<div id="map_canvas" style="width:500px;height:400px;"></div>';            
            initialize(address)
        }    
    }