function loadGoogleMaps(listId, mapId) 
{

  var createMarker = function(map, loc)
  {
      
      var info='<div id="infoWindow">' + loc.html + '</div>';
    
      
      var point = new GLatLng(loc.lat, loc.lon);
      var marker = new GMarker(point);
      marker.title = loc.tooltip;
      GEvent.addListener(marker, "click", function() {
        marker.openInfoWindowHtml(info);
      });
      /*GEvent.addListener(marker, 'mouseover', function(latlng) {
        marker.openInfoWindow(info);
      });
      GEvent.addListener(marker, 'mouseout', function(latlng) {
        marker.closeInfoWindow();
      });*/
      loc.marker = marker;
      return marker;    
  }
  
  var createElement = function(loc)
  {
      listDiv = document.createElement('div');
      listDiv.setAttribute('id', loc.id);
      listDiv.setAttribute('class', 'haltepunkt');
      listDiv.innerHTML = loc.html;
      return listDiv;
  }

  var createLocations = function()
  {
    var locations = [
      { "id" : 1,
        "lat" : 51.360017,
        "lon" : 6.9390678,
        "html" : "<p><b>Kettwig</b><br />Promenadenweg 10<br />45219 Essen<br />ÖPNV: „Promenadenweg“<br />Bus: 142, 190, S-Bahn: S6</p>",
        "tooltip" : "Haltepunkt Kettwig", 
        "marker" : null
      },
        
      { "id" : 2,
        "lat" : 51.377837982228776,
        "lon" : 6.981132924556732,
        "html" : "<p><b>Am Staadt</b><br />Schuirweg 1<br />45239 Essen<br />ÖPNV: „Schuirweg“<br />Bus: 190</p>",
        "tooltip" : "Haltepunkt Am Staadt",
        "marker" : null
      },
        
      { "id" : 3,
        "lat" : 51.386111062520875,
        "lon" : 6.9999271631240845,
        "html" : "<p><b>Werden Brücke</b><br />Laupendahler Landstraße 1<br />45239 Essen<br />ÖPNV: „Werden S-Bf.“<br />Bus: 169, 180, 181, 190, S-Bahn: S6</p>",
        "tooltip" : "Haltepunkt Werden Brücke",
        "marker" : null
      },
        
      { "id" : 4,
        "lat" : 51.39731801428363,
        "lon" : 7.003574967384338,
        "html" : "<p><b>Wehr</b> <br />An der Schleuse Baldeney<br />Hardenbergufer 1<br />45239 Essen</p>",
        "tooltip" : "Haltepunkt Wehr",
        "marker" : null
      },
      
      { "id" : 5,
        "lat" : 51.402353219188,
        "lon" : 7.007714956998825,
        "html" : "<p><b>Hügel</b> <br />Am Regattaturm<br />Freiherr-vom-Stein-Straße 206a<br />445133 Essen<br />ÖPNV: „Hügel“<br />Bus: 181, S-Bahn: S6</p>",
        "tooltip" : "Haltepunkt Hügel",
        "marker" : null
      },
      
      { "id" : 6,
        "lat" : 51.407217212752336,
        "lon" : 7.0240455865859985,
        "html" : "<p><b>Baldeney</b> <br />Am Schloss Baldeney<br />Freiherr-vom-Stein-Straße 386a<br />45133 Essen<br />ÖPNV: „Hügel“<br />Bus: 181, S-Bahn: S6</p>",
        "tooltip" : "Haltepunkt Baldeney",
        "marker" : null
      },
      
      { "id" : 7,
        "lat" : 51.3943223984591,
        "lon" : 7.059657275676727,
        "html" : "<p><b>Heisingen</b> <br />Lanfermannfähre 90<br />45259 Essen<br />ÖPNV: „Baldeneysee“<br />Bus: 141, 145, 146, 181</p>",
        "tooltip" : "Haltepunkt Heisingen",
        "marker" : null
      },
      
      { "id" : 8,
        "lat" : 51.398455962176115,
        "lon" : 7.0487648248672485,
        "html" : "<p><b>Haus Scheppen</b> <br />Am Haus Scheppen<br />Hardenbergufer 381<br />45239 Essen</p>",
        "tooltip" : "Haltepunkt Haus Scheppen",
        "marker" : null
      },
      
      { "id" : 9,
        "lat" : 51.39169479739635,
        "lon" : 7.075790762901306,
        "html" : "<p><b>Kupferdreh</b> <br />Prinz-Friedrich-Str. 1<br />45257 Essen<br />ÖPNV: „Kupferdreh Bf.“<br />Bus: 141, 155, 171, 177, 180, S-Bahn: S9</p>",
        "tooltip" : "Haltepunkt Kupferdreh",
        "marker" : null
      }
      
    ];
    
    return locations;
  }
  
  var getLocationById = function(id)
  {
    for (var i=0; i < locations.length; i++)
    {
      if (locations[i].id == id)
      {
        return locations[i];
      }
    }
    return null;
  }
  
    
  if (GBrowserIsCompatible()) 
  {
    var map = new GMap2(document.getElementById(mapId));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    map.enableContinuousZoom();
    map.enableDoubleClickZoom();
    map.enableContinuousZoom()
    map.setCenter(new GLatLng(51.39534996699645, 7.021121978759766), 13);
    map.savePosition();
    
    var listView = document.getElementById(listId); 
    
    var locations = createLocations(); 
    
    for (var i=0; i < locations.length; i++)
    {
      var loc = locations[i];
      var marker = createMarker(map, loc)
      var listDiv = createElement(loc); 
      
      
      listDiv.onmouseover = function(evt)
      {
        jQuery(this).addClass('selected');
        var id = jQuery(this).attr('id');
        var loc = getLocationById(id);
        //loc.marker.openInfoWindow(loc.html);
        //map.setZoom(12);
        //loc.marker.getIcon().iconSize = new GSize(150,150);
        map.panTo(loc.marker.getLatLng());
      }
      listDiv.onmouseout = function(evt)
      {
        jQuery(this).removeClass('selected');
        if (!jQuery(this).hasClass('active'))
        {
          //loc.marker.closeInfoWindow();
          map.returnToSavedPosition();
        }
      }
      listDiv.onclick = function(evt)
      {
        jQuery(".haltepunkte.active").removeClass("'active'");
        jQuery(this).addClass('active');
        var id = jQuery(this).attr('id');
        var loc = getLocationById(id);
        //map.setCenter(loc.marker.getLatLng());
        map.setZoom(16);
        map.panTo(loc.marker.getLatLng());
      }
      
      
      listView.appendChild(listDiv);
      map.addOverlay(marker);
    }

  }
  
  
}