The API of map.search.ch 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
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.
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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>search.ch/map/ API Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="//search.ch/map/api/map.js"></script>
<script type="text/javascript">
//<![CDATA[
var map = new SearchChMap({ center:"Zürich" });
//]]>
</script>
</head>
<body>
<div id="mapcontainer" style="max-width:500px; height:400px; border:2px inset #ccc"></div>
</body>
</html>
View example on separate page (helloworld.html)
First we load the API script from map.search.ch. 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="//search.ch/map/api/map.js?lang=en"></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.
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:
"Bern,Marktgasse 46" or "8001,Bahnhofstrasse")[200000, 600000])[46.9491490042, 7.4368858337])"d/mu4zdnjn2")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.
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" });
}
View example on separate page (controls.html)
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.
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 })
}
View example on separate page (moveanim.html)
Valid values for the property zoom are listed in the class reference.
map.search.ch 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() {
map.showPOIGroup("restaurant,bar,cafe");
}
// Hide all public transport POIs
function hidePublicTransports() {
map.hidePOIGroup("verkehr");
}
View example on separate page (poigroups.html)
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.
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({
center:[601062,199596],
title:"Point of Interest",
html:"The mystical ghost house",
icon:"p1.png"
});
p2 = new SearchChPOI({
center:[600686,199650],
title:"Sightseeing",
html:"The famous <b>Zytglogge<\/b> tower",
icon:"p2.png"
});
p3 = new SearchChPOI({
center:[600500,199800],
title:"Draggable",
html:"Drag this POI wherever you want",
icon:"p4.png",
draggable:true
});
p1.addEventListener("popupopen", function(e){ info("POI-Box popped up!"); });
p1.addEventListener("popupclose", function(e){ info(""); });
p3.addEventListener("dragstart", function(e){ info("dragstart: " + e.mx + "," + e.my); });
p3.addEventListener("dragend", function(e){ info("dragend: " + e.mx + "," + e.my); });
map.addPOI(p1);
map.addPOI(p2);
map.addPOI(p3);
View example on separate page (dynpois.html)
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:"search.ch", html:"Office of search.ch", 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" }));
View example on separate page (centerpois.html)
The route planner of map.search.ch 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 map.search.ch.
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: form.elements.to.value, routemode:form.elements.routemode.value });
return false;
}
View example on separate page (route.html)
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').
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 (e.mx)
start = [e.mx, e.my]; // Set start first time map is ready
});
map.addEventListener("contextmenu", function(e) { // move start on right click or long press on touchscreens
if (e.mx)
poi.set({ center:(start = [e.mx, e.my]) });
});
map.addEventListener("mousemove", function(e) {
if (start && e.mx) { // Check if coordinates provided
var dx = start[0] - e.mx, dy = start[1] - e.my;
document.getElementById("info").innerHTML =
"Distanz vom Start (" + start + "): " + Math.round(Math.sqrt(dx*dx + dy*dy)) + " m";
}
});
View example on separate page (coordinates.html)
Still want to know more about the API? The class reference comes up with all the details of the API.