Hello, I would like to start this article with a small note.

Those who are fond of not only developing, but also promoting websites know that the requirements for sites are growing every year, search engines are trying to weed out junk pages and keep them as relevant as possible. So looking through the latest conferences on the promotion of commercial sites, I noticed one fact that is similar in all cases - this is the design of the contact page. Gone are the days when this page contained only a few phone numbers and a form feedback. Now you need to provide contact information as informative as possible. In this case, you simply cannot do without a dynamic map of the location of your office. It has become an integral part of any commercial website contact page.

Yandex provided the developer with their own solution in this direction - namely the "Yandex Map Constructor", which allows webmasters to easily add any map to their site.

So, now let's go directly to the actions.

1.) First, go to the map constructor itself - http://api.yandex.ru/maps/tools/constructor/.

You will see a map and a field where you can enter the address you need.

You can create a location map, even without authorization in Yandex.

2.) Enter the address you need, after which you will see a hint with the full name of the street, city and house number.

3.) After selecting the address, you can specify a description for the tag, as well as choose its color. After the settings, click the "Ok" button. And we go down the page.

5.) Copy the provided code and paste it in the right place on the site.

A few notes

— this method inserting a Yandex map into a site is suitable for any CMS: Joomla, Opencart, WordPress and others.

- often, visual editor, for example in joomla, cuts the code. So it is desirable to work with the contact page without an editor. Or insert a map on the site after all visual edits.

Copy the generated map code to text file, and when editing the contact page, if the code is distorted, you can always restore it.

That's all for today, in the following articles I will continue to post cheat sheets on technical work with sites.

If you want to add a Google or Yandex map with your own labels to your site, we will tell you how to do it.

I think I will be right if I say that the development of modern web technologies is largely due to the spread mobile platforms(primarily Android and iOS). Starting with a global, for example, total transition of most web resources to adaptive layout, and ending with little things, like clickable phone numbers that you can dial with one touch.

But even little things play, sometimes, very great importance. Let's take a situation. There are, for example, two sites that offer to buy something cheap. The real representations of both sites are located in the same city (say, in Moscow). Addresses of representative offices are indicated both there and there. But on the first site, the address is simply written somewhere in the basement, and on the second, it is visually designed as a map, on which the user can click and immediately get the coordinates ... Question for connoisseurs: "Where will sales be higher"? :)

Modern online maps ideally solve any tasks in which you need to show the user specific places and give information about them. brief reference. Therefore, if you are the owner of a site that represents a real business, then you should definitely pay attention to the technology that we will talk about in today's article.

Card Insertion Methods

Technically, inserting a map on a website comes down to adding a frame to the page that displays the desired piece of terrain directly from a mapping service (usually Google or Yandex). That is, we simply make a kind of "hole" in the web page with a card under it (by the way, a video from YouTube is inserted in the same way, for example).

The situation with adding your own labels looks much more confusing. So, for example, earlier Google allowed making tags in the form of red beacons and providing them with a description right on the main service. Then this possibility was realized using the JavaScript API. But since last year, the API has become paid and the only official way to add a Google map with your notes to the site has become the service " My cards ".

Yandex, in this regard, is initially much more convenient. It provides not only a full-fledged API, but also a ready-made web interface ("Map Constructor") for visual work with it without knowledge of JavaScript (in fact, an analogue of "My Maps")!

In addition to, in fact, Google and Yandex, there are a number of other services that allow you to put your marks on maps. We will also talk about them, but in less detail. And now let's focus on what the main giants of cartography allow us to do.

Your tags on Google maps

By the way, such a map is suitable for obtaining coordinates by a navigator, however, an ordinary person is unlikely to understand where to go, since Right place not visually marked. To make good informative labels on Google maps, you need to have Google account and use them official service "My cards ".

This service allows the user to perform the following actions:

• add tags with descriptions and photos;
• lay routes with the ability to measure the distance between its points;
• draw arbitrary lines with the ability to measure the distance and area of ​​the closed figures formed by them.

On the start page service contains a list of maps you created earlier (may be empty) and a button "Create new card" . Let's start work with it. After clicking, a familiar Google map with slightly unusual controls will open in front of you. Let's consider them carefully:

At the top of the workspace are toolbars that allow you to add your own marks to the map. On the left side is a large layer control panel. This panel resembles the one in graphic editors. You can place an unlimited number of elements on one layer, however, if you need to hide one of them, you only have to delete it. If you initially add each element to its own layer, then to hide it, it will be enough just to turn off its visibility.

It is also worth paying attention to the small button "Base Map" on the sidebar. with its help you can change the style of the map itself (I, for example, prefer the "Satellite" style).

To set a marker, select the desired area on the map and the scale at which we will work, after which we activate the "Add Marker" tool and click at the point to be marked. A small marker will appear and above it a pop-up box with two text input fields: the name of the marker and short description:

After saving the entered primary data, your label will be added to the current active layer and you will have several new options for setting it up. First, in the sidebar, above the label itself, there will be a section "Individual style". By clicking on it, you can select the signature that will be displayed next to the marker. The name of the tag or its description shortened to one line can act as a signature.

Secondly, new tools will also appear in the pop-up window above the added marker. In addition to editing the description, you can change appearance the marker itself by selecting one of the standard icons or even by uploading any of your photos (button "More" - "Custom icon"). Also, using a special button, you can upload your photos for display in the description panel. And finally, it is possible to create a route between the point you added and another destination using the penultimate button. As a result, you can get something like this:

I would like to dwell a little on the issue of optimizing the resulting code:

The fact is that by default the frame you insert with the map has clearly defined dimensions. Today, it is important to do wherever possible, adaptive layout, which automatically adjusts to the screen size. According to HTML standards, the width and height cannot be specified for the frame as a percentage, so it is better to remove these parameters in the code altogether, replacing them with some CSS class, and set the dimensions using CSS or inline styles:

Option 1. With a class (more correct)

Google-map (width:100%; height:480px;)

Option 2: Inline Styles

This is how you can get a beautiful functional and validly inserted Google adaptive map on the site:

Own marks on Yandex maps

Yandex, as mentioned above, initially had more options for editing maps. Firstly, the "People's Map" service still exists and develops, where everyone can make their own notes on a common map. Secondly, there is a full-fledged JavaScript API that allows webmasters to maximally customize the appearance of the map and labels on it. And thirdly, for those who are not familiar with JavaScript, there is a visual service "Map Constructor" that implements most of the API's features! Let's take a look at it:

As in "My Maps", the interface here is divided into a sidebar, which displays a list of tags you added and map settings, as well as function keys at the top, with which you can add your own tags to the map. Opportunities here, however, are smaller. We can only add standard markers (moreover, if in the form of icons, then only without signatures), draw lines (analogous to laying a route) and polygons. The only innovation that Google did not have is the ability to display traffic jams. But this is true only for large cities.

The algorithm of actions here is the same as in "My cards". We find the section of the map we need, activate the tool "Marks" and add a marker in the right place by clicking. In the pop-up window that appears, you can set the color of the marker, its type ("comma" or "dot"), and also embellish it a little by adding text or a custom icon (but in this case, the signature text will not be visible). In addition to the signature, which will be visible to the right of the label, you can add a short description that will be displayed when you click on the marker.

After adding labels, you can link them with a similarity to the route. To do this, activate the tool "Lines" and draw the reference points of the future route. To complete it at the last point, click again and select "To complete". Oddly enough, this feature has a couple of advantages over Google routes. Firstly, you can lay lines even where there are no roads, which allows you to lay a pedestrian path more accurately, and secondly, the length of the finished line is displayed on the sidebar, which is also very convenient.

Basically, that's all. To get the card code with your marks, click on the button "Save and Continue" (side panel below) and in the window that opens, adjust the size of the visible part of the map. For adaptability, I recommend activating the option "Stretch to Width", after which it will be enough to press the button "Get card code":

Unlike Google, Yandex gives the map not in the form of a frame, but in the form of a script, which is similarly inserted in the right place on the page of your site. If you understand JavaScript, then by slightly rewriting the script, you can significantly improve the appearance of the map by replacing the placemark icons and adding pictures to the description (instruction or ). But, in principle, everything looks pretty decent without it:

Other online maps

Google and Yandex are definitely the favorites in our country. However, abroad there are a number of worthy services that use the same Google maps or their own and allow you to apply not only your marks, but also create full-fledged route presentations! I will briefly describe some of them.

Open Street Map (OSM)

Cards OpenStreetMap more like maps of the area. There is no detailed rendering of the landscape and houses, but, nevertheless, these are the only online maps that are completely created by real people and that you can edit yourself. Due to the activity of users, OSM maps in some places on the planet display even more accurate information than Google maps (although this is far from everywhere)!

As for the possibilities, here we can set labels with descriptions and draw routes. Moreover, if you have a GPS tracker, then the route data can be exported to the map directly from it. OpenStreetMap maps also have an advanced editing mode. In this mode, Bing maps are displayed as the basis and you can make any notes on them, draw lines and shapes, similar to Google's "My Maps". All saved edits will go to common card, so be careful when making any changes so as not to mislead other users with deliberately incorrect information!

ScribbleMaps

If you are not afraid of the English-language interface and want to get a map with labels in the style of early Google maps (with pop-up windows with descriptions, pictures and even videos on click), then you may like the service ScribbleMaps:

This service allows you to use maps of most popular resources (including Google and OSM) as a substrate, and already set numerous marks, shapes, routes, and even just images or text labels on top of them. In short, if you need to map as much of your own information as possible, then ScribbleMaps should help you with this.

However, it should be noted that this service has a number of negative aspects. Part of the functionality is available only on a paid basis for the so-called VIP users. But, in principle, to insert labels and pictures, you do not need to be any "VIP". And even more - you can create a map and get a code to embed it on the site even without registration! Here is such a contradiction :)

AniMaps

If you suddenly want to show your visitors not just a place on the map, but clearly demonstrate the path to it, then the service can help you with this. AniMaps:

AniMaps allows you to add to standard card Google route and display certain images or text explanations along its course. You set the speed of movement along a given route yourself using the time slider above the map. The result of your work will be an automatic presentation of the route with "stops" at the places you marked.

You can create routes without registration, but only registered users can get the code to embed on the site.

conclusions

Inserting a map on the site will not be difficult if you know everything in advance necessary services for this. At the same time, it is not necessary to be a programmer or any IT specialist in general - everything is done in a visual mode! At the end you will always get finished code, which can be simply inserted into the text on the page of your site without installing any specialized plugins.

Having at least basic knowledge in the field of web technologies, you can slightly improve the code of the received map by making it adaptive (as in the case of Google) or adding additional elements (as in Yandex). Using the means of numerous foreign online cartography services, you can surprise your users even with animation on the maps! But the more interesting your offer, the more customers it will attract;)

P.S. It is allowed to freely copy and quote this article, provided that an open active link to the source is indicated and the authorship of Ruslan Tertyshny is preserved.

Quite often, when creating a site, it becomes necessary to insert a map on it that would indicate the location of your organization. In fact, the map on the site is very convenient: first of all, for your users. They will be able to immediately, without leaving your resource, see how they can find you, what is nearby and determine how far your organization is located from their location. Not everyone knows how to insert a map on the site. And it's very, very easy to do!
In this article, I will tell and show you how, in just a few minutes, you can insert a map with the desired location on the pages of your site.

How to embed a map on a website

So, to insert a map on the site, we will use a service from Google.

1. The first thing we need to do is go to the Google Maps website.

2. Now, in order to perform all the operations we need, it is best for us to go to the "Classic Interface".

To do this, click on the question mark icon in the lower right corner of the screen.

A small pull-out menu panel will open in front of you, in which you need to select "Classic interface".

After that, another pop-up window will appear, where you will be asked to tell why you want to use the Classic interface. You can tick one of the items, or you can not check it, but immediately click on the blue link "Classic interface" just below.

After that, you will go to the classic interface google maps, where there is everything we need to place the map on the site page.

3. Now in the field for entering the address, enter the required address. Do not forget that you need to specify the country, city, street and house, that is, the full address.

As a result, you will receive your location on the map marked with a red marker.

4. Now we need to get the code to embed into our web page and also set some settings.

In order to get the embed code, we need to click on the icon to get a link or code (it is located to the right of the printer icon).

5. Here we are interested in the HTML code for adding to the website (second field).

Also in this code you can see some parameters that can be changed. These are the dimensions of the map, i.e. its height and width. You can also set a frame for the map. By default, the frame value is zero, but you can change this by setting, for example, one.

If you need to, then change these parameters, although you can do it from the code of the web page. If not necessary, then just copy the entire code.

6. Now it remains only to paste the copied code in the place of your web page where you want to see the map.

You can create a separate "div" block specifically for your map, which you can then style via a stylesheet file.

I'll paste my card right here. See what it will look like.

As a result, the user will see your location marked with a marker. He will be able to move the map, zoom in and out.

Also, a box with your address will be displayed above the marker. Below is a link to view the map on a larger scale.

So, everything is very simple, functional and convenient.

Use on health!

I will be glad if this lesson is useful for you. As a thank you, leave your comments and share the article using the buttons social networks, which are located below.

Also subscribe to blog updates if you are not already subscribed. I promise you a lot of useful materials.

Anna Kotelnikova was with you.

Good luck to you and see you again.

Lesson Materials Activity

What are goals in web analytics systems such as Yandex Metrika and Google Analytics and how to set them up?

Let's look into this issue.

If you do not have time or do not want to dive into all the features of setting up such a goal, you can entrust this work to me, I will do everything for you.

In the Yandex Metrica system, goals can be found in the Settings - Goals menu.

In Google Analytics, goals are at the presentation level, there is a menu item called Goals.

What kind of tool is this "goal" and what is it for?

When visitors go to your site, they start making the most different actions. They can start moving from one page to another, start filling out any forms on the site, click on some elements (for example, buttons, slider, images, etc.) and can follow various links, etc. d.

Depending on the purpose of your site, what you created it for, some actions that visitors take may be somehow more valuable to you than others. You can highlight them before the rest.

Depending on what kind of site you have and what you created it for, these types of actions may differ and you yourself can determine which of these actions will be more valuable actions for you.

For example, for an online store, such valuable actions can be:

Buying a product

Click on the button "Add to cart"

Click on the buy button

These actions for an online store directly affect its sales. For the main purpose for which this online store was created, but it was created to sell goods. Therefore, all actions that users take in terms of moving towards the purchase of a product will be targeted for this site.

For a news site, the tasks may be somewhat different. For example, a news site may have the goal of reaching out as quickly as possible to as many people as possible. For this, it is important that people get involved in this site, that it is interesting for them and that they want to return there.

Therefore, for a news site, such valuable actions can be the depth of browsing by visitors to the pages of the site, how deeply they browse the pages of the site and how much time they spend on it.

Web analytics systems allow you to separate these valuable actions of visitors on the site into a separate group called goals.

The fact is that in analytics reports, by default, we see such analytics indicators as Visits, Visitors, Bounces, Viewing Depth, Time on the site, but we do not see any specific actions that the user takes on the page.

In web analytics systems, by default, we cannot see clicks on some links, clicks on some areas on the page, filling out forms, etc.

All these events, which are additionally performed by the user on the page, need to be configured separately in web analytics systems and this can be done using goals so that these events can be detected and seen.

Goals is a tool that allows you to record the actions of your visitors that are important to you.

If you set them up, then the web analytics system begins to "see" these actions.

What will the customized goals on your site give you?

1) You will understand about the sources that bring people to your site who buy from you or perform some other actions. You will know where visitors come from who are targeted for your site.

Knowing the sources that work for you, you can invest there more money and attention and get more results.

2) You will be able to build visual reports that show you not only data on how many people came to your site, but also data on how many people performed this or that target action that would be important to you. Goal achievement and conversion columns appear.

3) You can build funnels for multi-stage processes.

With the help of these funnels, you can see how many and at what stage of the multi-step process visitors are weeded out. You will see a weak link and can conclude that at some stage there may be something wrong and you need to pay more attention to it.

4) By setting goals, you can filter only targeted visits in reports.

5) It is possible for people who have completed the target action on the site to advertise in systems such as Yandex Direct, Google Adwords. With the help of goals, you know that a certain group of visitors are loyal to you and they are interested in your product or service, and you can advertise only to this interested segment of people, pay less money for advertising and get more results.

Goals are a tool that shows where the money is.

Adds clarity to the process of analyzing your website statistics

I hope that I managed to convince you that goals are important for your site, especially if this site is about sales.

If you want to learn more about the goals, how it's all set up and where, go to the following videos.

With the choice of goals for the site, there can be a lot of features, controversial and rhetorical questions.

Let's try together with you to learn how to determine the events on the site for which you should, and for which you should NOT set goals.

2) Write for what events you will set goals on this site? Why did you choose these events? Why is it important?

Write, we will understand, discuss and learn together.