addEvent(window, 'load', initMap);
addEvent(window, 'unload', GUnload);

function initMap() {
  if (GBrowserIsCompatible()) {
    var map = new GMap2(document.getElementById("map_canvas"));
    var myPoint = new GLatLng(49.21713, 7.00792);
    var myIcon = MapIconMaker.createMarkerIcon({width: 32, height: 32, primaryColor: "#e20121", strokeColor: "#333333"});
    var myScale = 15;
    map.addControl(new GLargeMapControl3D());
    map.addControl(new GHierarchicalMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(5,6)));
    map.addControl(new GOverviewMapControl());
    map.enableScrollWheelZoom();
    map.enableContinuousZoom();
    map.setCenter(myPoint, myScale);
    
    createMarker(map, 'Yoga-Zentrum-Saar', 'gmapsBubbleContentDIV', myIcon, myPoint, true);
  }
}

function createMarker(map, locname, id, icon, markPoint, markIsCurrLoc){
    //var myMarker = new GMarker(myPoint);
    var markOpts = {};
    markOpts.icon = icon;
    markOpts.title = locname;
    var myMarker = new GMarker(markPoint, markOpts);
    var markHTMLnode = document.getElementById(id); 
    map.addOverlay(myMarker);
    function showInfoBubble() { myMarker.openInfoWindow(markHTMLnode, {maxWidth:300}); };
    //function showInfoBubble() { map.openInfoWindowHtml(markPoint, markHTMLnode); };
    // click event shows info bubble
    GEvent.addListener(myMarker, "click", showInfoBubble);
    if(markIsCurrLoc){
      // for current loc marker:  show info bubble and marker tracker
      showInfoBubble();
      var mt = new MarkerTracker(myMarker, map);
    }
}