How to insert the Yandex map on the site? Instructions how to place the Yandex map on the site

Let's look at how to insert a Yandex card into the site, first creating it in the designer. The insertion process can be incredibly easy, or it can carry some complexity, depending on the scale of your project.

How to insert Yandex map on the site: the choice is obvious

If you create a business card site, a blog or an uncomplicated online store, then you will Enough basic capabilities of the existing designer. In this case, insert a Yandex card into the site due to a special code will be able to the user who does not have special knowledge. If you approach the matter with all the thoroughness, the correct drawing up of the scheme of travel, or the calculation of the price of delivery at the destination specified by the user can significantly improve the functionality of the site and make the visitor a new buyer.

Otherwise, if you need to go beyond the boundaries of the designer, do not just place the Yandex map on the site, but create something grand and unique. In this case, you will need an experienced programmer who is familiar with the work of JavaScripts.

Hidden features

Yandex.Mark API allows you to overlay a layer with traffic jams on your own site, But to implement such an idea of the designer's capabilities is not enough. In addition to saving the maps you have created, the API designer now does not require getting a key for your own site, however some CMS extensions can ask for these keys.

To receive such tool it is possible in a special section of a site, having entered the address of your resource. However, let's return to the question of how to insert Yandex map into the site and to the designer. Everything necessary is here.

Organization of the designer

The tools that you can use to place tags on the map are on the top panel, and they consist of 4 buttons. The first one makes it possible to put a label in the form of a large comma, it can be colored with different colors, given a description, and also assigned a number. The label is set by activating this button, as well as clicking on the desired area in the diagram.

The designation can always be moved by holding the left mouse button, or delete. Before you insert a Yandex card, take advantage of the capabilities of other tools. Further attention deserves the possibility of "Drawing lines." It is useful for showing the way to the office of your company from the metro station or stopping the transport.

Draw a polygon

The constructor includes another important tool, which received the name "Drawing

Polygon ". It is necessary to highlight those objects or buildings that you wish to mark on the route map, using the background fill, they will also be guided by the routes described above.

You need to activate the tool and systematically designate the entire object at the corners, then click on the node and finally select the "Finish" function. As a result, a form appears, and you can set the thickness for the stroke line, the transparency of the fill, the color, and enter a description.

The last button, placed on the toolbar, allows you to make markers active in the lower right corner of the diagram in order to change its size. In addition, at your service a choice of a way of display from 4 variants: national, the companion, a hybrid, the circuit; The form of entering the exact place that needs to be created; Tool for zooming.

About maps and codes

After all the above is done, you will still have to give the scheme a name, and also press the button offering saving and getting the code. There is a code for inserting maps into a site of two kinds. The first option is an interactive map.

Such code is inserted as a script call, it can cause difficulties for beginners, but visitors to your site will be able to choose the display option, navigate the map, zoom. The map can be perfectly adjusted to the size of your page, changing the corresponding figures at the end of the code.

The second option, a static map, is the usual command of inserting a picture into a site. When you install it there will be no problems, but the scheme will be an ordinary picture that can not be scaled and moved.

In Wordpress, you can insert the map code directly if you use the Html editor while writing and editing publications. On the article editing page, click on the "Screen Settings" function, which is located in the upper right corner, tick the "Custom fields" box. After that, under the article there will be a similar area where you need to click on the "Enter new" and specify the short code ID (without spaces, Latin) on the left side of the form. In the right section, you need to insert the code that was received in the Yandex-card designer.

Next, open the function file called "functions.php". Add a special code, having previously created a backup copy of the site. After the specified actions in the static page or article it will be possible to add the code received from the designer of Yandex maps.

If you need to install the map directly in the skeleton of the blog, you can insert the script directly, but you need to select the WordPress theme template used to make the map available at the location you need.

Features of working with Joomla

To Joomla to insert a Yandex card, there are several options. Decide
The task can be done with the help of the component and plug-in "Yandexmap", special "Yandex cards" for Joomla, as well as the solution of "Zh YandexMap". In order to insert Yandex maps, you can use the arbitrary code module Html, but you must first disable the traditional visual editor.

You can turn it back on after the code is inserted. To add a travel map to the publication, you also need to insert the code when the visual editor is disabled or insert the content from the module responsible for the arbitrary code using the plugin named "Load Module". The module, which includes the Yandex card code, needs to be placed in the non-existent position of the template. Now you know the answer to the question of how to insert a Yandex card into the site, everything turned out to be quite simple. We hope that our tips will help you develop your website.