GeoAdmin API Example

Map with overlay layers from http://api.geo.admin.ch/main/wsgi/doc/build/api/sdiapiexamples1.html#map-with-overlay-layers

HTML

<!-- Map container -->
<div id="mymap"></div>
<!-- Search box -->
<div id="mysearch"></div>
<p>Note: if the map comes up blank <a href="http://map.geo.admin.ch/?Y=499935&X=118375&zoom=8&bgLayer=ch.swisstopo.pixelkarte-farbe&lang=en" >click here</a> and reload this Fiddle. Alsoooooooo, Chrome/Webkit seems to work better.</p>
<!-- GeoAdmin API -->
<script type="text/javascript" src="http://api3.geo.admin.ch/loader.js"></script>

CSS

#mymap {
    width:500px;height:340px;border:1px solid grey;padding: 0 0 0 0;margin:10px !important;
}

#mysearch {
    height:30px;margin:10px;
}

p { width:400px; position:fixed; left:10px; font:10pt sans-serif; }

JavaScript

var geo = new GeoAdmin.API();
// Initialize the map, center on #makeopendata location
geo.createMap({
 div: "mymap",
 easting: 499858, 
 northing: 118337,
 zoom: 1
});

// Create search dialog
geo.createSwissSearchCombo({
 width: 500,
 renderTo: "mysearch",
 ref: 'geoadmin'
});

// Show a marker
geo.showMarker({
      easting: 499858,
      northing: 118337,
      iconPath: 'http://make.opendata.ch/forum/uploads/DN2MBMFGGPQX.png',
      graphicHeight: 30,
      graphicWidth: 30,
    html: '<h1>Swiss Open Data Camp</h1><br><img src="https://p.twimg.com/ApOPq-gCAAA1Tj0.jpg" width="100%" /><a href="http://make.opendata.ch">make.opendata.ch</a>'
  });