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

Let's look at how to insert a Yandex map onsite, having previously created it in the constructor. The insertion process can be incredibly easy, or it can carry some difficulties, 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 a simple online store, then you will be

enough basic features availableconstructor. In this case, a user who has no special knowledge will be able to insert a Yandex map onto the site thanks to a special code. If we approach the matter with all thoroughness, the correct preparation of a location map, or the calculation of the price of delivery to a destination specified by the user, can significantly improve the functionality of the site and make the visitor a new buyer.

It is different if you need to go beyondthe verge of the designer, not just to place a Yandex map on the site, but to create something grand and unique. In this case, you will need an experienced programmer who is familiar with the work of Java Scripts.

Hidden features

The Yandex.Maps API allows you to overlay a layer with the indication of traffic jams on your own site,

however, for the implementation of such an ideaDesigner capabilities are not enough. In addition to saving the maps you created, the API designer now no longer needs to obtain a key for its own website, but some CMS extensions may ask for these keys.

You can get such a tool in a special section of the site by entering the address of your resource. However, let us return to the question of how to insert a Yandex map on the site and to the constructor. Everything you need is here.

Designer Organization

Tools with which you can applyLabels on the map are on the top panel, while they consist of 4 buttons. The first gives the opportunity to put a label in the form of a large comma, it can be painted in different colors, give a description, and also assign a number. The label is placed through the activation of 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 inserting the Yandex map, use the possibilities and other tools. Further noteworthy is the possibility of "drawing lines." It is useful for showing the way to the office of your company from the metro station or transport stop.

Draw a polygon

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

polygon. It is necessary to highlight with the help of the background fill those objects or buildings that you want to mark on the map, they will also lead the routes described above.

It is necessary to activate the tool and systematicallymark the whole object in the corners, then click on the nodal point, finally, select the "Finish" function. As a result, a form will appear, and in it you can set the thickness for the stroke line, the transparency of the fill, the color, and also enter a description.

Last button placed on the paneltools, allows you to make active markers in the lower right corner of the scheme in order to change its size. In addition, at your service there is a choice of a display method from 4 options: folk, satellite, hybrid, scheme; the form for entering the exact place that needs to be created; zoom tool.

About maps and codes

After all is doneAs described above, you will need to give the scheme a name, and also click the button that suggests saving and receiving the code. Provides code to insert maps on the site of two kinds. The first option is an interactive map.

This code is inserted as a script call,This may cause difficulties for newbies, but visitors to your site will be able to choose the display option, move around the map, change the scale. The card can be perfectly adjusted to the size of your page by changing the corresponding numbers at the end of the code.

The second option, a static map, representsis the usual command to insert images into the site. When installing it, there will be no problems, however, the scheme will be a regular photo that cannot be scaled or moved.

In "WordPress" insert the card code can be 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 “Arbitrary Fields” option. After that, under the article there will be a region of the same name, where you need to click on the item “Enter new” and specify the identifier for the short code (without spaces, Latin) in the left part of the form. In the right area, you need to insert the code that was obtained in the designer of Yandex maps.

Next, open the function file called"Functions.php". Add a special code, after creating a backup copy of the site. After these actions, the code received from the Yandex Map designer can be added to the static page or article.

If you need to establish a location mapdirectly into the blog frame, the script can be inserted directly, however, you need to select the WordPress theme template used so that the card is issued in the place you need.

Features of working with Joomla

To insert a Yandex map in Joomla, there are several options. Decide
the task can be done with a component and“Yandexmap” plugin, special Yandex Maps for Joomla, as well as solutions “Zh YandexMap”. In order to insert Yandex maps, you can use an arbitrary Html code module, but you must first disable the traditional visual editor.

It can be turned on again after the codewill be inserted. To add a location map to a publication, you must also insert the code with the visual editor disabled or insert content from the module responsible for the arbitrary code using a plugin called “Load Module”. The module, which includes the Yandex map code, must be placed in a non-existent template position. Now you know the answer to the question of how to insert a Yandex map on the site, everything turned out to be quite simple. We hope our tips will help you develop your site.