Download "Урок 22. Гео-карты на сайте | Курс Веб разработчик | Академия верстки"

Урок 31. Работа с заказчиками | Курс Веб разработчик | Академия верстки

Урок 31. Работа с заказчиками | Курс Веб разработчик | Академия верстки

Channel: Glo Academy

Урок 16. Слайдеры | Курс Веб разработчик | Академия верстки

Урок 16. Слайдеры | Курс Веб разработчик | Академия верстки

Channel: Glo Academy

Урок 23. Хостинг и домен | Курс Веб разработчик | Академия верстки

Урок 23. Хостинг и домен | Курс Веб разработчик | Академия верстки

Channel: Glo Academy

Урок 3. Настройка рабочего пространства | Курс Веб разработчик | Академия верстки

Урок 3. Настройка рабочего пространства | Курс Веб разработчик | Академия верстки

Channel: Glo Academy

Практика. Часть 1. Верстка шапки сайта | Курс Веб разработчик | Академия верстки

Практика. Часть 1. Верстка шапки сайта | Курс Веб разработчик | Академия верстки

Channel: Glo Academy

верстка

Артем Исламов

Glo Academy

видео уроки

курсы

создание сайтов

веб-разработка

курсы программирования

веб программист курсы

веб программирование с нуля

курс веб-разработчик 12.0

курс веб разработчика бесплатно

курс веб разработчика

онлайн курсы веб разработчика

курс веб-разработчик

веб разработчик исламов веб-разработчик

курс веб-разработчик исламов

веб-разработчик

академия верстки

gloacademy

уроки верстки

как создать сайт

css

html

Гео-карты на сайте

00:00:02

Academy of Layout, you are now in the

00:00:04

playlist called

00:00:06

web developer

00:00:07

10 stream, these are recordings of our closed

00:00:09

course, we post them for free on

00:00:12

YouTube, but we did not post the

00:00:14

homework and diploma project from this

00:00:16

course in order to get the full

00:00:17

access to all the diploma homework and so

00:00:20

on, you need to follow the link in

00:00:22

the description or there will be an information icon on the right in the corner,

00:00:25

you can click

00:00:27

there and follow the link, then you

00:00:29

pay for full access to all

00:00:32

homework and the diploma project, indicate

00:00:35

your email and after that you receive

00:00:37

full access to the recordings of the web

00:00:39

developer courses ten zero with all

00:00:41

the modules with all the tasks

00:00:42

additional tasks with all the video

00:00:44

lessons that are here as you know

00:00:47

we usually attach additional documents to each of our

00:00:50

lessons

00:00:52

additional materials layouts

00:00:54

and additional links so if

00:00:57

you want to get full access to all the

00:00:59

recordings and don’t wait until they come out on

00:01:01

YouTube, you can follow the link in

00:01:03

the description and pay for a pleasant viewing of

00:01:05

this lesson, see you soon

00:01:06

everyone, hello here Artem and breaking we

00:01:09

continue to learn the basics of wipe

00:01:10

development today we have a lesson about GIA

00:01:13

cards on the site The fact is that very

00:01:15

often on pages or

00:01:17

multi-page sites it is necessary

00:01:19

to set a mark on the map;

00:01:20

this can be done for several

00:01:22

purposes: to show where the

00:01:25

company’s office is located, to show how to get to this

00:01:28

office, double GIS navigation is used for this,

00:01:30

and so on to use

00:01:33

the index google or Dublin maps, we will

00:01:36

use mainly constructors, but we will

00:01:39

also consider an example from the Yandex sandbox on

00:01:42

how to customize a map for yourself using

00:01:44

java-script, since for beginners this is a

00:01:46

complex topic, I will write it very briefly and

00:01:50

therefore this will not be a mandatory point,

00:01:54

so the first maps which we will consider

00:01:56

will be maps from Yandex,

00:01:57

using Yandex maps is much

00:02:00

easier than any other cards due to the

00:02:03

fact that Yandex has a very convenient

00:02:05

map constructor, so we are looking for an

00:02:07

index map constructor, it is free and

00:02:10

does not require any special skills,

00:02:13

we just open the map constructor,

00:02:15

we can save objects

00:02:17

giving them a name for example an example from a

00:02:20

video lesson

00:02:21

and here there will be a description of this map I

00:02:23

use for a lesson and here we find

00:02:26

for example Kurskaya 25 Kazan

00:02:29

excellent we can choose the color of the mark the

00:02:32

format of this mark and even the images

00:02:35

on this mark for example like this we

00:02:37

can select the zoom size and the position of the map,

00:02:42

that is, all this can be configured without

00:02:44

any special skills; this is

00:02:46

how we save this map;

00:02:49

we show where the mark should be

00:02:51

on our map and there are several settings here;

00:02:54

it can be an interactive

00:02:57

map that will move on the site;

00:02:59

it can be a static map which

00:03:01

does not move, it will be in the form of a

00:03:02

Penza image; it is also printed at

00:03:05

high resolution, so it will be

00:03:08

more useful for printing; as an atlas,

00:03:10

we will use an interactive

00:03:12

map, and it is possible to stretch

00:03:14

this map in width, that is, if our

00:03:16

block,

00:03:17

for example, occupies 6 columns or four

00:03:19

columns, we we just set the parameter

00:03:21

to stretch in width and the map becomes

00:03:23

rubbery in width,

00:03:24

the only point is that the height must

00:03:27

be fixed, it must

00:03:28

be in pixels,

00:03:29

well, in our case, 400 pixels, click

00:03:33

get the map code and paste this

00:03:35

script anywhere where

00:03:38

our map should be, open our document is here

00:03:41

I have the standard basic

00:03:43

bootstrap markup there is a container and let me

00:03:45

create a new row inside which there will be a

00:03:48

call md say 6 by 2 and in the first kmt-6

00:03:52

there will be for example the address of our company

00:03:55

where this address will be written for example

00:03:58

narrow 25 like this is

00:04:01

it will be etc. inside which the

00:04:02

address of the company will be written, for example, the telephone number of

00:04:05

our company and here it will be written, for

00:04:07

example, telephone 8

00:04:10

like this, well, there may

00:04:12

be a lot of information here, I don’t know the

00:04:14

third level header, how to find us, a

00:04:17

very common situation on the site,

00:04:19

here we will insert the actual script from

00:04:22

Yandex and what we will get as a result

00:04:24

go to the site and we see that there

00:04:26

is information here on how to find us,

00:04:29

company address and phone number, and we see here an

00:04:31

interactive map that you can

00:04:32

zoom in,

00:04:33

delete and build routes for this,

00:04:36

in fact, we didn’t have to invent anything like that, that is,

00:04:38

everything was already ready and

00:04:40

everything works quite well,

00:04:43

if suddenly the layout changes, that is, the

00:04:46

carter occupies the entire width, that is, we are

00:04:48

not limited to a fixed width of the

00:04:50

map in this way,

00:04:52

another moment when we turn the

00:04:53

mouse wheel on the map and we have a rabbit, this is not very

00:04:56

convenient if, for example, the map takes up the entire

00:04:58

width of the screen, then the user can be

00:04:59

very annoyed that it is

00:05:01

not the site that will be hidden, but the map itself, so

00:05:04

that this does not happen scroll,

00:05:06

we change the parameter to scrolls and that’s it, the

00:05:09

map will not be hidden by moving the mouse, that

00:05:12

is, it will not be hidden by the rabbit page

00:05:13

to enlarge or you can reduce the scale by

00:05:15

using these sliders, a

00:05:17

very important point that I want to

00:05:19

draw attention to is that you cannot close

00:05:21

the mark that this map is made

00:05:23

using Yandex,

00:05:25

in order to use Yandex maps

00:05:28

for free without any additional

00:05:30

conditions of restrictions, you must

00:05:32

make sure that this map is visible that

00:05:35

it was made in Yandex, this is a

00:05:37

requirement of Yandex policy and the terms

00:05:39

of use,

00:05:40

therefore,

00:05:42

this

00:05:44

card should not be blocked by any logos or other extraneous things. As you

00:05:46

noticed, there is nothing complicated in using

00:05:49

Yandex cards on the constructor, and now

00:05:51

I will go to the constructor and change this

00:05:54

card, that is, I will return to edit

00:05:56

this map and have another address in mind,

00:05:58

for example, the Kremlin one

00:06:01

Kremlin one entered another address

00:06:04

here will be the address of our point, this

00:06:08

point can be deleted I save the map

00:06:11

here in the constructor, that is, I

00:06:14

change everything here in the constructor, I

00:06:17

get the map code but change it no need,

00:06:19

in fact, I saved it as it is and

00:06:21

now there will be other information on the site,

00:06:24

as you can see, the address has changed,

00:06:27

I didn’t get into the code, we didn’t have enough

00:06:30

to change it all in the map designer, this is

00:06:32

very convenient, for example, if the

00:06:34

user’s address on the site changes very often

00:06:35

he can change the

00:06:37

maps himself, this is how

00:06:41

Yandex maps are used using

00:06:43

the constructor, but there is also Yandex

00:06:46

maps for the site, we can manage them

00:06:48

through the so-called pr and 5 Yandex

00:06:51

maps, we go to Yandex maps like

00:06:54

yandex.ru maps, there is a free one here and

00:06:57

pr in free and PR there is

00:07:00

documentation for this itself and

00:07:02

write these cards and are controlled through a

00:07:04

java script, so we can go to java

00:07:07

script and 5 and go to the example in the

00:07:10

developers club to look at the various

00:07:12

modules for cms documentation and so on,

00:07:15

everything is designed in very detail like

00:07:18

connect this map how to configure it

00:07:21

create how to place your mark here

00:07:24

they are a standard mark with an index

00:07:27

now I would like to show that same

00:07:29

sandbox because in the sandbox there are a

00:07:31

lot of interesting examples on this map

00:07:33

for example if we go to the sandbox and

00:07:36

we can set our own image

00:07:39

for our method For example, a customer wants to

00:07:41

place his company logo on a map on a website

00:07:45

and we can easily implement this

00:07:47

mark using the Yandex maps api,

00:07:49

for example, let’s find, for example,

00:07:51

we have some like this here like this like this, for

00:07:53

example we have this

00:07:56

company logo. us png format

00:07:58

for example 64 pixels wide download

00:08:01

it here it is this logo of our customer

00:08:04

I will transfer it to our folder

00:08:07

and our logo will be stored in the m&g folder

00:08:09

and in order to place a

00:08:11

map on our website with this logo

00:08:14

all we need to do is connect

00:08:16

Yandex maps using this,

00:08:18

go to a new java-script tab,

00:08:21

now go to the documentation and Yandex

00:08:23

maps and connect first, connect

00:08:26

the api in this way, you need to

00:08:28

connect and pr

00:08:30

our constructor, we delete the constructor,

00:08:34

this is of course easy, but it is not

00:08:36

flexible enough, now after head I will add

00:08:38

a script that refers to the Yandex

00:08:41

maps api now using this api

00:08:43

I can configure Yandex maps here

00:08:45

below I will write a script and start setting up

00:08:48

our map for this I need to create an

00:08:50

element with the map identifier or

00:08:53

any other identifiers and give

00:08:55

it a style for example height and width I

00:08:59

will use this With this blank, let’s

00:09:01

say the ready-made templates

00:09:05

will have a width of one hundred percent and a height of 400

00:09:07

pixels. I won’t bother with the style so as

00:09:09

not to divert the focus of your attention from the

00:09:11

necessary things, and so we created a

00:09:13

style identifier, we can set

00:09:15

calm ones through CSS, but the most important thing is that

00:09:17

now we can create this map, for

00:09:20

this we need to create a new

00:09:21

warm-up variable, create a

00:09:25

new map using the new maps function, indicate the identifier

00:09:28

on which we are referring and inside indicate the

00:09:31

parameters of this map where the center of

00:09:34

this map will be located and indicate the coordinate width

00:09:36

and longitude and indicate the size of

00:09:38

the zoom, that is, how close the

00:09:41

map should be, that is, all the control of the

00:09:43

map now goes to the java script, but

00:09:45

we will use the ready-made option,

00:09:47

so we find limes among the function, we simply

00:09:51

copy everything that we have here and

00:09:55

paste it here and so on into our

00:09:58

map identifier a map will be placed

00:10:00

which is in the center which is located at the

00:10:03

point 55-75 1574

00:10:06

and 3750 7-8 56 zoom we will have 9

00:10:11

actually we are interested in what michael

00:10:14

sm arc that is we need to create a mark

00:10:17

on the map that is we create a mark on the

00:10:19

map these are our own label icon that is,

00:10:21

this content will open when

00:10:22

you hover or click bolo content this

00:10:25

beautiful label and then the icon layout default image and

00:10:29

here we replace the link to our picture,

00:10:32

it is located in the anim g folder and is

00:10:33

called PJ flight, we indicate its

00:10:37

size 64 to 64 contribution, in my opinion,

00:10:40

let’s do it

00:10:41

64 by 64 and we shift this icon, for

00:10:45

example, vertically and horizontally

00:10:48

by minus 32 by minus 32, that is,

00:10:53

half the width and the

00:10:55

entire width, or rather the entire height, so that

00:10:58

the mark on this map is exactly at the bottom of

00:11:00

this picture, all we have to do is

00:11:02

add our mark to our map,

00:11:04

go to the sandbox and

00:11:08

here, actually, I didn’t download everything here,

00:11:11

but we needed this

00:11:14

thing here, there is also the option to add it from

00:11:18

the content, but we won’t

00:11:20

use it here module, a comma and

00:11:22

just add a belkart so stop, we

00:11:26

still need to close here, we haven’t completely copied

00:11:28

all the code that we had here, well,

00:11:30

here they are, these are these, and these are the peeps

00:11:32

that closes our content to the end,

00:11:36

everything is fine now it should work, and

00:11:39

so it is for us a map has appeared where there is our

00:11:42

own icon, when we hover over it, we

00:11:44

can see that this is our own icon, when

00:11:46

we click it, the content of this label is revealed, as you

00:11:49

can see in the image, the

00:11:51

center of our map is actually too large,

00:11:54

here for some reason on the river, but the point is

00:11:56

that if we we want to place our

00:11:58

own image there, we can do

00:12:00

this using this script, that is,

00:12:02

we can sign the icon here,

00:12:04

signature when hovering, save,

00:12:07

reload the map and there will be a signature here when

00:12:09

hovering, and here a signature when clicking,

00:12:11

writing when clicking and a description of

00:12:14

our object will appear when clicking,

00:12:16

supplement accordingly and you can customize

00:12:19

this map as you like, I hope this is

00:12:22

clear, now let's move on to maps

00:12:24

from google, how the same maps

00:12:27

only from google work, in fact,

00:12:30

just like the Yandex map designers,

00:12:32

google maps also have an api, but it is

00:12:35

quite complex for understanding of a beginner

00:12:37

and therefore we will not dwell on it in detail,

00:12:39

we will dwell

00:12:41

in detail on the google maps map designer Google maps Google

00:12:43

maps google.com

00:12:46

we find here the Kremlin one we found

00:12:50

the Kremlin one this mark and

00:12:52

now we can click here menu

00:12:55

link code and we can paste short

00:12:57

url or use the code, this is an

00:13:01

individual map, it works through an

00:13:03

iframe, that is, no longer through a script like

00:13:05

Yandex, and we can copy this

00:13:07

iframe, press kontrol c, insert it where

00:13:10

we should have a map, for example, knees

00:13:12

up to 6, set the width,

00:13:15

for example, 100 percent, the height

00:13:17

will also be 450

00:13:18

we save and get the same google

00:13:23

maps, this is the principle of operation, that

00:13:27

is, you

00:13:28

can configure these maps in exactly the same way in

00:13:30

great detail through ebay, but within the framework of

00:13:33

this course we do not consider the

00:13:34

Google maps api, so it’s clear what to do

00:13:38

if, for example, we have

00:13:40

customer requirements use DoubleGIS maps we

00:13:42

write

00:13:43

DoubleGIS maps for the site and there is a section for

00:13:46

developers and from there we

00:13:48

can actually download and customize maps from

00:13:50

DoubleGIS and 5 DoubleGIS super fast cool

00:13:55

cool create a widget and just

00:13:58

like Yandex maps we create you can

00:14:01

take Sberbank for example

00:14:02

Let's take Vavilov 19, Sberbank

00:14:06

has chosen the object perfectly, then we agree to the

00:14:08

terms of use, we get the code and

00:14:11

we insert this code instead of our

00:14:14

cards, as you can see, everything is also very simple, there

00:14:17

are managed

00:14:19

settings, there are also detailed ones,

00:14:22

now this is what the cards from Dublgis look like

00:14:26

here you can you can find the entrance, you can set

00:14:29

the path to this object,

00:14:31

and in general, use very

00:14:33

detailed, most detailed maps of

00:14:34

cities,

00:14:35

here's dubgis, that's all for me, the lesson

00:14:38

is finished, do your homework and I'll

00:14:40

see you in the next lessons,

00:14:42

Artem Islamov was with you, see you soon,

00:14:44

bye bye

00:14:45

me too I hope you liked this lesson

00:14:47

and you will start doing your

00:14:49

homework in order to get the homework

00:14:51

for this lesson, I remind you that you need to

00:14:53

follow the link in the description or

00:14:56

pay for access to the classes on the right in the corner,

00:15:00

it costs 990 rubles, you will receive all the

00:15:02

homework and all the necessary materials and

00:15:04

the lessons, as I already said, it all looks like

00:15:06

this, for each

00:15:08

music lesson we attach additional

00:15:09

materials, assignments, layouts, and so on, in

00:15:12

total for this course you will receive a huge

00:15:14

number of lessons of all kinds of different questionnaires,

00:15:16

all kinds of links to additional

00:15:18

materials and even recordings of our live

00:15:20

broadcasts with answers to questions

00:15:22

That's all, follow the link in

00:15:25

the description and get full access to

00:15:27

this course

Description:

Ссылка на полный плейлист: https://www.youtube.com/playlist?list=PL3LQJkGQtzc5G7wIQfVqBMEprmTKZIaXf Это закрытые записи курса веб-разработчик 10.0. Получите полный доступ к домашкам, макетам и дипломному проекту. Переходите по ссылке 👉 https://study.up-skills.ru/web_dex_x Подпишитесь на канал, если вам нравятся эти видео: https://www.youtube.com/channel/UCVswRUcKC-M35RzgPRv8qUg?sub_confirmation=1 Больше контента в нашей группе Вконтакте https://vk.com/glo_academy Присоединяйтесь к нашему сообществу Discord https://discord.com/invite/k5XzZ68 Чтобы записаться на мой курс по основам веб-разработки, напиши в нашу группу и мой ассистент скажет тебе, что делать дальше: https://vk.me/glo_academy Прочитай мою историю в блоге: https://vk.com/islamov_blog Мой канал в telegram "Лысый из браузера" https://tele.click/baldfrombrowser Чтобы заказать рекламу на канале, пишите в личку вконтакте: https://vk.me/aislam23 или telegram https://t.me/aislam23 ----------- Я использую хостинг Link Host с 2014 года https://link-host.net/hosting/ Телеграм-каналы с дизайн-макетами для тренировки вёрстки: https://ttttt.me/figma2html https://ttttt.me/figma_start https://ttttt.me/figmatamplates Каналы с крутыми фичами на CSS и JavaScript: https://ttttt.me/codepen_js https://ttttt.me/css_features Канал с терминами для айтишников: https://ttttt.me/slang_it Канал, где публикуют ссылки на полезные сервисы и сайты: https://ttttt.me/linkforwork

Preparing download options

Popular

HD video

Only sound

All

* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."

** — Link intended for online playback in specialized players

Questions about downloading video

How can I download "Урок 22. Гео-карты на сайте | Курс Веб разработчик | Академия верстки" video?

http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

Which format of "Урок 22. Гео-карты на сайте | Курс Веб разработчик | Академия верстки" video should I choose?

The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

Why does my computer freeze when loading a "Урок 22. Гео-карты на сайте | Курс Веб разработчик | Академия верстки" video?

The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

How can I download "Урок 22. Гео-карты на сайте | Курс Веб разработчик | Академия верстки" video to my phone?

You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

How can I download an audio track (music) to MP3 "Урок 22. Гео-карты на сайте | Курс Веб разработчик | Академия верстки"?

The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

How can I save a frame from a video "Урок 22. Гео-карты на сайте | Курс Веб разработчик | Академия верстки"?

This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

What's the price of all this stuff?

It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.