function initialize( ) 
 {
    var xylemPoint = new google.maps.LatLng( 42.3896671, -84.0955435 );
    var defaultCenter = xylemPoint;
    var isChanged = false;
    var isReset;
    var graphicsPath = "/graphics/";    
    // polygon opacity range: 0 to 1
    var filler = .04;
    var defaultZoom = 7;
    var arcZoom =    11;
    // *******************
    var myOptions = 
    {
       zoom: defaultZoom,
       center: xylemPoint,
       navigationControl: true,
       navigationControlOptions: 
       {
            style: google.maps.NavigationControlStyle.SMALL,
            position: google.maps.ControlPosition.RIGHT
       },
       mapTypeControl: false,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     //mapTypeId: google.maps.MapTypeId.HYBRID

    };
    
    var arcs ={
     xyl : { "name": "Xylem Furniture Studio, 16975 N. Michigan State Rd 52 Chelsea, MI 48118-9406", 
     "Status": { "code": 200, "request": "geocode" }, 
     "Placemark": [ { "id": "p1", "address": "16975 Michigan 52, Chelsea, MI 48118, USA", 
     "AddressDetails": { "Accuracy" : 8, "Country" : { "AdministrativeArea" : { "AdministrativeAreaName" : "MI", 
     "SubAdministrativeArea" : { "Locality" : { "LocalityName" : "Chelsea", 
     "PostalCode" : { "PostalCodeNumber" : "48118" }, 
     "Thoroughfare" : { "ThoroughfareName" : "16975 Michigan 52" } }, 
     "SubAdministrativeAreaName" : "Washtenaw" } }, 
     "CountryName" : "USA", "CountryNameCode" : "US" }}, 
     "ExtendedData": { "LatLonBox": { "north": 42.3918283, 
                                      "south": 42.3855331, 
                                      "east": -84.0880278, 
                                      "west": -84.0943230 } }, 
                       "Point": { "coordinates": [ -84.09554352331052, 42.38966717121956, 0 ] } } ]}
    };   

    var mapDiv = document.getElementById("mapPanel");
    mapDiv.style.width = '100%';        

    var map = new google.maps.Map(mapDiv, myOptions);
    
    
    var rendererOptions = 
    {
        suppressInfoWindows : true
    
    };
    var rightPanel = document.getElementById("rightPanel") ;
    rightPanel.style.display = 'none';


    var directionsDisplay = new google.maps.DirectionsRenderer( rendererOptions );
    directionsDisplay.setMap( map );

    directionsDisplay.setPanel(rightPanel);
    var infowindow = new google.maps.InfoWindow();
    google.maps.event.addListener(map,'click', function() { infowindow.close(  ) } ) ;
   // google.maps.event.addListener(infowindow,'closeclick', function() { infowindow.close(  ) } ) ;


    var cnt = 0;      
    // sniff for zoom/center point in order to build reset button
    google.maps.event.addListener(map, 'zoom_changed', function() { respondToChange( defaultZoom, xylemPoint ) });
    google.maps.event.addListener(map, 'center_changed', function() { respondToChange( defaultZoom, defaultCenter ) });
  
    if ( document.getElementById( 'restore' ).hasChildNodes() == false ) 
    { 
        document.getElementById( 'restore' ).appendChild( buildResetDiv( ) ); 
    }
    else
    {
        document.getElementById( 'restore' ).style.display = 'none';

    }
    if ( isChanged ) { respondToChange( defaultZoom, defaultCenter ); }
    // ** loop over arc locations to build markers
     for (eacharc in arcs )
     {   
        var arcLatLong = 
          new google.maps.LatLng( arcs[eacharc].Placemark[0].Point.coordinates[1], arcs[eacharc].Placemark[0].Point.coordinates[0] );      
        var zindex = arcs[eacharc].Placemark[0].Point.coordinates[2];
        cnt++;
    
        var marker = buildMarker( eacharc, arcLatLong, map, arcs[eacharc].name, zindex, infowindow, rightPanel );
       // infowindow.open(marker);  

    }


    // ### FIN ###############################################################################################################
    
    // ##########################################################
    //#     Functions                                           #
    // ##########################################################
    function respondToChange( defaultZoom, defaultCenter )
    {
        var currentZoom = map.getZoom();
        var currentCenter = map.getCenter();         
        // outline opacity to zero
        //filler = 0;         
        if ( ! isReset ) 
        {
            if (( defaultZoom != currentZoom ) || (  defaultCenter != currentCenter ))
            {
                var restoreDiv = document.getElementById( 'restore' );
                restoreDiv.style.display = 'block';
                isReset = true;
            }
        }
    }
    // ********************
    function buildMarker( orgcode, ll, map, name, zindex, infowindow, rightPanel )
    {
        var thisMarker = new google.maps.Marker(
        {
            position: ll, 
            map: map, 
            title: name ,
            zIndex: zindex,
            icon: graphicsPath + "arcIcon.png",
            id: orgcode
        });

       // arcSpan2.innerHTML = 'Zoom in ⊕';        
                
        google.maps.event.addListener( thisMarker, 'click', function() 
        { 
            doWindow( map, thisMarker, infowindow );
        } ) ; 
        doWindow( map, thisMarker, infowindow );

    return thisMarker;
    }
    // ********************

    function directionsError()
    {
        var okform = document.createElement( "form" );
        okform.setAttribute( "action", "" );
        okform.onsubmit = function(){ initialize(); return false;} ;
        var errDiv = document.createElement( "div" );        
        okform.innerHTML = '<fieldset class="return"><input type="submit" value="Ok" /></fieldset>';
        errDiv.innerHTML = 'Sorry, we\'re unable to process the request.';
        errDiv.appendChild( okform);
        rightPanel.appendChild( errDiv );       
    }
    // ********************
    function doWindow( map, thisMarker, infowindow )
     {
              
       for ( org in arcs )
       {
         var arcLatLong = 
           new google.maps.LatLng( arcs[org].Placemark[0].Point.coordinates[1], arcs[org].Placemark[0].Point.coordinates[0] );
         
         // compare by coordinates or by org id     
         if (thisMarker.id == org )
         {
            var dirform = document.createElement( "form" );
            dirform.setAttribute( "action", "" );
            dirform.onsubmit = function() 
            { 
                if ( ! document.getElementById("from").value.length ) { return false; };
                getDirections( document.getElementById("from").value, document.getElementById("dest").value ) ; 
                return false; 
            };
            // Directions destination below gets more sensible results from a postal 
            // address string than from LL coordinates.
            dirform.innerHTML = 
              '<fieldset>'
              + '<legend>Get directions:</legend>'
              + '<label for="from">Starting location: </label>'
              + '<input type="text" id="from" />'
              + '<input type="hidden" id="dest" value="' + arcLatLong +'" />'
             // + '<input type="hidden" id="dest" value="' + arcs[org].name  +'" />'
              
              + '<input type="submit" value=" Get \'em" />'
              + '</fieldset>';
            // **********************  
            
            // truncate at the first comma
            var shortname = getShortName( arcs[org].name );               
            var winContent = document.createElement( "div" );
            winContent.className = 'infocontent';
            var titleSpan = document.createElement( "span" );
            titleSpan.className = 'infotitle'
            titleSpan.innerHTML =  shortname ;
            winContent.appendChild(  titleSpan );
            winContent.appendChild( dirform);            
            infowindow.setContent(  winContent );
            infowindow.setPosition( arcLatLong );
            infowindow.open(map,thisMarker);  
            break;
         }
       }
     }
 
    function getShortName( name )
    {
        // truncate at the first comma
        var shortname = name.replace( /^([^,]*),.*$/, "$1" );
        return shortname;
    }
    
    // **********************
    function getDirections( start, end )
    {
    rightPanel.innerHTML = '';
    infowindow.close( );
    var directionDisplay;
    var directionsService = new google.maps.DirectionsService();  
    var dirsRequest = 
    {
        origin: start,
        //waypoints: [{ location: "Madison WI", stopover: false }],
        destination: end,
        // waypoints: [],
        travelMode: google.maps.DirectionsTravelMode.DRIVING,
        unitSystem: google.maps.DirectionsUnitSystem.IMPERIAL
    }
    // Route the directions and pass the response to a
    // function to create markers for each step.
    directionsService.route( dirsRequest, function( response, status ) 
    {
        mapDiv.style.width = '70%';  
        rightPanel.style.display = 'block';

        if ( status == google.maps.DirectionsStatus.OK ) 
        {
            var restoreDiv = document.getElementById( 'restore' );
            restoreDiv.style.display = 'block';
            directionsDisplay.setDirections( response );            
        }
        else 
        {
            directionsError();
        }
      })  
    }
     // *******************
    function buildResetDiv(  )
    {
//         var resetForm = document.createElement( "form" );
//         resetForm.setAttribute( "action", "" );
//         resetForm.setAttribute( "id", "resetForm" );
//         
//         resetForm.onsubmit = function(){ initialize(); return false; } ;
//         var resetDiv = document.createElement( "div" );  
//         resetDiv.setAttribute( "id", "resetDiv" );
//         resetForm.innerHTML = '<fieldset class="return"><input type="submit" value="Return" /></fieldset>';
//         resetDiv.innerHTML = 'Return to map overview:';
//         resetDiv.appendChild( resetForm);
//         //resetDiv.style.display = 'none';
//         return resetDiv;

        var resetForm = document.createElement( "form" );
        resetForm.setAttribute( "action", "" );
        resetForm.setAttribute( "id", "resetForm" );
        var radioInput = document.createElement('input'); radioInput.setAttribute('type' , 'radio');
        resetForm.onsubmit = function(){ return false; } ;
        
        radioInput.onclick = function(){ initialize(); return false; } ;
        var resetDiv = document.createElement( "div" );  
        resetDiv.setAttribute( "id", "resetDiv" );
       // resetForm.innerHTML = '<fieldset class="return"><input type="submit" value="Return" /></fieldset>';
        resetDiv.innerHTML = 'Return to map overview:';
        resetForm.appendChild( radioInput);
        resetDiv.appendChild( resetForm);
        //resetDiv.style.display = 'none';
        return resetDiv;

    } 

    // *******************

// ## 
}