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.492883794873364,
        "lon" : 6.858832240104675,
        "html" : "<p><b>OB-Kaisergarten</b><br />am Schloss Oberhausen<br />Konrad-Adenauer-Allee  46<br />46049 Oberhausen<br />ÖPNV: „Schloss Oberhausen“, Bus 122</p>",
        "tooltip" : "Haltepunkt OB-Kaisergarten", 
        "marker" : null
      },
        
      { "id" : 2,
        "lat" : 51.49411955967557,
        "lon" : 6.882618069648743,
        "html" : "<p><b>OB-Marina</b><br />am Centro und Sea Life<br />Zum Aquarium 2<br />46047 Oberhausen<br />ÖPNV: „Marina/Sealife“, Bus 939, NE 3</p>",
        "tooltip" : "Haltepunkt OB-Marina",
        "marker" : null
      },
      
      { "id" : 3,
        "lat" : 51.49825662301061,
        "lon" : 6.937861517071724,
        "html" : "<p><b>Bottrop/Essen-Dellwig</b><br />Essener Straße/Ecke Einbleckstraße<br />46242 Bottrop<br />ÖPNV: „Essen Kanalbrücke“, Bus-Linie 186</p>",
        "tooltip" : "Haltepunkt E-Kanalbrücke",
        "marker" : null
      },
        
      { "id" : 4,
        "lat" : 51.51356341375649,
        "lon" : 7.006737291812897,
        "html" : "<p><b>E-Zweigertbrücke</b><br />Karnaper Str. 1<br />45329 Essen<br />(Übergang Altenessener Str.)<br />ÖPNV: „Arenbergstraße“, U-Stadtbahn U11, Bus NE1</p>",
        "tooltip" : "Haltepunkt E-Zweigertbrücke",
        "marker" : null
      },
        
      { "id" : 5,
        "lat" : 51.52325385910959,
        "lon" : 7.03723669052124,
        "html" : "<p><b>GE-Nordsternpark</b> <br />Wallstraße 52<br />45899  Gelsenkirchen<br />(geradeaus auf Parkplatz)<br />ÖPNV: „Krokuswinkel “, Bus 383, CE56</p>",
        "tooltip" : "Haltepunkt GE-Nordsternpark",
        "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.509062981334914, 6.946535110473633), 12);
    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);
        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);
    }

  }
  
  
}