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 into a website. And to do it is very, very simple!
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 insert a map into a website
So, to insert a map into 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 carry out 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 slide-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 tick it, but immediately click on the blue link "Classic interface" just below.
After that, you will be taken to the classic Google Maps interface, where there is everything we need to place the map on the site page.
3. Now enter the required address in the address field. 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 embed code into our web page, as well as set some settings.
In order to get the embed code, we need to click on the icon to get the link or the code (it is located to the right of the icon with the printer).
5. Here we are interested in the HTML code to add 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, that is, its height and width. You can also set a frame for the map. By default, the border value is zero, but you can change this by putting, for example, one.
If you need, then change these parameters, although you can do it from the code of the web page. If not necessary, then just copy all the code.
6. Now all that remains is to paste the copied code into 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 later style through the stylesheet file.
I'll insert my card right here. See how it will look.
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 window with your address will be displayed above the marker. And below there will be a link to view the map on a larger scale.
That's it, everything is very simple, functional and convenient.
Use it to your health!
I would be glad if this lesson is useful to you. As a thank you, leave your comments and share the article using the social media buttons located just below.
Also subscribe to the blog update if you are not subscribed yet. I promise you a lot of useful materials.
Anna Kotelnikova was with you.
I wish you success and see you soon.
Today, offline business is not interested in a sign, but in blocks with information about the institution on the right side of the Google and Yandex search results. Let's talk about how to add company data to cards.
How to add a business to Google Maps
You need to create a page in the service Google My Business.
What does it do? First of all, the possibilities:
- inform users about prices, opening hours, events and news of the organization;
- monitor reviews and respond quickly to them;
- analyze views of business information (number of views of company data, views of photos, videos);
- attach maps with a route to the organization;
- build reputation through user ratings.
Google My Business block in search results
Algorithm for adding a company.
If you do not receive a letter within 3-4 weeks, feel free to write to technical support: “The letter did not come, what should I do?”. Google will prompt you to go through a manual verification process.
To do this, you will need to send several photos:
9. After that, you will be taken to your company's personal account:
On the "Information" page, you must provide the most complete information about your company:
- add additional categories that correspond to your activity;
- add a description of your company;
- specify hours of operation;
- methods of payment for goods and services;
- add photos and videos;
- as well as additional information.
In the description of the company, try to write as accurately as possible what exactly your business is: what products or services you offer.
The more complete and high-quality information about your company is presented, the more likely it is that Google users will see it.
If you are making a website for a company or any service providing services, you cannot avoid adding a map with the location of this company or service to the site.
There are at least three providers providing this opportunity: Yandex, Google and 2GIS.
Here we will consider adding a Yandex card and this is perhaps the simplest, fastest, and also completely free way. It should be noted that this service works through an API and requires javascript enabled on the site user.
Moreover, this instruction is suitable not only for WordPress, but for any site (even for “bare” html), since the embed code is universal.
Add a Yandex map to the site
1. First, you need to create a map. To do this, follow the link to the constructor page - https://tech.yandex.ru/maps/tools/constructor/. To work in the constructor, you must have a Yandex account. Yandex has a single account for all services: mail, webmaster, money, etc. If you don't have one yet, you need to register.
2. We indicate in the search bar (highlighted in red in the figure) the address you need (region, city, street, house). We receive a map with a mark and coordinates of the address you need.
3. If necessary, you can make additional settings: change the color and location of the marker, scale, display type (diagram, satellite, hybrid), etc.
4. Then we indicate the name and press the button “Save and get the code” at the bottom of the screen.
5. After that, a code will appear that you need to insert into your site in the place where the map should be displayed.
If you add code to a page in the WordPress admin panel, then first switch the page editing mode to “Text”.
After adding the code, the map you have built will begin to be reflected on the site automatically.
The display size is determined by the width and height parameters. If necessary, you can change these values in the resulting code. To make the Yandex map stretch to the full width of the screen, specify the value width = -1.
In this article, we will consider installation of Yandex maps without using a plugin, so this is suitable for both a regular site and a site created on the WordPress engine. Read how to add Google maps.
Yandex maps (Yandex maps) Is a great tool that will allow you to report the location of an office, warehouse or store. By placing a sled on the Yandex website with a detailed route map, you can be sure that the client will not get lost.
If you are the owner of an online store, you can equip the order form with a card that will allow you to indicate your location to the client, which will significantly save waiting time. And the courier will be grateful.
Yandex maps contains metro maps and traffic jams, which will avoid a number of inconveniences and save time.
If we present Yandex and Google maps for comparison (adding Google maps to the site), then my preference will be given to the Yandex maps service, since it offers more opportunities for the user. Not to mention the fact that Yandex maps have the best detail, as well as a people's map, which is edited by the users themselves using satellite images.
Perhaps, we will finish with the prelude, as they say: "It's better to see once ...".
Installing (adding) Yandex maps to your website
Before as install Yandex map on your website, it must be created. This can be done in the map constructor:
Resize the map by dragging the handles. It will allow you to visually determine how the map installed on the site will look. To help layout designers, the height and width in pixels are displayed under the map.
Copy the code:
This map code can be easily inserted into a WordPress widget of arbitrary text or html-code:
The selections are height and width, so you can change them without having to go back to the map design page.
You can also paste the map code into a WordPress post or page. The only point is that you need to insert in the html editor, not in the visual one.
Result of work:
For creation, the api key was used earlier. Its use is not required at this time. However, you should read some of Yandex's recommendations:
The Yandex maps api for developers has a wide range of functions that can be built into your site and significantly improve the functionality of maps:
It is also possible to determine the user's location and much more.
Code examples for these and other maps can be viewed in the Yandex api sandbox:
One of the examples (routing and cost) is embedded on my site. Select 2 points on the map, then click on the starting point, a pop-up window will show the shipping cost.
(a good thing), today we will talk again about the service from Yandex and again about cards, just not about plastic and not about playing cards, but about maps of the area. Consider a map constructor from Yandex with which you can make, for example, a route map to your office and post it on your website. The article provides detailed instructions for setting up the Yandex Maps service for the contact page of a personal site.
The ability to help clients get to the right place is a significant contribution to business development, the more people get where they need to, the higher the income and profit will be. So, if your business is somehow tied to objects on the ground, then it is imperative to insert a good map on the site.
Why do you need an interactive map
- Convenient for the client - it is easy to plan a route taking into account all relevant changes, since Yandex quickly enters data on repairs and new developments on its maps.
- Convenient for the site owner - all adjustments are made to the map automatically, it is enough to insert the map into the site once, then updates are downloaded from the Yandex database themselves.
- Raises the authority and level of trust in the organization. Although such a gimmick can be made by any sharazh-montage office, on a subconscious level, a site with an interactive map is perceived better.
In the old days, office addresses, routes of passage and travel, various interesting objects, etc. marked on the pictures depicting the map, and posted on the site with a regular jpg or png file. The problem was that they could not take into account temporary repairs, traffic jams or other changes in the terrain, they did not have the opportunity to suggest individual routes from different directions.
With the development of Internet services such as Yandex Maps and Google Maps, it became possible to make maps live - interactive. You can turn these in different directions, change the scale, set routes from different points, plan your movement taking into account traffic jams and much more.
Nowadays, having a convenient driving directions on the contact page is a rule of good form for any company.
And in order to help you make your web resource more friendly to people, I will tell you how to add a Yandex map to the site, this is done very easily using a special constructor (no more difficult than).
Yandex map constructor
If you do not have a Yandex account, then you will need to create one, since without this you will not be able to design anything, the service will ask you to log in or register. You don't need to be intimidated, registration is creating a mailbox on Yandex. Even if you do not need it to work with e-mail, it will come in handy for other search engine services, for example, for Yandex Metrics or Yandex Webmaster.
The procedure starts from this page - tech.yandex.ru/maps/tools/constructor/
Since you are reading this article, it means that you are logging in for the first time and you do not have any previously saved cards, it remains to select the left yellow button “Create a new card”. From this moment, the formation of individual map settings for the desired area begins.
The trick is that you can insert not just a Yandex map with the exact address, but a map with any number of objects highlighted with different markers and colors - objects, points, routes.
All settings are made in the visual designer, no codes will have to be edited, the adaptation work differs little from the usual use of Yandex maps by the user. Let's start by adding objects.
Adding objects
The first tool is the search form at the top of the map. With its help, we can find the desired point by address, coordinates or name. Enter the request data in the field, an example with the address "Moscow, Red Square":
After pressing the button find on the terrain, a point will appear corresponding to the location of the specified object. Many objects can be inserted. An example with the Kremlin:
Each point can be configured so that it differs from other objects and is easily distinguishable on the map - the color and shape change, and you can also add a unique icon inside by clicking on the "Content" drop-down menu. This is convenient if there are many objects on the map being created and they can be classified into different groups.
The list of all addresses marked on the map is filled on the left.
Changing the scale and position
Using the "+" and "-" keys located in the upper left of the layout, the optimal scale is set. A complete map of Russia is not needed to move around the center of Moscow and, if you indicate a point object in a city, it is better to adjust the scale at a level where the names of streets and surrounding houses are distinguishable.
To move the map in different directions, you need to grab it by pressing the left mouse button and move it where you want.
Object outlines (polygons) and lines
If it is necessary to select the outlines of any element on the maps, when the point is not enough, use the "Polygons" tool. By setting one point after another, we get a perimeter filled with a certain color inside.
There can be as many points as you like, therefore, the shape painted on the map allows any degree of complexity. You can complete the construction of the contour by clicking on the last set point or by switching to any other button of the constructor (for example, on a line). I marked the contours of the Moscow Kremlin along its wall:
The lines are drawn with the "Lines" button. All actions are similar to the previous tool, only the space between the points is not painted over. With the help of lines on Yandex map, you can draw routes of movement (passage, passage).
In this way, you can show the optimal route of sightseeing.
Confirm the end point by clicking it again, there will be a menu "Delete" / "Finish". After choosing the end, a field for caption to the end point and setting the line parameters (thickness, color, transparency) opens.
We complete the route by clicking on "Finish".
Map view and traffic jams
The final touch that allows you to give the card special properties is the imposition of traffic jams, there is a separate button for this. Honestly, I doubt that such an option will often be in demand for maps inserted into the site, since people use navigators more often than built-in maps to get around by car.
But switching modes between circuit, satellite and hybrid can come in handy.
A satellite view gives the surrounding objects their real appearance and it is easier to recognize them on such a map than schematic rectangles of a diagram.
Title and Description
In order for us to be able to return to the created map in the future to correct it or to re-obtain the embed code, we need to come up with a name and description for it, and then save it.
Card code to be inserted into the site
Our map is already ready and now we need to get its code to embed it on the site, Yandex makes it possible to do:
- an interactive map (which I talked about from the very beginning);
- static - an ordinary picture, only with a tricky code, nothing can be moved in it, in addition, the maximum number of objects is limited;
- printed - high quality image file, not all countries are supported, mainly the CIS and Turkey, satellite and hybrid versions are not supported.
The choice between them will be displayed immediately after saving.
The final size in pixels is set in the same menu. You can set it manually or by moving the corners around the selected area on the right. The "Stretch to width" checkbox forces the map to occupy all the space on the site, resting on the edges of the block where it is displayed.
At this stage, it is possible to return to editing the map; in the upper left part of the window there is a corresponding inscription with an arrow.
The final code appears after clicking on the "Get card code" button, mine looks like this:
When you select a printed map, the choice of the file format - png or jpg, will be added, and the code, accordingly, will not be - the download button will appear instead. Such a file can also be inserted on the site, only you will need to upload it to the hosting and, if your site does not have a visual editor, you will need to write out the image in HTML tags (src)
How to insert a Yandex map into a website
We received the code, now we need to transfer it to our web resource. Any place is suitable for placement, the main thing is that the dimensions fit. If you use constructors or visual editors, do not forget to switch them to text (HTML) mode when pasting the code. Like this:
The map I made
Here's what I got after all the settings I made:
This element is convenient for everyone - and the necessary objects are highlighted and the scale is selected as expected. In addition, the Yandex service allows the user to determine their location (arrow in the upper left corner) and create an individual route to the desired point.
The button in the upper right corner in the form of two arrows diverging in different directions allows you to expand the map in full screen. Now about plugins.
Plugins for WordPress and other CMS
Previously, it was more difficult to make maps and many used special plugins for these purposes, for example, for WordPress there was such - Yandex Maps for WordPress. Now no APIs are needed and any user with minimal knowledge will figure out how to set everything up, so I don't see any point in plugins. The above plugin confirms this - it has not been updated for more than 2 years, apparently there is no demand.
Of the relatively current ones, I found Yandex Maps API (updated 4 months ago) and Oi Yandex.Maps for WordPress (5 months ago). If you have a desire to play plugins, then you will find them in the WordPress repository by searching, and how to install plugins.
You yourself are convinced that preparing a map and placing it on your resource is much faster than reading this instruction, now each of your resources will delight its visitors with such a convenient feature.
