Здравствуйте. Подключил карту с помощью гугл апи, прикрепил к нему собственный маркер. Теперь нужно к этому маркеру прикрепить слева окно которое я написал в html и задал стили с в css. Стандартное окно я уже подключал и оно мне не подошло(так как я не мог задать ему стили). Потом удалил все и оставил только карту и маркер. Гдето прочел что с помощью APPEND можно както сделать то что я хочу,но не получилось заставить код работать.
function initMap() {
var uluru = {lat: 50.47719458, lng: 30.82746506};
var map = new google.maps.Map(document.getElementById('map'),{
zoom: 14,
center: uluru,
disableDefaultUI: true,
scrollwheel: false
});
// Создаем маркер на карте
var marker = new google.maps.Marker({
// Определяем позицию маркера
position: {lat: 50.477, lng: 30.827},
// Указываем на какой карте он должен появится. (На странице ведь может быть больше одной карты)
map: map,
animation: google.maps.Animation.DROP,
// position: {lat: 50.477, lng: 30.827}
// Пишем название маркера - появится если навести на него курсор и немного подождать
title: 'Группа компаний Фьюжн',
// Укажем свою иконку для маркера
icon: '../img/marker.png'
$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
});
}
html body .main .geo {
overflow: hidden;
position: relative;
background-repeat: no-repeat; }
html body .main .geo #map {
position: absolute;
width: 100%;
height: 100%;
height-top: 0;
height: 385px;
height-bottom: 385px; }
html body .main .geo #message {
position: absolute;
padding: 10px;
background: #555;
color: #fff;
width: 75px;
display: none; }
html body .main .geo .contacts {
background-color: #f2932f;
opacity: .9;
position: relative;
text-align: center;
padding-bottom: 24px;
padding-left: 31px; }
html body .main .geo .contacts h1, html body .main .geo .contacts p, html body .main .geo .contacts address {
color: #fff;
font-family: roboto;
text-align: center; }
html body .main .geo .contacts h1 {
font-size: 50px;
line-height: 73px;
font-weight: 300;
letter-spacing: 0.072em;
text-transform: uppercase;
padding-top: 61px;
margin: 0 0; }
html body .main .geo .contacts h1:before {
content: " ";
text-align: center;
height: 1px;
width: 65px;
background: #FFD9B2;
display: block;
margin: 0 auto;
position: relative;
top: -10px;
overflow: hidden; }
html body .main .geo .contacts p {
font-size: 18px;
font-weight: 300;
letter-spacing: 0.00em;
margin-bottom: 17px; }
html body .main .geo .contacts address {
font-size: 18px;
font-weight: 300;
letter-spacing: 0.01em;
margin-bottom: 19px; }
html body .main .geo .contacts:after {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 9999px;
background-color: #f2932f; }
Елки палки как тут вставить штмл?
Я даже скопировал код в текстовый документ, а его блин оказывается нельзя прикрепить r сообщению. !!! :(
.geo
overflow: hidden
// height: 385px
position: relative
background-repeat: no-repeat
#map
position: absolute
// z-index: 1
width: 100%
height: 100%
top: 0
height: 385px
bottom: 385px
#message
position: absolute
padding: 10px
background: #555
color: #fff
width: 75px
display: none
// #firstHeading
// top: 10em !important
// left: 30em !important
// // position: absolute !important
// // z-index :1 !important
// position: relative !important
// float: left
// display: inline-block !important
// width: 13% !important
// height: 45px !important
// background: #fff !important
// top: 155 !important
// right: 0 !important
// bottom: 0 !important
// left: 400 !important
// h1
// // position: absolute
// font-size: 18px !important
// color: #f2932f !important
// line-height: 45px !important
// text-align: center !important
// margin-bottom: 0
// &:before
// position: absolute
// content: " "
// text-align: center
// // background: #fff
// display: block
// margin: 0 auto
// // position: relative
// top: 29px
// left: 247px
// overflow: hidden
// width: 0 !important
// height: 0 !important
// border-bottom: 8px solid #fff !important
// border-right: 15px solid transparent !important
// border-bottom: 8px solid #9acd32
// border-image-outset: 0
// border-image-repeat: stretch
// border-image-slice: 100%
// border-image-source: none
// border-image-width: 1
// border-left-color: #9acd32
// border-left-style: solid
// border-left-width: 24.6667px
// border-right-color: rgba(0,0,0,0)
// border-right-style: solid
// border-right-width: 24.6667px
// border-top-color: rgba(0,0,0,0)
// border-top-style: solid
// border-top-width: 24.6667px
// display: inline-block
// height: 0
// margin-bottom: 30px
// margin-left: 10px
// margin-right: 10px
// margin-top: 30px
// width: 0px
.contacts
background-color: #f2932f
opacity: .9
position: relative
// height: 385px
text-align: center
padding-bottom: 24px
padding-left: 31px
h1,p,address
color: #fff
font-family: roboto
// display: inline-block
text-align: center
h1
font-size: 50px
line-height: 73px
font-weight: 300
letter-spacing: 0.072em
text-transform: uppercase
// margin-top: 250px
// margin-bottom: 50px
padding-top: 61px
margin: 0 0
h1:before
content: " "
text-align: center
height: 1px
width: 65px
background: #FFD9B2
display: block
margin: 0 auto
position: relative
top: -10px
overflow: hidden
p
font-size: 18px
font-weight: 300
letter-spacing: 0.00em
margin-bottom: 17px
address
font-size: 18px
font-weight: 300
letter-spacing: 0.01em
margin-bottom: 19px
.contacts:after
content: " "
position: absolute
top: 0
bottom: 0
left: 100%
width: 9999px
background-color: #f2932f
Это был SASS. HTML не получается прислать.
html body .main .geo {
overflow: hidden;
position: relative;
background-repeat: no-repeat; }
html body .main .geo #map {
position: absolute;
width: 100%;
height: 100%;
height-top: 0;
height: 385px;
height-bottom: 385px; }
html body .main .geo #message {
position: absolute;
padding: 10px;
background: #555;
color: #fff;
width: 75px;
display: none; }
html body .main .geo .contacts {
background-color: #f2932f;
opacity: .9;
position: relative;
text-align: center;
padding-bottom: 24px;
padding-left: 31px; }
html body .main .geo .contacts h1, html body .main .geo .contacts p, html body .main .geo .contacts address {
color: #fff;
font-family: roboto;
text-align: center; }
html body .main .geo .contacts h1 {
font-size: 50px;
line-height: 73px;
font-weight: 300;
letter-spacing: 0.072em;
text-transform: uppercase;
padding-top: 61px;
margin: 0 0; }
html body .main .geo .contacts h1:before {
content: " ";
text-align: center;
height: 1px;
width: 65px;
background: #FFD9B2;
display: block;
margin: 0 auto;
position: relative;
top: -10px;
overflow: hidden; }
html body .main .geo .contacts p {
font-size: 18px;
font-weight: 300;
letter-spacing: 0.00em;
margin-bottom: 17px; }
html body .main .geo .contacts address {
font-size: 18px;
font-weight: 300;
letter-spacing: 0.01em;
margin-bottom: 19px; }
html body .main .geo .contacts:after {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 9999px;
background-color: #f2932f; }
function initMap() {
var uluru = {
lat: 50.47719458,
lng: 30.82746506
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: uluru,
disableDefaultUI: true,
scrollwheel: false
});
// Создаем маркер на карте
var marker = new google.maps.Marker({
// Определяем позицию маркера
position: {
lat: 50.477,
lng: 30.827
},
// Указываем на какой карте он должен появится. (На странице ведь может быть больше одной карты)
map: map,
animation: google.maps.Animation.DROP,
// position: {lat: 50.477, lng: 30.827}
// Пишем название маркера - появится если навести на него курсор и немного подождать
title: 'Группа компаний Фьюжн',
// Укажем свою иконку для маркера
icon: '../img/marker.png'
});
}
$("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
html body .main .geo {
overflow: hidden;
position: relative;
background-repeat: no-repeat;
}
html body .main .geo #map {
position: absolute;
width: 100%;
height: 100%;
height-top: 0;
height: 385px;
height-bottom: 385px;
}
html body .main .geo #message {
position: absolute;
padding: 10px;
background: #555;
color: #fff;
width: 75px;
display: none;
}
html body .main .geo .contacts {
background-color: #f2932f;
opacity: .9;
position: relative;
text-align: center;
padding-bottom: 24px;
padding-left: 31px;
}
html body .main .geo .contacts h1,
html body .main .geo .contacts p,
html body .main .geo .contacts address {
color: #fff;
font-family: roboto;
text-align: center;
}
html body .main .geo .contacts h1 {
font-size: 50px;
line-height: 73px;
font-weight: 300;
letter-spacing: 0.072em;
text-transform: uppercase;
padding-top: 61px;
margin: 0 0;
}
html body .main .geo .contacts h1:before {
content: " ";
text-align: center;
height: 1px;
width: 65px;
background: #FFD9B2;
display: block;
margin: 0 auto;
position: relative;
top: -10px;
overflow: hidden;
}
html body .main .geo .contacts p {
font-size: 18px;
font-weight: 300;
letter-spacing: 0.00em;
margin-bottom: 17px;
}
html body .main .geo .contacts address {
font-size: 18px;
font-weight: 300;
letter-spacing: 0.01em;
margin-bottom: 19px;
}
html body .main .geo .contacts:after {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: 9999px;
background-color: #f2932f;
}
<!-- begin snippet: js hide: false console: true babel: false -->
Наконец то нашел как вставить код . Спервого раза неувидел. Я вставлял весь код фигурными скобками, а нужно было выбрать пятый значок в навигации.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Какие существуют виды рекламных бордов и как выбрать подходящий?
В backend нужно сделать регистрацию только для админа и контент-менеджераСейчас при попытке пройти по ссылке: 'регистрация нового пользователя'...
Подскажите пожалуйста почему не работает проверкаОтправляет даже пустые значения
Нужно создать свой генератор псевдослучайных чисел на PHP, который при использовании числа (сида), выдаст от 0 до 65280 (включительно) вот такие...