A geolink is a simple way to embed a link to Yandex.Maps in the text of a webpage. You can use special tags to wrap an address or business name to show on the map. The wrapped text becomes a geolink, which is highlighted on the page in a special way. When a user clicks the link, a popup window opens that contains a static map with a placemark at the specified address.
Clicking “About this location” opens the interactive Yandex.Maps page with details about the marked point. Clicking “How to get here” opens Yandex.Maps with routing enabled. The address in the geolink is automatically set as the destination address on the map, so the user just needs to enter the address to start from.
To add a geolink to a page, you need to:
Wrap the text in an HTML element with the “ymaps-geolink” CSS class:
<span class="ymaps-geolink"> Palermo, Cortile Delle Bisacce </span>
When a user clicks the geolink, a search is performed on the map for an object with this address (in the example above: “Palermo, Cortile Delle Bisacce”). If an object is found, a popup window shows the map with a placemark at this point. If no object is found, an error message is displayed.
<span class="ymaps-geolink" data-type="biz"> Paris, Starbucks </span>
You can set various parameters for a geolink (for instance, the search area). Parameters are specified in the attributes of the geolink's HTML element. The following attributes can be set:
data-type — The type of object to show on the map. Accepts one of two values: “geo” (address) or “biz” (business). If this parameter is omitted, “geo” is used by default. If there weren't any objects found for the “geo” type, the “biz” type is used. Note that you can't set both “geo” and “biz” at the same time.
data-bounds — Boundaries of the geographical area to search for the object. Boundaries are set using the coordinates of the lower-left and upper-right corners of the area. Coordinates are set in the order “latitude, longitude”. For example, [[55.729410, 37.584012], [55.738588, 37.598817]]. Set this parameter if the geolink specifies an incomplete address for the object, such as omitting the city or region (“Main street”).
data-description — A descriptive text to show in the title area of the popup window (see the image below). If this attribute is omitted, the address of the object is shown in the title. Note that the size of the text field is restricted, and only the first three lines fit inside the field. The user won't see the rest of the text.
<span class="ymaps-geolink" data-type="biz" data-description="Yandex Moscow office" data-bounds="[[55.729410, 37.584012],[55.738588, 37.598817]]"> Yandex </span>