How to insert a location map from Google Maps (Yandex Maps). How to enable navigation

In this article, I want to start a series of articles on working with the Yandex.Maps API. The Yandex.Maps documentation is quite complete, but the degree of fragmentation of information in it is high, when you first enter the documentation without half a liter, you can’t figure it out, and to solve a problem, you can spend a lot of time searching through the documentation and in a search engine. This series of articles will talk about practical solutions to the most common cases of using the Yandex.Maps API of the latest, at the time of this writing, version 2.1.

When laying out a site in contact information, it is often necessary to insert a map on which the location of the organization for which the site is being developed will be marked. In the simplest cases, this can be just a screenshot from online maps (or not online):

The map constructor can be used to insert an interactive map
https://tech.yandex.ru/maps/tools/constructor/ :

If we need a more advanced use of maps (our own labels, programmatic movement of maps, etc.), then for this we need to use the Yandex.Maps API: https://tech.yandex.ru/maps/jsapi/ . As an example of how to use maps, this article will look at creating a map with the simple addition of a custom label and balloon.

First, let's connect the API components:

If some large application is being developed using maps, then it is better to connect the API components of a certain version so that when updating the API on the Yandex side, nothing breaks in production:

The map will need to be placed in some block, for example in div#map. Next, the map must be created in this block (after the map and DOM readiness event is triggered):

ymaps.ready(init) ; function init() ( var myMap; myMap = new ymaps.Map ("map" , ( center: [ 55.76 , 37.64 ] , zoom: 7 ) ) ; )

Here we indicate:

1. block identifier map, where we will create a map;
2. center— the center of the map indicating the width and longitude;
3. zoom— map scale factor.

By default, Yandex.Maps creates a lot of unnecessary elements, which in most cases are not needed on websites. Basically, it is enough to apply 2 conditions to the controls and to the behavior of the map:

1. of the map elements, only the zoom slider is present;
2. the map should not be zoomed with the mouse scroll.

To fulfill these requirements, we supplement the code:

ymaps.ready(init) ; function init() ( var myMap; myMap = new ymaps.Map ("map" , ( center: [ 55.76 , 37.64 ] , zoom: 13 , controls: ) ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap. controls .add ("zoomControl" , ( position: ( top: 15 , left: 15 ) ) ) ; )

Here we have disabled scrollzoom and added "zoom control" positioned from the top left corner.

Now we need to add a label to the map, for the article we will download its image from http://medialoot.com/item/free-vector-map-location-pins/ and place it in the code as follows:

ymaps.ready(init) ; function init() ( var myMap; myMap = new ymaps.Map ("map" , ( center: [ 55.7652 , 37.63836 ] , zoom: 17 , controls: ) ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap. controls .add ("zoomControl" , ( position: ( top: 15 , left: 15 ) ) ) ; var myPlacemark = new ymaps.Placemark ([ 55.7649 , 37.63836 ] , ( ) , ( iconLayout: "default#image" , iconImageHref : , iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] ) ) ; myMap.geoObjects .add (myPlacemark) ; )

Here we declare a variable myPlacemark, in which we write the marker, in the first parameter ymaps.Placemark specify the label coordinates, and in the third parameter:

1. indicate in iconLayout that a custom label image will be used;
2. iconImageHref- path to the image;
3. iconImageSize- specify the size of the image;
4. iconImageOffset- we indicate the shift from the upper left corner of the picture to the point of the image, which we point to the object we need. This is necessary so that when the map is scaled, the position of the label does not go astray. Why the offset is indicated in negative values ​​- only God knows the creator of the API.

And through myMap.geoObjects.add() add a marker to the map.

And now let's make a balloon that will be shown when we click on the map label, we will take the layout of the balloon and its contents from http://designdeck.co.uk/a/1241

ymaps.ready(init) ; function init() ( var myMap; myMap = new ymaps.Map ("map" , ( center: [ 55.7652 , 37.63836 ] , zoom: 17 , controls: ) ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap. controls .add ("zoomControl" , ( position: ( top: 15 , left: 15 ) ) ) ; var html = " "; html += "" ; html +=" "; html += " The Victoria Tower Gardens " ; html += "" ; html +=" City of London " ; html += "" ; html += " United Kingdom " ; html += " 020 7641 5264 " ; html += " " ; html += " " ; var myPlacemark = new ymaps.Placemark ([ 55.7649 , 37.63836 ] , ( balloonContent: html ) , ( iconLayout: "default#image" , iconImageHref: "http://site/files/APIYaMaps1/min_marker.png", iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] , balloonLayout: "default#imageWithContent" , balloonContentSize: [ 289 , 151 ] , balloonImageHref: "http://site/files/APIYaMaps1/min_popup.png", balloonImageOffset: [ - 144 , - 147 ] , balloonImageSize: [ 289 , 151 ] , balloonShadow: false ) ) ; myMap.geoObjects .add (myPlacemark) ; )

We are here:

1. in balloonContent specify the content that will be displayed when the balloon is opened;
2. balloonLayout- specify that a custom image will be used as the balloon layout;
3. balloonContentSize and balloonImageSize— sizes of content and images, respectively;
4. balloonImageHref- path to the image;
5. balloonImageOffset- offset relative to the upper left corner;
6. balloonShadow— disabling the shadow of the balloon (it doesn't affect anything with custom images).

Location map on the website with the address of the organization is a very user-friendly guide. Agree, it is very practical to go to the site and see the location of the company without opening additional tabs to search for the address on the map. This is an additional small plus in the treasury of loyalty on the part of the client in relation to the organization.

Usually a map is placed on the contact page under the specified contact details. It is inserted using a special program code (script). The easiest way to get such a script is using ready-made API solutions from Google or Yandex. To insert a map on the site, there is no need for knowledge of programming, following the instructions below, you will get a visual and convenient map.

Inserting a map using Yandex Maps

1. At the moment (beginning of 2013), the Yandex map designer is available in version 2.0, which is very convenient and logically understandable. You don't even need to be an authorized user to create a card. The first step is to create the map itself with the address. To do this, follow the link http://api.yandex.ru/maps/tools/constructor/ and enter the address of the company in the lower input field. After pressing the "find" button, the system will display variants of the found addresses.

2. We put a dot at the desired address and indicate the name of the organization in the description field. It is better to choose the color of the dot based on the style of the site on which the map will be located. The constructor also allows you to mark other landmarks on the map, such as large known objects, stretch the map to the desired size, draw a route from a bus stop using the line drawing tool, edit the scale.

3. Next, go to the View tab. Here you can choose whether your map will be static or interactive. It is better to choose the second option, so the user will be able to view the nearby area and navigate.

4. Tab "Embed code" offers to read the user agreement. After confirming it, you will receive an embed code. You can edit it a little, for example, remove the link to Yandex, fit it more accurately, but it’s better not to make significant changes.

5. Copy this code and paste it on the contact page through the HTML editor after the text.

6. We save the changes made and check the result on the site page.

Inserting a map using Google Maps

1. The algorithm of actions is similar to that described above. Follow the link http://maps.google.ru/maps and enter the address of the organization in the search bar. You can also see what it looks like from a satellite. Next, to get the code, click on the link sign on the left. You can copy the existing code, or you can click on the "configure and preview the embedded map" link.

2. When editing is selected, an additional window will open where you can adjust its size.

3. Copy the received code and paste it through the html editor on the site page. It will look exactly the same as the preview. Unlike Yandex maps, Google maps are always only interactive, there are fewer opportunities to edit the map itself, but you can look at the terrain from the satellite, the relief with the names of objects and the 3D map.

If you are the developer or owner of a commercial WordPress project, such as an online store, then at a certain stage you may need to specify the coordinates of the company, or the address of the physical store. Of course, you can write the address in plain text and place it in contacts, but from the point of view of user convenience, this is not the best option.

The best solution would be to place a map, with directions or with a label at the location of the office.

It can be inserted into the contact section so that customers can visually determine how to get to your office. It is advisable to use the Yandex service for these purposes, since it is more focused on Russian-speaking users.

Inserting a Yandex map on a WordPress site is quite simple. You can either immediately use the Yandex API to create it and get the code for placement, or install a special plugin that will do everything for you using the same API.

Placement via Yandex API

Conclusion

As you can see, both methods of placing Yandex maps are quite simple. Difficulties can only arise on older versions of WordPress, but everything is solved with the help of templates. In addition to these two methods, there are several others that allow you to use more complex features, such as vehicle tracking. These functions are implemented manually through the Yandex API, which will require some programming skills.

In order for a site to be searched on Yandex.Maps, it must be registered in Yandex.Directory.

To place a map fragment on your site, you need to fill in a couple of fields in the constructor. I suppose that it is better to install a static schema code on the HTML page, with a link to Yandex.Maps, since the script can junk on devices with slow Internet.
Result:

Panorama mode can also be added to your website Result (the content can be rotated if you grab its section with the mouse, navigate the streets by clicking on the arrows):

I advise you to watch this video for inspiration:

Add a map to the site: two images side by side (HTML / CSS)

You can put an image of the organization near the map. When the browser window is reduced, the images will decrease proportionally.

But I think so: the user is looking for an organization and he first needs to know how to get to it. Therefore, it is better if he sees a map of sufficient size than a small map and a small nearby photo of a building. When the screen is reduced, the right side of the background image will remain as long as possible.

And here is the left one:

If you want the photo to move to a new line when two pictures do not fit together on the current one?

And lastly, inserting a card on top of the photo. The description of the image will be either to the right of the image with the address of the company, or below it.
Sculpture "Motherland is calling!"

Yandex Maps are now simply an indispensable thing in our lives. Now, in order to get from one point to another, you do not need to ask all passers-by where this street is or stray in unfamiliar places. Also, this program allows you to significantly save time by avoiding traffic jams, about which it notifies you in real time. And that is not all. In the latest versions, the users of the program themselves can tell each other about traffic accidents, any problems on the road, and other things important to motorists. So, how to install Yandex maps?

The installation instructions depend on which device you want to put this useful application on, so let's consider the most popular options.

How to install Yandex maps on android?

Phones running the Android system have a huge advantage over regular phones in that they have their own Yandex app store. Maps are also available in it and are free, that is, you can download them to any device an infinite number of times.

1. So, open Google Play (or if you have an old firmware version, then Android Market).
2. In the window that opens, select the search field and enter Yandex maps there.
3. There will be several programs in the search results. One of them will be the maps themselves, and the other is the navigator. You can install both if you think you'll be using car navigation as well.
4. After installation, each of the programs you can find in the menu

How to install Yandex maps on your phone?

Yandex app. Maps supports a huge number of phone models, or rather almost all that support Java. Let's look at an example of installation on a very ordinary phone.

To install and operate the program itself, you will need a configured Internet connection!

1. Open a web browsing program on your phone (I recommend using the standard phone solution, that is, do not use Opera Mini)
2. Go to m.ya.ru/maps and be sure to check that your phone is detected correctly. This is important, because in case of an error, the program may not work correctly or not start at all.
3. If everything is correct, download the program. If there was some error with the definition, click on the "Other model" button and find your phone in the list.
4. After downloading, install the program in the affirmative by answering all the questions of the phone.
5. Ready! Now you can use maps on your phone!

How to install Yandex maps on the navigator?

In order to make sure that your navigator can support Yandex Maps, you need to find out what operating system it is running on. If this is Android, then you should use the instructions that I wrote a little higher (installation on Android phones). This process will not be any different if you put it on a phone, tablet or navigator. That is, you just need to go to the Google Play store and download the application to your phone, and then install it.

If your browser is running Windows CE, then you're in luck. There is a version for similar devices.

1. Download the application for Win CE to your computer from here "yandexmaps-wince.zip".
2. Unpack the downloaded archive on your computer and send all the files to your navigator.
3. Use the file manager to find these files and click on them to install.
4. Ready! Now you can use all the features of Yandex. Maps right in your navigator.