Most companies are useful and even need to place an interactive map on the site so that visitors are more convenient to find you. This is especially true for large cities: your customers will be much easier to navigate if they visually see the location of the office, they will be able to think over the route and calculate the time on the road.
Add an interactive map to your site allows, for example, the world-famous Google search engine. You can do this using the free Google Maps service.
Step 1. Get the code to set Google map on the site
So, to place an interactive Google card on your website, first of all you need to get a card code with a mark of your organization. To do this, on GoogleMaps enter the address or name of the company in the search string, or manually find necessary house on the map and set the mouse click label.
When the mark on the map is installed, click on the menu icon next to the search string.
In the menu list that opens, select "Link / Code".
In the window that opens, go to the "Code" tab, select the map size and copy the proposed HTML code.
Step 2. How to Insert Card Card 2GIS to the site
So, the code is obtained, it remains only to place it on the desired page of the site. We decided to add a map to the "Contacts" section. We go to the administrator "Nubex", select the section on the control panel "Pages", Find in the list the desired section and click "Edit".
We will work with a text block. Press the button "A source"To go to code editing mode. Insert the code received on GoogleMaps into the text box and save the changes.
We go to the "Contacts" page of our site and rejoice in updates!
Thanks to Google Maps, any visitor of your site will be able to see the location of the organization, pave the route by car, on public transport Or on foot, as well as save your address in your notes.
In addition to google cards, you can also place on the site of the map from and 2gis, we will tell about them in the relevant articles.
Quite often, when creating a site, it becomes necessary to insert a card on it that would indicate the location of your organization. In fact, the card on the site is very convenient: first of all for your users. They will be able to immediately, without leaving your resource, see: how can you find that it is nearby and determine how far your organization is located from their location. Do not everyone know how to insert a map to the site. And make it very and very simple!
In this article I will tell you and show you how, literally in a few minutes, you can insert a map with the desired location on the pages of your site.
How to insert a map to the site
So, to insert a map to the site we will use the service from Google.
1. The first thing we need to do is go to the Google Card site.
2. Now, to produce all the operations you need, we are best to go to the "classic interface".
In order to do this, click on the question mark icon in the lower right corner of the screen.
You will open a small sliding menu bar in which you want to select the "Classic Interface".
After that, another popup window will appear, where you will be asked to tell why you want to use exactly the classic interface. You can mark one of the items, but you can not mark, but immediately click on the Blue link "Classic Interface" just below.
After that, you will be taken to the classic Google card interface, where there is everything you need to place the card on the site page.
3. Now in the Address input field, enter the desired address. Do not forget that you need to specify the country, the city, the street and the house, that is, the full address.
As a result, you will get your location on the map marked with a red marker.
4. Now we need to get the code to insert into our web page, as well as set some settings.
In order to get the insert code, we need to click on the icon for reference or code (it is the right icon with the printer).
5. Here we are interested in HTML code to add to the web site (second field).
Also in this code you can see some parameters that can be changed. These are the size of the card, that is, its height and width. You can also set the frame for the map. By default, the value of the frame is zero, but you can change it, putting, for example, one.
If you need, change these parameters, although you can do it from the web page code. If there is no need, then simply copy the entire code.
6. Now it remains only to insert a copied code into the place of your web page where you want to see the card.
You can create a separate block "DIV" specifically for your card, which you can in the future can be stylized through the style sheet file.
I will insert my card right here. See how it will look.
As a result, the user will see your location marker marked. He will be able to move the map, increase and reduce its scale.
Also above the marker will be displayed with your address. And at the bottom there will be a link to view the map on an enlarged scale.
So, everything is simple, functionally and convenient.
Use on health!
I will be glad if this lesson will be useful for you. Inapplication, leave your comments and share the article using the buttons. social networkswhich are located just below.
Also subscribe to the blog update if you are not yet signed. I promise you a lot of useful materials.
With you was Anna Kotelnikova.
Successes to new meetings.
Hello, this article would like to start with a small note.
Those who are interested in not only the development, but also the promotion of sites know that the requirements for sites grow every year, the search engines try to cut off the garbage pages and leave the most relevant. So looking through the latest conferences to promote commercial sites, noticed one similar in all cases the fact is to design the page of contacts. Time times were passed when this page contained only a few telephones and feedback form. Now you need to more informatively provide contact with this. In this case, you just do not do without a dynamic map location of your office. She became an integral part Any contact page of the commercial site.
Yandex provided the developer's own solution in this direction - namely the "Designer of Yandex Maps", which allows webmasters to add any card to their website without any problems.
So, now let's go directly to action.
1.) To begin with, go to the map constructor itself - http://api.yandex.ru/maps/tools/constructor/.
You will appear in front of you and the field where you can specify the address you need.
You can create a map map, even without authorization in Yandex.
2.) Enter the address you need, after which you will enlighten the hint with full name Streets, cities and rooms at home.
3.) After selecting the address, you can specify the description of the tag, as well as choose its color. The duct of the settings click the "OK" button. And go down the page down.
5.) Copy the provided code and insert place in the site you need.
Several notes
- This method of inserting Yandex cards to the site is suitable for any CMS: Joomla, OpenCart, Wordpress and others.
- Often, a visual editor, for example, in Joomla, cuts the code. So it is desirable to work with the contact page without the editor. Or insert the map to the site after all visual edits.
Copy the code created by the card into the text file, and when the pin page is edited, when you distort the code, you can always restore it.
On this today, everything in the following articles I will continue to lay out the cribs on technical work with sites.
If you wish insert good map to the website With the location on it, for example, your office, warehouse, then use such well-known web tools as map for site from Yandex or map for the site from Google.
In this article we will tell for what and how to insert the Yandex map to the site.
So, for example, looks like a map of Yandex, which we inserted on the site shopping center. It could be more details with images of houses in the diagram, but in this case it was more important to indicate the location of the shopping center regarding the nearest settlements, so a small scale was chosen.
What is the map on the site?
You may be smile after reading this seemingly a rhetorical question. "The card is needed that visitors know where we are," is a simple answer too simple to understand the role of the map especially for a commercial site. Here are some important aspects Having a map on the site:
- Note special attention: The presence of a map largely increases the degree of confidence in your resource. The visual display of the location of the company, the office, the store subconsciously liberates the potential client (eliminates the fears, it seems: "What if it is deceived and disappeared?"), So increases the likelihood that the site visitor becomes a real customer.
- The presence of an interactive card (in contrast to the image card) allows the user to better navigate on the ground, to see the nearest metro station, motorists - check the route on distant approaches to the object. In addition, the interactive map allows you to look at the area from Space.
- Well, of course, the map on the site is needed so that visitors and customers of the site knew the location of your store, office, warehouse.
How to insert the Yandex map to the site (step by step instruction)
Take advantage of designer Yandex.Cart API.
In this article we give an approximate step-by-step instructionswhich we hope will help insert the Yandex map to your site:
Step 1. Initial setup Yandex Maps for the site:
- Open the Yandex.Cart Designer page for the site.
- Find on the map the necessary geographical location at the address or manually (by zooming the slider and moving the map mouse).
- Select a convenient scale. The final scale is better to install at the end of the work. Let's draw tags on the map, lines (driveways) and contours of buildings or territories.
- Specify the name of the future map in the appropriate field.
- We turn to the service toolkit: buttons for drawing points (labels on the map), lines, polygons (contours) and map size.
Step 2. Drawing on the point of points (labels):
- Click on the drawing button.
- We put a label (point) in the right place. For example, on the building of your office. Map for the site from Yandex allows you to insert not alone, but a few labels (for example, if you have several shops, warehouses or offices).
- Go to setting the properties of the installed tag (text insert, color selection, etc.).
Step 3. Setting up properties installed on the Tags map:
- Click directly according to the label.
- In the window that opens, select the properties you need (color, tag on the map), write the text at the request (later the text will be visible to the user when clicking on the label).
- Any label can be removed in the appropriate properties window.
- So we put on the Yandex map for the site the label of your office, set up its properties, now go to drawing lines. For example, the lines of the access way to the office.
Step 4. Drawing lines on the map:
- Click on the line drawing button.
- Click on the map, we get a broken line of any trajectory. It can endune with any object or to read the entrance route to the object.
- Moving Square and round markers, you can edit the line shape.
- By analogy with the labels, if you click on the line, the properties window will appear in which you can set the color, thickness, transparency of the line, as well as enter the text that will be shown to the user.
- Go now to drawing polygons.
Step 5. Drawing polygons filled with color contours:
- Click on the drawing button of polygons.
- Unlike lines that can also be outline any polygon, these polygons are contours with a flooded mid-color.
- Clear Mouse on the map You can draw any filled polygon. The method of drawing, editing and setting properties is similar to the line drawing method.
- Go now to changing the size of the map.
Step 6. Changing the size of the map for the site:
- Click on the size button.
- By moving square markers along the map circuit, you can resize to the required. Everything is simple.
- Go to the Card Creating Final.
Step 7. Getting Card Code for Site (Yandex):
- Give the map the final form by setting the final scale of the card and the final position (coordinates).
- At this stage, creating a map for the site (Yandex) can be considered complete. Click on a large yellow button "Save and get code".
- Even after saving the card, you can always return to edit.
- Please note that the card can be not only a scheme, but also a photograph from space, a hybrid or a "folk card" element.
- In addition, you are free to make a map of an interactive or simple image. An interactive map is more interesting, functional, but can load longer than simple image. The choice is yours.
- Insert the map of Yandex to the site, by placing the HTML code of the map in the location of the page.
Thanks to all readers who are interested in our step-by-step instructions.
Creating a map for the site from Yandex is an easy-sensitive, which does not require special knowledge and skills action against a background of much more complex website structures. If you are encountered with more serious difficulties when creating your site, please contact us. We will try to solve your problems!
If you like our instructions, you can recommend it to your friends and acquaintances. "Social buttons" are on the right. Such is our little caring.
