The API of lets you embed the interactive map of Switzerland in any website or web-based application. Using the API you can also add custom Points of Interest (POIs) to the map widget. Please read the following step-by-step introduction and learn from the examples. Advanced users will find detailed information in the class reference

First steps

The easiest way to integrate the map is to use the code generator with the link "Embed map" on the left side of the regular map. Just copy & paste the code snippet to your page. No special knowledge of JavaScript is required for this procedure.

Manual integration

This API is designed for people familiar with JavaScript and object-oriented programming concepts. Basic knowledge in HTML and CSS is required as well.

To embed the map you just need to load the API script and create an instance of the map class. The interactive map is bound to an existing container (e.g. a <div>) and adopts it's size and position within the document. The following example shows a map of 500x400 pixels centered in Zurich.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
  <title> API Example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script type="text/javascript" src="//"></script>
  <script type="text/javascript">

  var map = new SearchChMap({ center:"Zürich" });

  <div id="mapcontainer" style="max-width:500px; height:400px; border:2px inset #ccc"></div>

The example in detail

First we load the API script from The desired language can be specified using the parameter named lang. If omitted, the default language of the user's browser will be used.

<script type="text/javascript" src="//"></script>

Now we create an instance of the class SearchChMap and bind it to the container named "mapcontainer" (default name) which should be defined somewhere in the HTML body. The center of the map (Zurich) is specified as a named parameter of the constructor:

<script type="text/javascript"> var map = new SearchChMap({ center:"Zürich" }); </script>

The map will start automatically when the page is loaded. That's it. Of course there are more parameters and functions available to control the map. These are fully documented in the class reference. Some will be described in the following examples.

Geographic references

To specify the center of the map and to place custom POIs you can use one of the following ways to define a geographic position:


An easy method to embed the map in your website is to choose an example and modify the settings according to your needs. The following examples only show the relevant part of the JavaScript code. You can download the complete HTML file using the links displayed below each example.

Map showing control UI

UI elements to control the map zoom, view type or the scale can either be enabled when instantiating the map class or by using the method set() at runtime.

var map = new SearchChMap({ center:[679520, 212273], controls:"type,zoom,ruler" });

// Hide map controls except ruler
function hideControls() {
  map.set({ controls:"ruler" });

// Show all map controls
function showControls() {
  map.set({ controls:"all" });

First we create a map with controls for zoom and view type as well as the display of the current scale. The function hideControls() hides all elements except the scale and showControls() switches on all available controls.

Center of the map and movement

The center of the map can be changed at runtime using the method set(). The object method go() will smoothly move the map to the new center and optionally switch to a new zoom level.

var map = new SearchChMap({ controls:"all" });

// Set new center of the map
function gotoZuerich() {
  map.set({ center:"Zürich", zoomlevel:11 });

// Animated movement to Zürich-Seebach
function movetoSeebach() {
  map.go({ center:[683371,252535], zoomlevel:15 })

Valid values for the property zoom are listed in the class reference.

Showing Points-of-Interest provides a huge selection of POIs which are organized in several groups. Using the API you can display your own selection of POI categories or a whole group of them. The object methods showPOIGroup() and hidePOIGroup() are available to achieve this.

var map = new SearchChMap({ container:"mapwidget", center:"Zürich,Niederdorfstr.10", poigroups:"verkehr" });

// Show POI layer with restaurants, bars and cafes
function showRestaurants() {

// Hide all public transport POIs
function hidePublicTransports() {

The desired POI categories can be activated when instantiating the map class using the property poigroups as shown in the example. Any of the POI layers can be turned on and off at runtime. The complete list of POI categories and their grouping can be found in the class reference.

Add custom icons (POIs) to the map

The API is also capable to display your custom Points of Interest on the swiss map. Such icons are created as an instance of the class SearchChPOI (or a derived class) and are added to the map object using it's method addPOI().

function info(html) {
  document.getElementById("info").innerHTML = html;

var map = new SearchChMap({ center:"Bern,Kramgasse", marker:false, poigroups:"-" });

p1 = new SearchChPOI({
  title:"Point of Interest",
  html:"The mystical ghost house",
p2 = new SearchChPOI({
  html:"The famous <b>Zytglogge<\/b> tower",
p3 = new SearchChPOI({
  html:"Drag this POI wherever you want",
p1.addEventListener("popupopen",  function(e){ info("POI-Box popped up!"); });
p1.addEventListener("popupclose", function(e){ info(""); });
p3.addEventListener("dragstart",  function(e){ info("dragstart: " + + "," +; });
p3.addEventListener("dragend",    function(e){ info("dragend: "   + + "," +; });


Center map around custom icons (POIs)

If custom icons are placed on the map you can have the map automatically determine zoom level and center to show all points by not specifying center and zoom and adding centerpois:true instead.

var map = new SearchChMap({ centerpois:true, marker:false, poigroups:"-" });

// Add custom POIs, map will be centered around them
map.addPOI(new SearchChPOI({ center:"Förrlibuckstr. 62", title:"", html:"Office of", icon:"p1.png" }));
map.addPOI(new SearchChPOI({ center:"Zürich HB", title:"Zürich HB", html:"Zurich main station", icon:"p2.png" }));
map.addPOI(new SearchChPOI({ center:"Grossmünster Zürich", title:"Grossmünster", html:"Famous church in Zurich", icon:"p2.png" }));

Displaying routes

The route planner of is also avilable in the API. The route is displayed on the map and one can read informations like distance and estimated time from the map object. In order to show the route directions you currently need to link to

var map = new SearchChMap({ center:"Zürich,Förrlibuckstr. 62", type:"street" });

// Add event handler that gets the new properties after the map changed
map.addEventListener("change", function(e) {
  if (e.route && e.route != window.current_route) {  // Check if route info has changed
    var routeinfo = map.get('routeinfo');
    document.getElementById("info").innerHTML =
      "Drive: " + routeinfo.distance + ", ca. " + routeinfo.time +
      ', <a target="_top" href="' + map.getPermUrl('directions') + '">Directions<\/a>';
    document.getElementById("destination").value = map.get('from');
    window.current_route = e.route;

// handler for the form submit action
function routeFormSubmit(form)
  if (form.elements.from.value)
    map.set({ from: form.elements.from.value, to:, routemode:form.elements.routemode.value });
  return false;

Set start and destination address of a route by providing the fields from and to to the constructor or when calling set(). Once the route is loaded the event change is triggered. Calling get('routeinfo') retrieves details of the route to display them on the page. Finally link to the directions page of the current route by fetching the according URL from getPermUrl('directions').

Getting coordinates

Our API also allows you the read the current Swiss coordinates when moving the mouse or on mouse clicks within the map. These are passed to the event handler using the fields mx and my of the event object (mx=E, my=N).

var start, poi;
var map = new SearchChMap({ center:"Zürich,Rämistr.101", marker:false });
map.addPOI(poi = new SearchChPOI({ html:"Start", icon:"p1.png" }));
map.addEventListener("load", function(e) {
  if (
    start = [,];  // Set start first time map is ready
map.addEventListener("contextmenu", function(e) { // move start on right click or long press on touchscreens
  if (
    poi.set({ center:(start = [,]) });
map.addEventListener("mousemove", function(e) {
  if (start && { // Check if coordinates provided
    var dx = start[0] -, dy = start[1] -;
    document.getElementById("info").innerHTML =
      "Distanz vom Start (" + start + "): " + Math.round(Math.sqrt(dx*dx + dy*dy)) + " m";

Still want to know more about the API? The class reference comes up with all the details of the API.